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.
Open the Gemfile and include the following line at the top of the file
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:
- public_suffix which
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
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:
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
Adding navigation to jekyll, should be a new post here
new root folder called '_includes/' with file called 'navigation
mkdir _includes && cd _includes
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
Include the following
This lets you iterate over each link to apply active styles to our navigation. Go back to your navigation file and add the following
Date formatting in Jekyll