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.
Without going into every detail, here’s an overview and helpful references of the process.
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/
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.
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>