How to Create a GitHub Webpage — Part 2: Pages, Blog & Reading Time
Creating a GitHub webpage uses GitHub Pages, which lets you host a static site for free.
📄 Create File for Projects — /projects.md
---
layout: default
title: Projects
permalink: /projects/
---
# 🚀 Projects
<div class="card">
<h2>🐳 Docker Stack</h2>
<p>My self-hosted services running in Docker:</p>
<ul>
<li>Grafana + Loki (monitoring)</li>
<li>Uptime Kuma (status page)</li>
<li>Nginx Proxy Manager</li>
</ul>
</div>
<div class="card">
<h2>🏠 Home Automation</h2>
<p>Built with Home Assistant:</p>
<ul>
<li>Door sensors & alerts</li>
<li>Energy monitoring</li>
<li>Custom automations</li>
</ul>
</div>
📄 Create File for Docs — /docs.md
---
layout: default
title: Docs
permalink: /docs/
---
# 📄 Documentation
<div class="card">
<h2>🛠 Setup Guides</h2>
<ul>
<li>Install Docker stack</li>
<li>Setup Grafana dashboards</li>
<li>Configure reverse proxy</li>
</ul>
</div>
<div class="card">
<h2>🧠 Notes</h2>
<ul>
<li>Commands & cheatsheets</li>
<li>Troubleshooting logs</li>
</ul>
</div>
📄 Create File for About — /about.md
---
layout: default
title: About
permalink: /about/
---
# 👋 About Me
I'm running a homelab focused on:
- 🐳 Docker & self-hosting
- 📊 Monitoring (Grafana, Loki)
- 🏠 Home automation
<div class="card">
<h2>🎯 Goals</h2>
<ul>
<li>Learn and experiment</li>
<li>Document everything</li>
<li>Build reliable systems</li>
</ul>
</div>
📝 Create File for Blog — /blog.md
---
layout: default
title: Blog
permalink: /blog/
---
# 📝 Blog / Knowledge Base
<div class="card">
<h2><a href="/blog/2026/10/07/HA-Kiosk-mode-blog/">Turning a Raspberry Pi Into a Sleek Home Assistant Kiosk</a></h2>
<p>October 07, 2026</p>
<p><h1 id="turning-a-raspberry-pi-into-a-sleek-home-assistant-kiosk">Turning a Raspberry Pi Into a Sleek Home Assistant Kiosk</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/09/10/nuts-sever/">Building a NUT UPS Monitoring and Shutdown System</a></h2>
<p>September 10, 2026</p>
<p><h1 id="building-a-nut-ups-monitoring-and-shutdown-system">Building a NUT UPS Monitoring and Shutdown System</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/08/07/aliases/">Building a GitHub-Based Bash Alias Library</a></h2>
<p>August 07, 2026</p>
<p><h1 id="building-a-github-based-bash-alias-library">Building a GitHub-Based Bash Alias Library</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/07/02/Technitium-cluster/">Technitium DNS Cluster</a></h2>
<p>July 02, 2026</p>
<p><h1 id="building-a-resilient-technitium-dns-cluster-zone-replication--automatic-failover">Building a Resilient Technitium DNS Cluster: Zone Replication & Automatic Failover</h1>
<p>DNS is one of those services you rarely think about—until it stops working. When your DNS server becomes unavailable, every device on your network suddenly struggles to find websites, services, and even other local machines.</p>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/06/08/discord-notification/">Discord Notification</a></h2>
<p>June 08, 2026</p>
<p><h1 id="get-discord-notifications-for-unattended-upgrades-on-linux">Get Discord Notifications for Unattended Upgrades on Linux</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/06/07/s-nail/">S-nail (Mailrc)</a></h2>
<p>June 07, 2026</p>
<p><h1 id="s-nail-a-practical-guide-to-configuring-email-from-the-linux-command-line">S-nail: A Practical Guide to Configuring Email from the Linux Command Line</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/06/06/unattended-upgrade/">Unattended Upgrades & Gmail SMTP Alerts</a></h2>
<p>June 06, 2026</p>
<p><p>Automate security patching on your server and get emailed when something actually happens — no babysitting required.</p>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/06/04/docker-install/">Docker Install</a></h2>
<p>June 04, 2026</p>
<p><hr />
<h1 id="install-docker-engine-on-debian">Install Docker Engine on Debian</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/05/17/it-tools-docker/">It Tool Docker</a></h2>
<p>May 17, 2026</p>
<p><h1 id="it-tools-the-self-hosted-swiss-army-knife-for-developers">IT-Tools: The Self-Hosted Swiss Army Knife for Developers</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/05/12/grafana/">Grafana</a></h2>
<p>May 12, 2026</p>
<p><h1 id="grafana-installation">Grafana Installation</h1>
<h2 id="simple-docker-installtion-of-grafana">Simple Docker installtion of Grafana</h2>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/05/04/bypass_modem/">How to bypass ypur ISP Modem</a></h2>
<p>May 04, 2026</p>
<p><h1 id="how-to-bypass-your-isp-modem">How to bypass your ISP Modem</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/05/01/cloudflare-tunnel-nginx-proxy/">Setting up Cloudflare with nginx Proxy Manager</a></h2>
<p>May 01, 2026</p>
<p><h1 id="cloudflare-config-for-npm">Cloudflare Config for NPM</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/30/promox-template/">Proxmox Template</a></h2>
<p>April 30, 2026</p>
<p><h1 id="️cloud-init">☁️Cloud-init</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/29/monero/">Monero</a></h2>
<p>April 29, 2026</p>
<p><h1 id="-monero">🪙 Monero</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/26/Tor-relay/">Setup a Tor Relay (Debian)</a></h2>
<p>April 26, 2026</p>
<p><h1 id="-setup-a-tor-relay">🧅 Setup a Tor Relay</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/25/github-pages-part2/">GitHub Webpage 2/2</a></h2>
<p>April 25, 2026</p>
<p><h1 id="how-to-create-a-github-webpage--part-2-pages-blog--reading-time">How to Create a GitHub Webpage — Part 2: Pages, Blog & Reading Time</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/25/github-pages-part1/">GitHub Webpage 1/2</a></h2>
<p>April 25, 2026</p>
<p><h1 id="how-to-create-a-github-webpage--part-1-the-basics">How to Create a GitHub Webpage — Part 1: The Basics</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/25/docker-list/">Docker you Must Install</a></h2>
<p>April 25, 2026</p>
<p><h1 id="-docker-list">🐋 Docker list</h1>
<hr />
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/24/ssh-keygen-guide/">SSH Keygen Guide</a></h2>
<p>April 24, 2026</p>
<p><h1 id="-ssh-keygen-guide">🔐 SSH Keygen Guide</h1>
</p>
</div>
<div class="card">
<h2><a href="/blog/2026/04/23/my-first-post/">My First Post</a></h2>
<p>April 23, 2026</p>
<p><h1 id="my-first-post">My First Post</h1>
</p>
</div>
🗂 Creating Blog Posts — /_posts/
Name your files in this format: yyyy-mm-dd-description.md
Each file should look like this:
---
layout: post
title: "Your Title"
---
# Header of your post
Your text here in Markdown format.
🧭 Update Navigation — /_includes/nav.html
Add the Blog link:
<nav class="nav">
<div class="nav-container">
<span class="logo">⚡ MyLab</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/about/">About</a></li>
</ul>
</div>
</nav>
⏱ Adding Reading Time
Option A — Add to Default Layout
In /_layouts/default.html, add this snippet where you want it to appear:
<p class="reading-time">
⏱
7 min read
</p>
Option B — Add to Posts Only (Recommended)
Create /_layouts/post.html:
---
layout: default
---
<h1>GitHub Webpage 2/2</h1>
<p class="post-date">April 25, 2026</p>
<p class="reading-time">
⏱
7 min read
</p>
{_{ content }_} remove the _ on each side of the {...}
Then update your post front matter from:
layout: default
to:
layout: post
Questions / idea? Open an issue on GitHub.