Converting a Raw HTML site to a static Jekyll Site

23 Jul 2019

Make a Gemfile in the root level of your existing websites project foder

UNFINISHED: I'm literally just scribbling what I'm doing as I'm doing it. Afterwards, I go back and clean up code snippets and explanations. It usually takes me a week or so to fully write and edit a post. This is the in-progress 'raw' version.

touch Gemfile

Open the Gemfile and include the following line at the top of the file

gem "Jekyll"

Install jekyll and all of it's dependencies by running the following command:


The bundle command does this thing...

Researching installed thingies

The bundle command installs 26 gems:

Installing this also added a Gemfile.lock which...

Shows gem dependencies. Idended blocks are dependent on non-indented

Check website displays on jekyll server

bundle exec jekyll serve

Jekyll creates a _site folder, add that to your gitignore.

NEW POST (but show HTML code here as part as tutorial) on writing a HTML boilerplate code and using it as a Jekyll template

Explain liquid templating and content slot

I want all of my pages and posts to have a doctype HTML boilerplate, but dont want to write it out myself every time I write a new post/page.

mkdir _layouts && cd _layouts touch default.html

what does the layout folder do?

Why is there an underscore prefixing the folder name?

Why do we call the file 'default', can we call it something else?

Boilerplate code HTML

meta tags including: charset, author, description, image and description cards for facebook and twitter, a favicon, featured img, keywords (will also be used for filtering posts by tag name).

MDN documentation for HTML meta tags

Open your index.html file and delete everything in it that isn't pure content.

At the top of the file, you can add your boilerplate using Jekylls built in liquid templating system, include the following:

Including boilerplate layout in home page
    title: Your page title
    description: Your page description
    keywords: Keywords/tags for your page

Create an About page in the root and include a brief paragraph explaining who you are. Include the layout and page information as front matter as you did for the index file

Jekyll about page example
  layout: default
  title: About
  description: About Becca

This page tells you a little about me

Adding navigation to jekyll, should be a new post here

new root folder called '_includes/' with file called 'navigation

mkdir _includes && cd _includes touch navigation.html
simple jekyll navbar

To include navigation in your file, add the following to wherever you want yours to be in your default file. I write this as the first line inside the body

Create a data directory with a file called navigation.yml

mkdir _data/navigation.yml

Include the following

Navigation data file
    - name: Home
      link: /
    - name: About
      link: /about

This lets you iterate over each link to apply active styles to our navigation. Go back to your navigation file and add the following

Add active style to navigation

Date formatting in Jekyll