Fix black-screen render: build with pandoc template

- Convert template.html to a pandoc template ($title$/$body$)
- Update CI deploy and docs to use --template template.html
- Fix header.html title to match canonical
- Ignore generated index.html (regenerated by CI)
- Update AGENTS.md build commands and file structure

.gitea/README.md

@@ -5,5 +5,5 @@ This site is a silly basic html css webpage
 Uses pandoc to generate the page.
 
 ```
-pandoc index.md -s -o index.html --css styles.css
+pandoc index.md -s -o index.html --template template.html
 ```

.gitea/workflows/deploy.yml

@@ -15,7 +15,7 @@ jobs:
         run: apt-get update && apt-get install -y pandoc
 
       - name: Generate HTML
-        run: pandoc index.md -s -o index.html --css styles.css
+        run: pandoc index.md -s -o index.html --template template.html
 
       - name: Setup SSH key
         run: |

.gitignore

@@ -1 +1,4 @@
 package-lock.json
+
+# Generated by pandoc from index.md (see AGENTS.md); regenerated in CI
+index.html

AGENTS.md

@@ -13,10 +13,14 @@ This is a simple personal static website hosted at ahmza.dad. The site consists
 ### Generate HTML from Markdown
 
 ```bash
-pandoc index.md -s -o index.html --css styles.css
+pandoc index.md -s -o index.html --template template.html
 ```
 
-This single command regenerates `index.html` from the markdown source.
+This single command regenerates `index.html` from the markdown source using
+the custom `template.html` layout (header, menu, content, footer grid). Do NOT
+use the plain `--css styles.css` form without `--template`, as pandoc's default
+template omits the custom grid layout and the page will render as a near-blank
+black screen.
 
 ### Development Workflow
 
@@ -24,6 +28,14 @@ This single command regenerates `index.html` from the markdown source.
 2. Run the pandoc command above to regenerate HTML
 3. Test locally by opening `index.html` in a browser
 
+### Automated Deployment (CI)
+
+Pushing to the `main` branch triggers `.gitea/workflows/deploy.yml`, which
+installs pandoc, regenerates `index.html` from `index.md` using
+`template.html`, then copies the artifacts to the server and reloads nginx.
+Because CI regenerates `index.html`, any hand-edits to `index.html` will be
+overwritten on the next push.
+
 ### Deployment
 
 This is a static site served by nginx. The `nginx.conf` shows the configuration:
@@ -112,21 +124,31 @@ There is no error handling in this static site. If the page doesn't load:
 ```
 ahmza-dad/
 ├── index.md        # SOURCE - edit this file
-├── index.html      # GENERATED - do not edit directly
+├── index.html      # GENERATED - do not edit directly (CI regenerates on push)
+├── template.html   # Pandoc template ($title$/$body$) - the page layout
+├── header.html     # Header partial (reference snippet)
+├── nav.html        # Menu/nav partial (reference snippet)
+├── footer.html     # Footer partial (reference snippet)
 ├── styles.css      # Stylesheet
 ├── nginx.conf      # Nginx configuration
 ├── .gitignore      # Git ignore rules
 └── .gitea/
-    └── README.md   # Project notes
+    ├── README.md   # Project notes
+    └── workflows/
+        └── deploy.yml  # CI: regenerate HTML + deploy on push to main
 ```
 
+Note: `header.html`, `nav.html`, and `footer.html` are standalone reference
+snippets. The actual page layout lives in `template.html`, which is what
+pandoc uses to build `index.html`.
+
 ## Common Tasks
 
 ### Adding a new page
 
 1. Create new markdown file (e.g., `about.md`)
 2. Add front matter with title
-3. Run: `pandoc about.md -s -o about.html --css styles.css`
+3. Run: `pandoc about.md -s -o about.html --template template.html`
 4. Add to nginx.conf or link from existing pages
 
 ### Adding images

header.html

@@ -1,3 +1,3 @@
 <div class="header">
-  <h1>I want to be a dad</h1>
+  <h1>I want to be a dad!</h1>
 </div>

index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>I want to be a dad!</title>
-  <link rel="stylesheet" href="styles.css" />
-</head>
-
-<body>
-  <div class="grid-container">
-
-    <div class="content">
-      <p>Hello,</p>
-      <p>If you are reading this then I guess you would like to know why.</p>
-      <p>Well thats reserved information. try again next time.</p>
-    </div>
-
-  </div>
-</body>
-
-</html>

template.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <meta name="generator" content="pandoc" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <title>I want to be a dad!</title>
+  <title>$title$</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 
@@ -13,7 +13,7 @@
   <div class="grid-container">
 
     <div class="header">
-      <h1>I want to be a dad!</h1>
+      <h1>$title$</h1>
     </div>
 
     <div class="menu">
@@ -24,9 +24,7 @@
     </div>
 
     <div class="content">
-      <p>Hello,</p>
+      $body$
-      <p>If you are reading this then I guess you would like to know why.</p>
-      <p>Well thats reserved information. try again next time.</p>
     </div>
 
     <div class="footer">