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:
gem update && gem install bundler jekyll
jekyll new my-website
bundle exec jekyll build && bundle exec jekyll serve --incremental --livereload
There you have it, your website is now up and running at
by default. We also ran Jekyll with two flags:
--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
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
--- 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.