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 -vThis 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.iowhereusernameis 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 Gemfilein 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_pluginsSave the Gemfile, and run
$ bundle installto 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 tempNow 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.ymlwith 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 servePreview 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.markdownNow, 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:4000to 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 pushWait a few minutes and visit
username.github.iofrom your web browser to see your page live!
And with that comes the end of the tutorial, have fun and blog away!