Dev Bootcamp

Using Jekyll to Generate Your Static Website

I have recently been using Github Pages to create my new personal project website. It was a good way for me to practice creating web pages from scratch with HTML, CSS, and even JavaScript. As a beginner, it was also a good way from me to practice using the terminal, git, committing, pushing, pulling, etc. I created simple index, about, contact, portfolio, and blog pages. For Dev Bootcamp, I’ve been writing 1-2 blogs a week on average and pushing it onto my GitHub Pages repository. All of these blog posts are on a separate web page following the same HTML blog post template.

There comes a point where I have too many blog posts to be able to maintain a website purely using HTML and CSS. Every time I want to make a change to the template, such as a link on the navigation menu bar or some text on the footer, I would have to go through each page and blog post and update the HTML in that page. It worked okay when I only have several web pages, but it got exponentially time-consuming as I built more and more pages.

Many websites are powered by a content management system (CMS), the most common one being WordPress, which is a great solution for creating a dynamic website. My own personal branding website is powered by WordPress. It can do just about anything you can think of. But my project website only needs to showcase my portfolio of projects and blogs. It will never need to use most of the functionality that a dynamic platform provides. WordPress would be an overkill.

Here comes Jeykll, a simple, static site generator that takes in a bunch of text and spits out a beautifully generated website. It gives me everything I need without all of the bulk that comes with a CMS platform. Jekyll allows me to easily create site-wide headers and footers without having to copy them across each and every page, which gets rid of the pain points I was describing earlier. It allows me to write content on web pages and blog posts with Textile and Markdown, so someone with no knowledge of HTML can still create a nice web pages.

Here is Jekyll’s definition on their website:

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Here are some advantages of using a static website as opposed to a dynamic website:

  • Simple – no database, no CMS, minimal
  • Fast – does not require server-side requests, so load time will be much quicker
  • Cheap – quick to develop, cheap to develop, cheap to host
  • Ease-of-Use – Since content is built with Markdown, so you can use whatever text editor you want to create and edit your web pages
  • Secure – less prone to risks, since there are no databases, CMS, PHP, etc.
  • Click here for more reasons from Site Point

Another great thing about Jeykll is that GitHub Pages is powered by Jekyll behind the scenes. Every time I push my website to GitHub Pages, it actually uses Jeykll to generate static HTML pages, so I don’t even need to do anything to make Jeykll work on GitHub. I just make the necessary changes to my Jekyll-powered website, push it to GitHub, and it automatically generates the static HTML and displays it on the web. This makes everything so easy. I can even point my domain name to my GitHub website and have fully-running website hosted for free.

The most difficult part of this process for me with the actual setting up of Jekyll on my local machine, so if you want to take Jeykll for a spin, here are some useful resources to start with:

After I got it set up, I spent quite a bit of time converting my previously hand-built HTML and CSS website into Jeykll’s simple text format. It was quite a pain, since I had a lot of pages to convert (I wish I started with Jeykll from the get go). But after the initial migration, I love it now. It gives me everything I need and nothing more. Automation where I want. Universal header and footer. Easy to change layouts. Simple pages created from plain text. Easy updates just by pushing it to GitHub; no databases, no FTP, etc.

If you’re running a simple website on WordPress and don’t take advantage of most of its features, consider using a static site generator such as Jeykll.

This blog has been initially published on

Leave a Reply

Your email address will not be published. Required fields are marked *