Building your own Personal Website in Jekyll

A simple walk-through for creating a static blog website using Jekyll, a Liquid Theme, hosted on Github pages, using Markdown and Docker for local hosting.

Background

Personal Anecdote

In 2007 I created a blog using WordPress and it was generally easy to maintain but authoring was a bit time consuming and getting the performance I wanted was expensive for a personal notebook and random narratives I wanted to share. I stopped working on the site between 2011 and 2019 to focus on my business. In 2019 I decided to dig the site out of the graveyard. Currently there is a lot of awesome tech for constructing static websites. My favorite note taking format is Markdown and I wanted to base the site on Markdown if I could. I also wanted to make deployment easy, be able to view the site locally, have a low-cost delivery, serve via HTTPS (I am a nerd) and allow me to update it quickly. I settled on Jekyll using github pages and I use Docker to edit it locally.

Themes in Jekyll

Themes were the most confusing part of Jekyll for me initially. There are a lot of themes available but I was looking for something with a minimalist feel and I felt a minimalist approach would give me the fastest way to stand the site back up. I knew Mark Otto had older themes out there for Jekyll so I went there first. I am using one of his themes called Hyde as I feel it gets the job done for me right now.

Themes in Jekyll are a collection of HTML files with specific markup for the Liquid template language for Jekyll. I was expecting the themes to be more complicated but they are simply HTML websites with Liquid in them.

Assumptions

All of the examples here are done on MacOS but will work in other platforms almost identically.

Inventory and TODO List

Before we get started here is the 10,000’ view of what we are going to do:

• Craft content in Markdown
• Use Jekyll for the site
• Use Docker to host locally and see our drafts
• Host via Github Pages
• Make sure deployment is easy
• Setup our own Domain Name
• Host via HTTPS

Decisions you can change easily

• For this example we are going to use the Lanyon theme by Mark Otto

Let’s get started

First, in your terminal get to the path you want to build your website, e.g.

cd /var/www/

Next, we need to create a github repository. In this example we will call it jekyll-lanyon-example.

Next, there are two paths here; you can fork the Lanyon repo -OR- you can clone the lanyon repo and flush the git info and establish your own remote origin (what we are going to do).

Clone the lanyon repo to get the theme, remove the git information and rename the path to our jekyll-lanyon-example

git clone https://github.com/poole/lanyon.git
rm -rfv lanyon/.git
mv lanyon jekyll-lanyon-example

Now we have the site at /var/www/jekyll-lanyon-example

Craft content in Markdown

Time to update the content of the site using Markdown. Open up the lanyon path in your favorite editor and update the content and add your posts. This will likely be the first step in the iterative process for the site.

Now we will use Jekyll to serve the content

First, use the same version of Jekyll as Github

Check the Jekyll version Github is using by traveling here: https://pages.github.com/versions/. This will tell you what version they are running; next set that version with:

export JEKYLL_VERSION=3.7

Versions, versions, so many versions…

Mark’s _config.yml file is a bit dated (as of 2019-02-27 based on version 3.7 of Jekyll so you have to change it a bit), the new _config.yml file should look like this:

# Permalinks
#
permalink:           /:categories/:year/:month/:day/:title/

# Setup
title:               My Title
tagline:             My Own Webiste
description:         Some Amazing Description
url:                 http://yoururl.com
baseurl:             ''
paginate:            5

# Plugins, Tags, Categories and Analytics  
plugins:          [jekyll-paginate]

# About/contact
author:
  name:              Your Name
  url:               https://yoururl.com
  email:             you@gmail.com

Now, let’s use Docker to serve the content locally

To have Docker serve the content locally you must first understand where the content is at on your disk. Understand what path you used to pull in the Lanyon repository.

e.g. for our path we will assume /var/www/jekyll-lanyon-example - you will see the path in the Docker build command

docker run --env=DEBUG=true --rm --volume="/var/www/jekyll-lanyon-example:/srv/jekyll" -it jekyll/jekyll:$JEKYLL_VERSION jekyll build

After the build is complete you can run it with draft mode with this command:

docker run --name mydomain.com --env=DEBUG=true --rm --volume="/var/www/jekyll-lanyon-example:/srv/jekyll" -p 3000:4000 -it jekyll/jekyll:$JEKYLL_VERSION jekyll serve --watch --drafts

And now it works via http://localhost:3000

Host via Github Pages

Now we need to get the content up to our repository we created above.

Commit to Github

Make sure you swap out your repo with the repo below

git init
git add .
git commit -am 'initial commit'
git remote add origin git@github.com:cbschuld/jekyll-lanyon-example.git
git push -u origin master

Turn on pages

After you commit to Github you will have a master branch. Click on your repository and go to settings (look for the cog). From there head down to Github Pages.

From there, select Master Branch and it will be hosted… wait a few minutes and you can go directly to the URL they provide!

You did it!

Now to add content just push changes to your master branch and the changes will appear in minutes!