A quick and easy guide to making a blog with Jekyll + Github Pages and then hosting it. Assumed knowledge:
- Unix commands
Install Ruby if you don’t have it yet.
sudo apt update sudo apt install ruby-full
Now install Jekyll.
sudo gem install jekyll
Create a new Jekyll project.
jekyll new blogname
(note: if you want to use a template, instead of using the above command, just git clone the template you want - more on this at the end of the article)
Now, just cd into the folder Jekyll just made and check out the
_config.yml file. Change all the applicable stuff, like name, email, and whatever else if you’re using a template. “url” can be changed later once you’ve bought your domain.
To make a post, create a markdown file in the
_posts directory, in the naming convention of
yyyy-mm-d-name-of-post.md, for example
2019-03-10-how-to-jekyll.md. The format of the file should look like this:
--- layout: post title: "Welcome to Jekyll!" categories: jekyll --- Post content goes here.
If you’re using a template, check the sample posts to see what other parameters you should add in the top section.
You may need to run the following to make sure you have all the required dependencies:
After all this, you run this to see your website in action:
bundle exec jekyll serve
Now your website should be online at
http://127.0.0.1:4000/. Make a repo for it in Github, so that we can set it up with Github Pages later. Push the project to your new repo.
git add . git commit -m "hello world" git remote add origin [repo_url] git push origin master
Next, we want to vomit this onto the internet. I’ll be using Namecheap in this guide, but any other domain provider should work.
Once you buy the domain, you’ll need to change the DNS settings so that it can be reached. In Namecheap, you can go to the Dashboard, select “Manage” next to the domain name, then “Advanced DNS”, and add the following records, changing my github username to yours.
A Record @ 22.214.171.124 A Record @ 126.96.36.199 A Record @ 188.8.131.52 A Record @ 184.108.40.206 CNAME Record www you.github.io. 30 min
Now go to the settings page of your blog repo, which should be
Under the “Github Pages” headline, add your custom domain (should be in a form similar to
www.blogname.com) and hit save. Don’t forget to change url in
_config.yml to your domain in the form
https://www.blogname.com. It could take an hour or so for the DNS to resolve, but eventually, you should be able to see your site at the domain name you bought.
The above should work, but you’re cool so you want a cool blog. Like mentioned above, the steps for getting your blog to work on a custom template should be exactly the same, but instead of
jekyll new blogname you just git clone the template and cd into it, doing everything else from there. You can find a wide variety of Jekyll templates from these sites:
Next, you’ll want your blog to have SSL, to save your readers the embarrassment of anyone potentially finding out they’re on your site. And from content defacement as well, I guess. Fortunately, Github Pages does this easily for you - under your git repo settings, just tick the “Enforce HTTPS” box under “Github Pages”. Don’t buy Namecheap’s SSL certificate, you don’t need it.
In your root project folder, create a folder named
assets, and within assets, make an
images. Put images there. Then, in your post content, add something like this:
You can make Jekyll automatically generate a sitemap for you! Add the Jekyll Sitemap Plugin to your project (instructions are in the readme).
If you’re using
bundle exec jekyll serve to build your site, you may encounter an issue with your sitemap listing your urls in localhost terms instead of using your domain name. Instead, try building your site files with
bundle exec jekyll build. If you find that this still doesn’t work, enter the following command:
JEKYLL_ENV=prod jekyll serve