Quick and Easy Guide To Making a Blog with Jekyll And Namecheap

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)

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-dd-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:

bundle install

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    @   185.199.108.153
A Record    @   185.199.109.153
A Record    @   185.199.110.153
A Record    @   185.199.111.153
CNAME Record    www     you.github.io.      30 min

Now go to the settings page of your blog repo, which should be https://github.com/[yourgitname]/[yourblogname]/settings.

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. Yay! Great job. Note: actual blog content sold separately.

Additional Tips

Templates

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:

• http://jekyllthemes.org/
• https://jekyllthemes.io/
• http://themes.jekyllrc.org/

SSL

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.

Images

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:

![alt_text]({{static.static_files}}/assets/images/image.png)

Automatic Sitemap

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

This post was originally published on explainhownow.com

Comments

[Jeky]

Cool 😎 I thought you might have had how to set up new pages, maybe you could have that as a future post idea?

[Isabel Costa]

Thank you Katerina for posting this! I tried to do this last week, and I didn't finish it properly. I will follow this tutorial once I get to work again on my website. This was just what I needed last week :)

[Kat Maddox]

Thanks for your comment Isabel! :) Let me know if you have any issues and I'll be happy to help out.