Tommy Gjertsen

Build A Blog With Jekyll And GitHub Pages

07 Jul 2023technical

Table Of Contents

Benefits

Limitations

Running Jekyll on Github Pages will limit website functionality to features you can build with HTML, CSS and Javascript. If you need complex functionality like server-side functions, you either need to use a different hosting service or use an external service that provides the required back-end.

Installation and configuration

Without going into every detail, here’s an overview and helpful references of the process.

Customization

Change Default Jekyll Theme

Documentation on themes + theme libraries

I replaced the whole CSS to develop my own theme.

The default permalinks in Jekyll uses the following format by default:

/:categories/:year/:month/:day/:title:output_ext

I wanted to simplify, so I added the following to _config.yaml:

permalink: /:title/

Documentation on permalinks

Display Blog Posts On Homepage

I wanted to display blog posts on the homepage, so I added a liquid post loop to the index file. You can do something like this to render every post in your _posts folder as a title link. Each post get an entry (li) in the list (ul).

<ul>

    <li><a href="/list-gdap-relationships-with-reseller-customers/">List GDAP-relationships with reseller customers using Microsoft Graph and PowerShell</a></li>

    <li><a href="/study-notes-ccsk-information-governance/">Study Notes: CCSK Information Governance</a></li>

    <li><a href="/study-notes-ccsk-iam/">Study Notes: CCSK Identity, Entitlement, and Access Management</a></li>

    <li><a href="/study-notes-cissp-security-concepts/">Study Notes: CISSP Security Concepts</a></li>

    <li><a href="/enable-gdap-auto-extend/">Enable GDAP auto-extend using Microsoft Graph and PowerShell</a></li>

    <li><a href="/hosting-jekyll-on-github-pages/">Build A Blog With Jekyll And GitHub Pages</a></li>

</ul>

You have many options to add conditions here.

Documentation on Liquid

Add Mermaid Support To Jekyll

I wanted to add support for using Mermaid charts in Markdown, I so added the following to the head of the HTML template:

<script type="text/javascript" src="https://unpkg.com/mermaid@10.2.4/dist/mermaid.min.js"></script>

Add the initializing script at bottom of the body, before the closing body tag:

<script>mermaid.initialize({startOnLoad:true});</script>

Now, Mermaid syntax gets rendered when written inside the following element:

<div class="mermaid"></div>

Documentation from Mermaid

Other Tips

Similar posts