I was looking for a tool that can build websites that are fast, simple and secure. These websites needed to be static because I didn’t want to deal with databases or a content management system (CMS) like WordPress or Ghost. After a lot of thought I decided to use Jekyll.
So what is Jekyll?
Jekyll is a tool for transforming your plain text into static websites and blogs. It is simple, static, and blog-aware. Jekyll uses the Liquid templating language and has builtin Markdown and Textile support. It also ties in nicely to Github Pages so you have the option to host your website for free. I highly recommend you join Jekyll Talk the official support forum, where users and contributors can ask questions and discuss all aspects of Jekyll.
Preparing to install Jekyll
Installing Jekyll is easy and straight-forward, but there are a few requirements you’ll need to make sure your system has before you start.
Install homebrew from the brew.sh website.
Install the latest version of Ruby using homebrew
Check the Ruby version installed
Go to the Mac app store and Install Xcode if you haven’t already. Then install the Xcode Command Line Tools.
Check Jekyll version
Change directory to the location where you want to create your site. I have chosen to keep all my Jekyll sites in a directory called
Jekyll located in
Create a new Jekyll site. Replace
site-name below with your own site name.
Change directory to the new site you just created
Preview your new site with the command
Jekyll will now watch for changes, and regenerate automatically. Your static website is generated in the
To view your Jekyll website open http://localhost:4000 in a browser.
How to update Jekyll
Bundler will update all your gems to the latest versions by simply running
bundle update in a Terminal window.
How to create and update a GitHub repository
Before i continue with this tutorial, its worth mentioning that you can learn to use Git in 15 minutes.
Open Terminal and go to your website directory
Your first instinct, when you start to do something new, should be to type
git init. Once inside your Jekyll site directory initialize it as a Git repository with the command
Good job! As Git just told us, our websites directory now has an empty repository in
/.git/. The repository is a hidden directory where Git operates.
Next up, let’s type the git status command to see what the current state of our project is
Create a readme file
.gitignore file right away, to indicate all of the files you don’t want to track.
Open the hidden
.gitignore file with the following command
Add the following to the
_site/ .sass-cache/ .jekyll-metadata .DS_Store
In order to begin tracking these new files, you use the command
git add. If you modify a file after you run
git add, you have to run
git add again to stage the latest version of the file
git status to determine which files are in which state (e.g untracked files)
After updating your website files in your website directory you can actually use
git add . to add all untracked files at once.
Now you can commit your changes to your GitHub repository.
Alternatively, you can type your commit message inline with the commit command.
Now you’ve created your first commit!
TIP: Adding the -a option to the git commit command makes Git automatically stage every modified file that is already tracked before doing the commit, allowing you to skip the ‘git add’ part.
Next created a new empty GitHub repository. Login to GitHub.com and click the ‘+’ icon and select ‘New repository’. Enter a repository name and then click ‘Create repository’.
In Terminal run the following command but first replace ‘username’ with your own GitHub username and ‘repository’ with the repository name you just created.
Now you are ready to push your changes to your new GitHub repository.
After your first push, you can simply type
git push to push future change to your GitHub repository.
Publish Jekyll to GitHub Pages
Create a new branch called gh-pages.
Switch to gh-pages branch.
TIP: You could also do
git checkout -b gh-pages to create and switch branch in one command.
Next you can delete the master branch on your local machine if you dont need to switch between two branches for development. We only need to use the
gh-pages branch in future for hosting and keeping track of our static website changes.
Push changes to gh-pages repository
Go to your Jekyll repository page on GitHub. Click on ‘Settings’. In the ‘Branches’ section, change the ‘Default branch’ in the dropdown menu to the newly created ‘gh-pages’ branch.
Now you can delete the master branch from GitHub
Your Jekyll website is now live on GitHub pages.
Setting up a custom domain on GitHub Pages
Create a CNAME file
Open the CNAME file using the following command.
Add your websites domain name in the following format and save your changes.
I then updated my domain registrar’s DNS to point to Cloudflare.
Setting up Cloudflare is really simple. You just need to create two A name records that point your domain name to GitHub’s IP Addresses
Then setup a WWW subdomain redirect by creating a CNAME record in Cloudfare that points to your domain name.
It will take awhile for your changes to take effect but your domain should now point to your Jekyll website that is hosted on GitHub pages.
How to update your Jekyll website
Jekyll comes with a built-in development server that will watch for changes and regenerated automatically by using
When you are finished making changes, it’s time to build the latest version of your jekyll website for production.
TIP: As you can see above im using the
JEKYLL_ENV=production prefix before the
bundle exec jekyll build command to only include Google Analytics when Jekyll is set to production environment.
Check file status
Add all untracked files
Push changes to your GitHub repository
Well done! Your Jekyll website is now up to date.
Did you find this tutorial helpful?