Starting a Blog with Jekyll
In this short guide, I will show you how to setup your own blog with Jekyll. That way you have complete control of your content and formatting.
Jekyll is a static site generator, that means it processes markup language text (e.g. markdown, the format used for github’s README file) and creates a static website.
Jekyll is built-in to Github and so it’s as simple as creating a repository(repo), editing and previewing entries locally, and then pushing your changes live to https://username.github.io
, all hosted for free!
Requirements
- Since Jekyll is Ruby Gem, a packaged library for the Ruby programming language, Ruby needs to be installed, you can see if you have it by opening a terminal and running:
$ ruby -v
This displays the version number, make sure you have version > 2.1.0 or higher. Follow this guide, if it’s not installed.
- Now we install Jekyll and Bundler. Bundler allows you to manage dependencies with a Gemfile, a list of Gems required for the site:
$ gem install jekyll bundler
Github Repo
- Create a public github repo with the name
username.github.io
whereusername
is your github username. You can follow the first part of this guide to do that. Clone the repo locally on your computer:$ git clone https://github.com/username/username.github.io $ cd username.github.io
Generating Template
- Create a Gemfile
$ touch Gemfile
in the local repo and edit it in your favorite text editor to add the following two lines:source 'https://rubygems.org' gem 'github-pages', group: :jekyll_plugins
Save the Gemfile, and run
$ bundle install
to install all the dependencies for the Github Pages Gem. - Make a Jekyll template site in a temp folder in your local repo and move its contents out into the main folder and then delete it:
$ bundle exec jekyll new temp $ cp -r temp/. . $ rm -rf temp
Now all the generated jekyll files should be in your local repo.
- Open the Gemfile again in a text editor and comment out the line with Jekyll version with
#
, so it looks like this:# gem "jekyll", "~> 3.8.5"
And then uncomment the line with Github Pages Gem, by deleting the
#
from the front of the line, so it looks like this:gem "github-pages", group: :jekyll_plugins
Personalization
- Edit the
_config.yml
with the appropriate title, description, email, url, etc.:title: My blog ... url: "https://username.github.io"
- Now run your Jekyll site locally in your browser:
$ bundle exec jekyll serve
Preview your site locally at
localhost:4000
- Enter the _posts folder, create a file with the naming scheme YYYY-MM-DD-title-with-dashes.markdown, and edit it in a text editor:
$ cd _posts $ nano 2019-07-26-first-post.markdown
Now, we write a simple markdown blog post, as shown:
--- layout: post title: "First Post" date: 2019-07-26 01:00:00 --- Markdown is *cool* 8-)
Save the file and refresh
localhost:4000
to see your new post appearing on the homepage! - Add all your changes to a commit and push to Github:
$ git add . $ git commit -m "First blog commit" $ git push
Wait a few minutes and visit
username.github.io
from your web browser to see your page live!
And with that comes the end of the tutorial, have fun and blog away!