How This Got Made

Jekyll

is a static site generator. What is a static site you say? It is a pure HTML implementation of a full-fledged website. Pros: Fast, simple and excellent for non-dynamic (really?!!) content - think blogs and landing pages. Cons: Can be a bit limiting at first as you try to navigate your way through this new paradigm. Read around a bit about it; Ruby, it's markdown, site structure, plugins and themes systems. One of the new concepts is that files starting with Front Matter (YAML enclosed between lines of three dashes) will be processed with Jekyll as special files.

Netlify

is a serverless cloud provider for static websites. This static is what makes this a match made in heaven. You upload your website and they take care of the rest. Netlify offers several service tiers starting with the ever-amazing FREE tier (another reason to start with them). Netlify works by first getting your website code (either you upload it or more beautifully have them fetch it via git), building it (after you have specified what commands to use for such builds), and finally, they deploy it. Where? hence serverless; you shouldn't care. If you do, please sign up with a regular hosting provider. Depending on the tier, they handle the performance (scaling up and down), the security of the machines themselves (you website is still can be made vulnerable if you are lax enough), and have many cool features that complement their offering (forms, identity management, functions, ...etc)

What have I done

  1. Prepare your environment for the work to come: Download Ruby and Git.
  2. Following the same instructions as Jekyll's quickstart guide:
  • Download the gems for Jekyll and Bundler. Bundler may be already installed and can be skipped. (PS: Bundler is Ruby's dependency manager of sorts).
    gem install Jekyll bundler
  • Creates a new directory named whateveryourblognameis and initializes a new Jekyll site in it.
    jekyll new whateveryourblognameis
  • Change into the new directory
    cd whateveryourblognameis
  • Builds the website and launches the dev server @ localhost:4000 (by default)
    bundle exec jekyll serve
  1. Start having fun with Jekyll to make it your own. I haven't tinkered with it much yet but only done the following:
  • Updated _config.yml with my info; title, author, description and social presence handlers.
  • Updated about.markdown and index.markdown with some relevant placeholder text.
  • Added blog.markdown (made the mistake of naming it .html which caused no errors but felt strange having this single html file among the other markdown ones). This creates a new page dedicated to the blog posts listing and inserts a new link in the header for it.
  • Updated and Added the _posts content as desired. One file per post, following a specific naming convention (with the date embedded in the file name), and the Front matter containing the post metadata such as title, date and categories (the latter I am just copy-pasting for now - have no clue how it works).
  1. Create a new Github repository (public or private) and push your site directory upstream.
  2. Create a Netlify account and sign up to your tier of preference (i.e. let's be frank and say free/starter for now). The team details don't matter so pick anything sensible here.
  3. Go to Domains and add your domain to Netlify. If you don't have a domain you can skip this part but I highly recommend to get your custom domain by heading to your favourite registrar (Hover or even GoDaddy), buy it and then set it up using Netlify nameservers (found under their domains section). Skipping this part by forcing you to use a Netlify subdomain.
  4. In Netlify, under sites start the New Site from Git flow. Pick Github (other options of Gitlab and Bitbucket remain unexplored). After the initial authorization (after the first successful one, you won't be asked to reauthorize again), the list of your Github repositories will be presented for you to select which one belongs to your new website. Kindly select it, select the branch, build command and public directory. Netlify can probably detect the correct parameters, if not then:
  • Build command: jekyll build
  • Public directory: _site/
  1. Next, associate the domain with the newly created site. You can an alias for the www one as well here. Under settings, Domain management you can instruct Netlify to deploy a Let's Encrypt SSL certificate to your newly created site.
  2. Wait for the dust to settle (the build and certificate deployment to finish) and check your domain. Hopefully, it works.

PS: Wow. The wall of text. Note to self, next time use pictures or better yet memes :D

← Back to home