Setting up my blog

Setting up a personal blog has been on my to-do list for way too long! My first post here is a quick run through of how I set this site up using Jekyll, a static site generator written in Ruby that makes it easier to serve content and write blog posts in either markdown or HTML. The Jekyll docs for getting started are solid, but when I was confused or wanted to dive deeper on something I ran in to countless how to articles…so, without further ado:

Making the site look decent

After walking through the Jekyll Quick-start Guide I wanted a way to start making things look semi-decent on the variety of screen sizes that would be able to view it. One CSS library I’ve used in the past for lining things up and resizing content across desktop and mobile is the popular Twitter Bootstrap framework. Here are the steps I used for integrating it with a new Jekyll site.

1. Download or clone the latest version of Bootstrap for Sass ¹

2. Copy the following file and directory from the downloaded folder in step 1 to your Jekyll Sass directory
   • assets/stylesheets/bootstrap
   • assets/stylesheets/_bootstrap.scss
3. Create a basic stylesheet to import this library (styles/site.scss)²:

--- 
--- 
@import "bootstrap";

After walking through these steps I was able to use Bootstraps CSS classes and Grid System to start organizing content on my site

<div class="jumbotron">
    <div class="row">
        <div class="col-md-3"><img src="/assets/HeadShotDavidC.png"/></div>
            <div class="col-md-9">
                <h1><strong> David Chambers</strong></h1>
                <p>Intro Text ...</p>
            </div>
        </div>
    </div>
</div>

Success!

Creating Content

Now for the main reason to do all this: content. The cool thing about Jekyll is that you can write all of your blog posts in markdown and store them in your project’s _posts directory. As an example here is what this one looks like:

---
layout: post
title: Setting up my blog
date: 2017-12-27 13:30:00 -0400
---
Setting up a personal blog has been on my to-do list for way too long! ......

Then you can loop through files in your _posts directory using Jekyll’s site.posts variable and display them in a list. This will become a lot more useful when I have more than 1 blog post! Here’s my current blog page in action:

<h3>Posts</h3>
{% for post in site.posts %}
<div class="well">
	<time>{{ post.date | date: "%b %-d, %Y" }}</time>
	<h3><a href="">{{ post.title }}</a></h3>
</div>
{% endfor %}

When the site is built it creates all of the needed HTML for you, keeping the redundant HTML elements to a minimum and making it really easy to add new posts to the site.

Custom Domain and Hosting

Up next was getting this site online to serve this awesome content with my recently purchased domain from Namecheap using GitHub Pages. Since I’m using Github Pages and the free tier of Cloudflare for a wildcard SSL cert these steps (besides buying a domain) came without having to enter my credit card information.³

1. Add a CNAME file to my project’s GitHub Repository that contains your domain name.
2. Go to your Repository Settings > Options > Github Pages section and confirm that the site is published.
3. Head over to Cloudflare and create a new account. This is where all traffic to the website will route through and how the SSL certificate will be handled.
4. With your new Cloudflare account walk through the How to set up DNS records for your domain in CloudFlare account knowledge base article.

Success!

Wrapping up

If you’re feeling lost or want to get your hands dirty checkout my sample on Github that has all of this in a very simple Jekyll site. Thanks for tuning in for the first post of (hopefully) many. I’ve got plans to fine tune the site, add a comments section with disqus, and more blog post ideas to keep things fresh. Stay tuned!

Additional Links and Footnotes

Blogging motivation: Your Blog is the Engine of Community