How to create github webpage

Creating a GitHub webpage is basically using GitHub Pages, which lets you host a static site for free. I’ll walk you through the simplest way first, then a slightly more advanced option.

Option 1 — Quick setup (no coding needed)

Create a repository — Go to GitHub, click New repository and name it:

yourusername.github.io

(replace yourusername with your GitHub username)

Add an index file — Create a file called index.html and paste something simple:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello 👋</h1>
  <p>This is my GitHub Pages site!</p>
</body>
</html>

Commit the file.

Enable GitHub Pages — Go to Settings → Pages, under Source select: Branch: main, Folder: / (root), then Save.
Access your site — after ~30 seconds to 2 minutes, your site will be live at:

https://yourusername.github.io

Option 2 — Use Markdown (easier for docs/blogs)

Instead of HTML, you can use Markdown with Jekyll (built-in). Create index.md:

### My Website

Welcome to my GitHub page!

- 🚀 Projects
- 📄 Notes
- 🧠 Ideas

GitHub automatically converts it into a styled site.

🎨 Optional: In Settings → Pages → Theme, you can pick a ready-made design without coding.

🔧 Pro tips:

Use folders like /projects to organize pages
Add a README.md for repo info
Use a custom domain later if you want (like mydomain.com)

🚀 Easiest way (no cloning templates manually)

1. Create your repo

yourusername.github.io

2. Add a config file

Create _config.yml and paste ONE of these:

# Option A (simple clean)
theme: minima

# Option B (nicer look)
theme: jekyll-theme-cayman

3. Create homepage `index.md`

# 👋 Welcome

I'm running a homelab with Docker.

## 🔧 Projects
- Monitoring stack (Grafana + Loki)
- Home Assistant automations

## 📄 Docs
- Setup guides
- Notes

4. Enable Pages

Settings → Pages → Source: main branch. Done.

📁 File structure

Create these files in your repo:

/_config.yml
/index.md
/_layouts/default.html
/_includes/nav.html
/assets/style.css
/_posts/

⚙️ 1. Config file

_config.yml

title: "My Homelab"
description: "Docker, Monitoring, and Projects"
markdown: kramdown

excerpt_separator: "<!--more-->"

🧱 2. Layout (main template)

_layouts/default.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PAGE_TITLE - SITE_TITLE</title>
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body>

  {% include nav.html %}

  <main class="container">
    {{ content }}
  </main>

</body>
</html>

Note: Replace PAGE_TITLE and SITE_TITLE with the actual Liquid variables in your real file: GitHub Webpage and Freaky's Homelab

_includes/nav.html

<nav class="nav">
  <div class="nav-container">
    <span class="logo">⚡ MyLab</span>
    <ul>
      <li><a href="/">Home</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>

🎨 4. Dark mode styling

/assets/style.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
}

/* NAVBAR */
.nav {
  background: #161b22;
  padding: 10px 0;
  border-bottom: 1px solid #30363d;
}

.nav-container {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav a {
  text-decoration: none;
  color: #c9d1d9;
  transition: 0.2s;
}

.nav a:hover {
  color: #58a6ff;
}

.logo {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0ae440 !important;
  letter-spacing: 0.5px;
}

/* CONTENT */
.container {
  width: 90%;
  margin: 40px auto;
}

h1 {
  color: #58a6ff;
}

.card {
  background: #161b22;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  border: 1px solid #30363d;
}

.card a {
  color: #58a6ff;
  text-decoration: none;
}

.card a:hover {
  text-decoration: underline;
}

.reading-time {
  color: #8b949e;
  font-size: 0.9em;
  margin-bottom: 20px;
}

.post-date {
  color: #8b949e;
  font-size: 0.9em;
}

🏠 5. Homepage

index.md

---
layout: default
title: Home
---

# 👋 Welcome to My Homelab

I run a self-hosted environment focused on automation, monitoring, and privacy.

<div class="card">
<h2>🚀 Projects</h2>
<ul>
  <li>Docker stack (Grafana, Loki, Uptime Kuma)</li>
  <li>Home Assistant automations</li>
</ul>
</div>

<div class="card">
<h2>📄 Documentation</h2>
<ul>
  <li>Setup guides</li>
  <li>Troubleshooting notes</li>
</ul>
</div>

🚀 6. Enable GitHub Pages

Go to Settings → Pages → Source: main branch.

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

FOR_LOOP_HERE

> **Note:** In your actual `blog.md` file, replace `FOR_LOOP_HERE` with the real Liquid loop:
> 
>   <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 &amp; 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 &amp; 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>
> 
> ```

---

## `/_posts`

Create files in this format: `yyyy-mm-dd-description.md`

Each file should start with:

```markdown
---
layout: post
title: "Your Title"
---

# Header of your post

Your text here in md format.

Add  where you want the excerpt to cut off on the blog listing page.

/_includes/nav.html

<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>

Add it to Posts only

/_layouts/post.html

layout: default
---

PAGE_TITLE
POST_DATE

READING_TIME_HERE

PAGE_CONTENT

Note: In your actual post.html file use the real Liquid variables:

GitHub Webpage inside an <h1> tag
`` inside <p class="post-date">
The reading time assign block
`<h1 id="turning-a-raspberry-pi-into-a-sleek-home-assistant-kiosk">Turning a Raspberry Pi Into a Sleek Home Assistant Kiosk</h1>

Ever wanted a dedicated touchscreen on the wall to control your smart home?

A Raspberry Pi combined with a touchscreen makes a great Home Assistant wall panel. With a little configuration, the Pi can boot automatically, launch directly into Home Assistant, hide the mouse cursor, and stay running as a dedicated touchscreen dashboard.

The goal is simple:

Power on → Raspberry Pi boots → Chromium launches → Home Assistant appears in full-screen kiosk mode.

No keyboard, no mouse, and no desktop to interact with.

1. Flash the Operating System

Start by installing Raspberry Pi OS with Desktop onto the Raspberry Pi’s SD card.

Using the Raspberry Pi Imager makes this part straightforward.

Once the Pi boots, configure it for:

Desktop environment
Automatic login
Correct touchscreen/display settings
Network connectivity

The important part is enabling Desktop Autologin so the Raspberry Pi can start the graphical environment without requiring someone to log in manually.

After the initial setup, reboot the Pi and make sure the desktop loads automatically.

2. Install the Required Software

The kiosk doesn’t need much software.

The main components are:

Chromium

Chromium is responsible for displaying the Home Assistant dashboard.

Instead of using the browser like a normal desktop application, it will eventually launch directly in Kiosk Mode.

Unclutter

Unclutter hides the mouse cursor after a short period of inactivity.

This is especially useful for a wall-mounted touchscreen where you don’t want a mouse pointer sitting over your dashboard.

3. Create the Kiosk Startup Script

The next step is creating a small startup script that handles the kiosk launch.

The script has three main jobs:

Prevent the display from going to sleep.
Hide the mouse cursor.
Launch Chromium in full-screen kiosk mode.

The browser is configured to open directly to the Home Assistant dashboard.

For example, instead of starting on a normal browser homepage, the Raspberry Pi goes straight to your Home Assistant instance.

The result:

Raspberry Pi Desktop → Kiosk Script → Chromium → Home Assistant

No desktop interaction is required.

4. Start the Kiosk Automatically

A kiosk isn’t very useful if you have to manually start it every time the Raspberry Pi reboots.

To solve this, create a systemd user service that starts the kiosk script when the graphical desktop session becomes available.

The service can also be configured to restart automatically if Chromium unexpectedly closes.

This gives the kiosk a simple recovery mechanism:

Power failure → Raspberry Pi reboots → Desktop loads → Kiosk starts → Home Assistant appears

This makes the setup much more suitable for a permanent wall-mounted installation.

5. Configure Home Assistant for Kiosk Mode

The Raspberry Pi can already display Home Assistant in full screen, but the Home Assistant interface itself can still contain navigation elements.

For a cleaner wall-panel experience, install Kiosk Mode through HACS.

This can remove elements such as:

Sidebar
Header
Navigation controls
Other unnecessary interface elements

The result is a much cleaner dashboard designed specifically for a dedicated touchscreen.

Instead of looking like a website running inside a browser, it starts to feel more like a purpose-built smart-home control panel.

6. Design the Touchscreen Dashboard

With the kiosk running, the final step is designing the Home Assistant dashboard.

For a wall-mounted display, keep things simple.

Large buttons and cards work much better than tiny controls.

Some useful sections could include:

💡 Lights
🌡️ Temperature
🚪 Doors
🔒 Security
🎵 Music
🌤️ Weather
⚡ Energy
🏠 Home status

The goal isn’t to put every Home Assistant entity on the screen.

The goal is to make the most important controls available with a quick tap.

7. The Final Result

After everything is configured, the Raspberry Pi becomes a dedicated Home Assistant wall panel.

There is no need to manually open a browser or navigate to Home Assistant.

Simply turn it on.

Boot → Auto Login → Kiosk → Home Assistant

And that’s it.

The Raspberry Pi is now a permanent touchscreen interface for the smart home.

Final Thoughts

This is one of those homelab projects that doesn’t require a huge amount of hardware or software but produces a really nice result.

A Raspberry Pi, touchscreen, and a few lightweight configuration changes can turn into a polished-looking Home Assistant control panel.

It also has the advantage of being easy to recover. If the Pi loses power or needs to reboot, the kiosk can automatically come back online without requiring manual intervention.

For a smart home, that’s exactly what you want.

Power it on and forget about it.

Project Overview

Hardware:

Raspberry Pi
Raspberry Pi touchscreen
MicroSD card
Power supply

Software:

Raspberry Pi OS with Desktop
Chromium
Unclutter
Home Assistant
HACS
Kiosk Mode

The end goal:

🖥️ Raspberry Pi + 📱 Touchscreen → 🏠 Home Assistant Kiosk

A simple, dedicated, and always-ready smart-home dashboard.

Now change your layout in your posts from layout: default to layout: post.

How to create github webpage

Option 1 — Quick setup (no coding needed)

Option 2 — Use Markdown (easier for docs/blogs)

🚀 Easiest way (no cloning templates manually)

1. Create your repo

2. Add a config file

3. Create homepage `index.md`

4. Enable Pages

📁 File structure

⚙️ 1. Config file

🧱 2. Layout (main template)

🧭 3. Navigation bar

🎨 4. Dark mode styling

🏠 5. Homepage

🚀 6. Enable GitHub Pages

Create file for Projects

Create file for Docs

Create file for About

Create file for Blog

Update Navigation

Add it to Posts only

1. Flash the Operating System

2. Install the Required Software

Chromium

Unclutter

3. Create the Kiosk Startup Script

4. Start the Kiosk Automatically

5. Configure Home Assistant for Kiosk Mode

6. Design the Touchscreen Dashboard

7. The Final Result

Final Thoughts

Project Overview

A simple, dedicated, and always-ready smart-home dashboard.

How to create github webpage

Option 1 — Quick setup (no coding needed)

Option 2 — Use Markdown (easier for docs/blogs)

🚀 Easiest way (no cloning templates manually)

1. Create your repo

2. Add a config file

3. Create homepage index.md

4. Enable Pages

📁 File structure

⚙️ 1. Config file

🧱 2. Layout (main template)

🧭 3. Navigation bar

🎨 4. Dark mode styling

🏠 5. Homepage

🚀 6. Enable GitHub Pages

Create file for Projects

Create file for Docs

Create file for About

Create file for Blog

Update Navigation

Add it to Posts only

1. Flash the Operating System

2. Install the Required Software

Chromium

Unclutter

3. Create the Kiosk Startup Script

4. Start the Kiosk Automatically

5. Configure Home Assistant for Kiosk Mode

6. Design the Touchscreen Dashboard

7. The Final Result

Final Thoughts

Project Overview

A simple, dedicated, and always-ready smart-home dashboard.

3. Create homepage `index.md`