Getting Started with Jekyll

Build Blogs and Websites with Markdown

27 Nov 2018 - Mohamed El-Geish

Building a static website or a blog should be easy; thanks to Jekyll and GitHub Pages, this is true. GitHub allows users to host static websites for free; Jekyll, which is supported by GitHub Pages, allows creators to use Markdown syntax and templates to generate highly customizable blogs and static websites, like this one! In this post, we’ll explore how to create a simple website using Jekyll.

You may want to run Jekyll locally on your machine instead of relying solely on GitHub Pages in the cloud; here is how:

Install Ruby
Install Jekyll: gem update && gem install bundler jekyll
Create a new website: jekyll new my-website
Change directory: cd my-website
Build and serve: bundle exec jekyll build && bundle exec jekyll serve --incremental --livereload

There you have it, your website is now up and running at http://127.0.0.1:4000/ by default. We also ran Jekyll with two flags: --incremental and --livereload, which allow incremental rebuilds when files are modified, and then refresh browsers automatically to load the latest version of the website.

The sample website that you now see offers neat features like RSS feed, tags, themes, SEO, etc. You may want to know more about the config file _config.yml before changing content. If you want to change the theme, you may want to check the myriad of Jekyll themes on GitHub first, most of which you can customize fairly easily with a little bit of CSS knowledge.

Now that you’ve customized the site to your liking, you may try blogging. Adding a post using Markdown is straightforward; for detailed instructions, see the canned post at http://localhost:4000/jekyll/update/2018/11/27/welcome-to-jekyll.html. Basically, just follow the post file naming convention: ./_posts/YYYY-MM-DD-title-of-post.md. HTML files are also supported but who wants to write HTML when one can write Markdown (which supports HTML by the way). And the other Jekyll-specific step is adding the post’s metadata using Front Matter, which is a YAML block set between triple-dashed lines and placed first thing in the post’s file; here’s an example from this post’s metadata:

---
layout: post
title: Getting Started with Jekyll
subtitle: Build Blogs and Websites with Markdown
tags: [Blogging, Design, Jekyll, Liquid, Markdown, Web]
image: /assets/img/posts/web-design.jpeg
---

For embedding code in posts, please see this post about bringing your code snippets to life.

Happy blogging!