If it's not one thing, I must admit that building a web page is hard. It is even harder to build a website. With some basic tricks that I have learned along the way, I want to share with you a simple way to build your own website.

The 1st thing you need is a structure for your site, and then you need to start building web pages. I suggest you hold off on designing the website for now. Just get a simple one up and running. Then try to manipulate it to meet your needs. They say the hardest thing about writing, painting, or any creative thought is getting the first line or stroke on the page. Then change it to be your design. That is how we are going to start. Don't take the lazy way out and pay for a site developer. You will never own that design. They will have their hooks in you forever in modifications and maintenance.

Try this quick solution first. If you don’t like what you have, you lost.

Lets set up our repository first. Open up VS Code (reference the VS Code procedure) and open the repository you created in the DNS procedure. You should see the readme that was created when you completed these.

Now, on your local machine, when you connect to GitHub Desktop it copied some files over to your local machine. Locate that path by looking in GitHub Desktop

Right-click the repository on the top left of your screen and select Show in explorer.

Go up 1 directory from there and create a folder called tools.

My folder structure looks like this:

C:\Users\me\Documents\Proxmox\WebDesign.

And I created a folder there called tools. Notice that there are no spaces in this complete path. It just makes life easier

Create Initial Files.

Creating your tools directory

As an example:

My GitHub repository is mounted under

C:\Users\barne\Documents\Proxmox\WebDesign.

In this directory is my repository called smart-home-edge-systems/ which is mounted via GitHub Desktop to my repository. This was done in the home-lab-dns-procedure

In order to start building your website we have created a set of tools that will help you set up and maintain your site.

Download these tools via the WebTools.zip file

Uncompress this file into a folder just above your repository. I placed the tools folder from the zip file under

Code 1: Web Tools directory structure

This same directory is where my GitHub repository is located.

We will need to make a few changes to these files as follows:

In the setup_site file: update the entry for: set "TARGET_DIR= with the exact location of your GitHub repository

The entry called: set "CATEGORIES= contains a list of subpages for your website. You can leave these for now or change them in this file for your own design. You can always rename, copy or delete these later.

On a windows machine right click on the box on the bottom (looks like four squares) and select terminal. This will open up a terminal window. Type in:

cd [path to your WebTools directory] and press enter

Your prompt will look something like this

C:\Users\me\Documents\ Proxmox\WebDesign >

If you now type:

dir and press enter.

You will see your repository, a directory called tools, and a script called setup.bat.

Enter:

setup_site.bat and press enter

The script will execute and build your web directory structure.

When it finishes, it will open up VS Code so that you can view your newly create website.

Now that we have all of that, let me explain a few things that you just did.

Code 2: New WebTools directory structure

In VS Code you can browse around and see various things. Most of these files are empty at this time and we can help you get started from this point. None of this is actually in your repository yet so if you want you can delete all of this and rerun the script as you want. Once you are happy with what is on your disk you will need to publish it.

Publish Your New Web Pages

In order to publish all of this to GitHub you will need to open up GitHub Desktop.

When you open GitHub Desktop the first thing you will see are the upcoming changes that are pending. In the middle of the left column you will see a block with a Round Circle beside it. It requires an entry in this block. Enter something like "Create New Web Site". You can additionally add in a detailed description in the description field if you want or optionally leave it blank. Select the Blue Commit to main box.

When you do that you will get a new window that is asking you to Push Origin. Select that blue button as well.

Remember this process because every time you want to push your changes you will want to run these steps.

Verify the push

In order to verify the push was successful you will need to perform the following:

In the top Left corner of GitHub Desktop you will see your repository name. Right click on it and select View on GitHub. A window will open up in your blowser. Select the Actions menu and you will see your workflows. If ther eis a green circle with a checkbox next to your workflow run the push was successful.

If it is a red circle with an x in it you will need to clear it.

If you select the 3 dots on the far right next to your failed entry and select view workflow file.

In this window on the top right you will se a Re-run jobs button. Select and Select Re-run Failed jobs.

Your push should run again.

Finishing up the Initial Web Site Build

At this point we have a structure but no actual content. Lets fix that, Here is a basic view of what we are going to do.

Your main page structure will look like this once we have completed the following steps:

Your intermediate page will look like this:

And your lower level (main content) web pages will look like this

And all of this can be changed or modified any way you want. We will show you how to do that and it's fairly easy to modify your new website structure.

Lets look at your website in VS Code

If you want to use VS Code Continue to populate your web pages you would follow this procedure - BUT DON'T DO THIS - IT IS THE HARD WAY. This is because VS Code Continue can't access the file system directly. I just wanted to show you what the easiest way to do things is.

Code 3: New WebTools directory structure

Since we have completed step one of that procedure by running the script earlier we are almost there. Let me show you an easier way to build your web site.

Lets Build your Web Pages

I just used the Continue chat box and told it what I wanted. It kept returning the block of code needed to give to CoPilot to build the website. Here is what I came up with threw a few iterations.

Code 4: Final CoPilot Command

• To execute this command I told Continue Chat the basic color scheme I wanted.

• In Iteration 1 I told it to build the foundation root files needed to run the website.

• In Iteration 2 I told it to build the foundation root page.

• In Iteration 3 I told it to build the first layer pages.

• In the final Iteration 4 I told it to build the second layer pages.

Executing the CoPilot Command

Step 1: Generate the Website with Copilot Edits

Open VS Code.

Look at the bottom-right column and locate the input box labeled "Describe what to build".

Paste the command from your Final CoPilot Command box into that cell and press Enter.

Once the generation is complete, a prompt will appear asking you to review the changes. Click Accept.

Result: You now have a functional base website.

Step 2: Preview Your Website Locally

1. Navigate to the Explorer window in VS Code (the icon in the top-left corner that looks like a stack of documents).

2. Locate and select the root-level index.html file to open it in the editor.

3. Look at the bottom-right status bar of VS Code and click the Go Live button.

4. Result: This will launch your default web browser and display your new starting webpage.

Step 3: Making Further Iterative Changes

To continue modifying your site, you can use a hybrid workflow between Continue (to formulate complex prompts) and Copilot (to execute the code):

1. Draft in Continue: Use the Continue extension to build up and refine the specific changes you want to make. Ask Continue: "Tell me what I need to tell Copilot to make all of these changes."

2. Execute in Copilot: Take the optimized prompt response provided by Continue, copy it, paste it directly into the Copilot Chat box, and execute it.

3. (Alternative): You can also edit files directly or prompt Copilot directly if the change is straightforward.

Step 4: Save and Publish Your Progress

1. Once you are satisfied with the look and functionality of your website, switch over to the GitHub Desktop application.

2. Commit your new files and click Push to sync your changes to your remote repository.

Creating your sub pages using Microsoft Word.

Many of us have created an MS Word doc or at least we know how to use Word to edit pages. Let's start with a simple Word document with some basic context.

The basic tricks with word. Create a template.

Open up the word document located in your WebDesign\tools folder.

Technical Documentation Workflow: Word to HTML via Pandoc

This guide outlines the workflow for converting Microsoft Word documentation (.docx) into clean, standalone HTML pages using Pandoc and PowerShell, complete with automated Table of Contents (TOC) generation and a structured local-to-production deployment model.

Part 1: Preparing Your Microsoft Word Document

Before running any scripts, ensure your master Word document is properly formatted. Proper formatting in Word minimizes manual HTML or Markdown editing later.

1. Heading Hierarchy: * Set the main document title and major section headers to Heading 1.

   • Set the first level of sub-sections to Heading 2.

   • Set the second level of sub-sections to Heading 3.

   • Set captions, sub-sections, or minor labels to Heading 4.

2. Elements: Verify that all Word tables are clean and the built-in Table of Contents is fully updated.

3. File Naming: Ensure the file names for your .docx and target .html files are entirely lowercase. Use dashes (-) instead of spaces for readability (e.g., my-home-lab-guide.docx).

4. Clean File Type: If working from a macro-enabled document (.docm), save it as a clean .docx file to strip out unnecessary background metadata.

💡 Pro-Tip: If you see rendering issues in the final HTML output, it is usually faster to update your master Word doc and rerun the script than it is to manually hack the HTML code.

Open Visual Studio Code. Your layout template (template.html) should already be created and present in your working directory.

Keep your local project folder organized on your computer using the following layout during development:

Plaintext

📂 home-lab-project/ (Local working directory)

├── 📄 input.docx (Your master Word file)

├── 📄 template.html (The layout wrapper file used by Pandoc)

├── 📄 styles.css (Your development stylesheet)

├── 📄 output.md (Intermediate Markdown file; generated by Step 2)

├── 📂 images/ (Automatically extracted figures and images)

├── 📂 web-images/ (Backup/source folder for your MS Word image sources)

├── 📂 web-snippets/ (Text source fragments)

└── 📂 web-scripts/ (Custom scripts and code snippets)

Open PowerShell and navigate to your project directory:

PowerShell

cd "C:\Users\me\Documents\Proxmox\Published Documents\home-lab-project"

The automation workflow executes two major Pandoc operations behind the scenes:

Command 1: Convert Word to Markdown

This extracts your media and builds a clean Markdown file for verification.

PowerShell

pandoc input.docx -f docx -t markdown --wrap=none --extract-media=./images -o output.md

(Optional: Open output.md in VS Code to review code blocks, tweak text layout, or verify sections.)

Command 2: Compile Markdown and Template into the Final Web Page

Once the source content is ready, run this command to compile everything into your final, styled HTML production file:

PowerShell

pandoc output.md -f markdown -t html5 --template=template.html --toc --toc-depth=3 --standalone --id-prefix="nav-" -o index.html

Breaking Down the Magic Parameters:

• --template=template.html: Instructs Pandoc to use your custom wrapper layout.

• --toc: Automatically scans your Markdown headings (#, ##, ###) to generate a fully linked Table of Contents, placing it exactly where the $toc$ variable sits in your template.

• --toc-depth=3: Restricts the automated TOC depth to H1, H2, and H3 headings.

• --id-prefix="nav-": Prefixes generated IDs to avoid styling conflicts with global CSS files.

What Goes on the Web Server

Once Pandoc generates your local assets, the production ready files are synchronized to your working repository path (defined within your deployment script). Local files like template.html and output.md stay safely on your local hard drive.

A typical target web directory structure looks like this:

Plaintext

📂 public_html/ (Target deployment folder defined in script)

├── 📄 index.html (The final generated page, renamed to match

production)

└── 📂 images/ (Extracted figures and graphics referenced by

the page)

How to insert Citations

Using Gemini to create a ChatGPT query to rebuild the citations:

ChatGPT can search the web and generate citations for you, but it cannot automatically inject them back into your local Microsoft Word file. Because it functions within a chat window rather than a document-editing interface, you cannot simply upload your draft and expect a fully synced, clickable .docx file in return.

If you choose to use ChatGPT to rebuild your sources, you must be aware of its operational rules and the manual steps required to finalize your document:

1. How ChatGPT Handles Real Searches When you explicitly instruct ChatGPT to locate real evidence (e.g., "Search the web and find real academic sources that support the claims in this text"), utilizes its integrated search feature. It will crawl live web indices, find matching papers or articles, and provide an answer complete with inline web hyperlinks back to the original URLs.

2. The Danger of "Hallucinated" Citations If you ask ChatGPT to find sources without forcing a live web search—or if you ask it to blindly guess what Gemini's deleted {1} entries meant—it will resort to its standard predictive text algorithm. This frequently causes the AI to invent entirely fake titles, non-existent authors, and broken URLs that look perfectly realistic but do not exist in the real world. Always verify that any citation it gives you has a clickable hyperlink attached to it.

Step-by-Step Workflow to Rebuild Your Document

To safely use ChatGPT to fix your draft and port the results cleanly into Microsoft Word, follow this system:

Step 1: Force ChatGPT to Search via Context Blocs

Do not paste your entire paper at once, as the AI may skip sentences to stay under its output limit. Instead, paste your document one page or section at a time using a strict prompt:"

I have pasted a section of text below. Actively search the web to find real, verifiable peer-reviewed journal articles or official legal authorities that support the factual claims made in this text. Insert the in-text citations using [Style Name, e.g., APA 7th] format, and generate a complete reference list at the bottom with live, clickable web links. Do not alter my original wording."

Step 2: Push the Discovered Sources into Zotero

When ChatGPT provides the verified web links for your arguments, open them in your web browser. Click your browser's Zotero Connector extension button to instantly crawl the metadata and save the clean, real records into your permanent Zotero desktop library.

Step 3: Insert the Live Links into Microsoft Word

Copy the updated text paragraphs from ChatGPT and paste them into your Microsoft Word document.

Go to the spot where ChatGPT placed a text citation. Delete it.

Click on the Zotero tab in your Word ribbon and select Add/Edit Citation.

Type the author's name from the source you saved during

Step 2, and hit Enter.

Once your document is rebuilt, click Add/Edit Bibliography at the end of the page to generate your formal, perfectly formatted reference list.

If you are ready to fix your text, let me know:

Is your text primarily composed of scientific/medical claims, or legal arguments and statutes?

Would you like an advanced prompt template designed to strictly block ChatGPT from hallucinating fake books or articles?

I don't want the citations embedded in my doc - just a list at the end. If you only want a flat list of references at the very end of your document without any numbered brackets or author-date parentheses embedded inside your paragraphs, ChatGPT can generate this list for you instantly.

Since you do not need to link text to citations, you can bypass complex software like Zotero completely.

Step 1: Use a "No In-Text" ChatGPT Prompt

To ensure ChatGPT searches the live web for real sources and builds only a bibliography, paste your document section by section using this exact prompt:

Prompt:"I have pasted a section of my document below. Actively search the web to find real, verified [academic journal articles / legal authorities / news sources] that back up the factual claims made in this text. Do not put any bracketed numbers or parenthetical citations inside my text. Instead, simply analyze the content and generate a clean, alphabetical list of real references at the very bottom. Include live, clickable web links for each source."

Step 2: Review and Copy the Output.

ChatGPT will read your text, search the web, and output a list of genuine sources.

Copy that list from the chat window.

Open your Microsoft Word document, scroll to the absolute last page, and paste the list underneath a "References" or "Bibliography" heading.

⚠️ A Warning on Plagiarism Rules

If you are submitting this document for university grading, a scientific journal, or a legal filing, please check your specific guidelines first. Most formal institutions require you to prove exactly which sentence matches which source. If you completely strip out all in-text markers, a reader or grader cannot tell where your original thoughts end and the external data begins, which can accidentally flag the document for plagiarism.

If this is for a general business report, blog post, or casual presentation, a standalone reference list at the end is perfectly acceptable and clean.

To make sure ChatGPT formats this final list exactly the way you want it, let me know:

Do you want the final list organized alphabetically by author, or grouped by topic/theme?

Is there a specific citation style format (like APA, Chicago, or Bluebook) that the final list should follow?

I want an instruction document that I will post on the web for technical procedures

For a web-based technical instruction document, a standalone resource or "Further Reading" list at the very end is the ideal choice. Technical readers prefer clean, uninterrupted procedures over academic brackets that break up the flow of text.

Because you are publishing this online, you can use ChatGPT to create a highly functional hyperlinked bibliography that boosts your document's credibility and search engine visibility.

Step 1: Use a Technical Reference Prompt

When you paste your procedures into ChatGPT, use a prompt tailored for technical documentation rather than academic writing. This forces the AI to look for authoritative sources like manufacturer manuals, official white papers, or industry standards bodies (like W3C, IEEE, or AWS Docs).

Step 2: How to Format It for the Web

Once ChatGPT generates the list, copy and paste it into Word. To make it truly web-ready, use one of these three clean formatting styles at the end of your document:

Option A: The "Direct Hyperlink" List (Most Web-Friendly) Instead of typing out a long, ugly URL, wrap the descriptive title of the resource in a live link.

Official Microsoft Learn: Troubleshooting Azure DNS Record Routing Zones

Cloudflare Documentation: Setting up Custom Email Routing and SPF Records

Option B: The "Further Reading" List

Organize the resources chronologically based on the order they appear in your technical instructions.

For prerequisites: [Prerequisites for Domain Configuration] (Link)

For main setup: [Cloudflare Email Routing Advanced Guide] (Link)

For troubleshooting: [How to Verify MX and DKIM Records via MXToolbox] (Link)

💡 Pro-Tip for Technical Docs: Check for Link Rot

Because technical documentation is updated or moved frequently by vendors (especially tech giants like Microsoft, Amazon, or Cloudflare), web links can break quickly.

Do this: Before you finalize and post your document, click every link ChatGPT gives you to ensure it loads a real, live page.

The Fix: If a specific vendor link is broken, you can ask ChatGPT: "The link for [Vendor Name] returned a 404 error. Please search the web again and find the updated URL for that specific guide."

To help structure this final list perfectly before you publish, let me know:

What specific technologies or platforms (e.g., Cloudflare, Linux, AWS, Docker) are your technical procedures covering?

Would you like the final reference list organized by the order of the steps, or by the type of technology?

To build a highly authoritative reference list for your technical guide, ChatGPT will need to pull from the official documentation hubs for each of these specific platforms.

You can use the tailored prompt below to scan your text. It forces ChatGPT to bypass generic blogs and restrict its web search to official vendor docs, ensuring your readers get trusted, primary sources.

Step 1: Copy and Use This Exact Prompt

Paste this prompt into ChatGPT along with your technical instructions:

Prompt:*" I have attached my technical procedures covering Cloudflare, Linux, Proxmox, Pi-hole, Docker, Git, Gemini, VS Code, Docker, Wyoming, NGINX, Ollama, Twingate, Home Assistant, Kamrui, Intel Core i7, and MS Word. Actively search the web to match my steps against the official documentation for these technologies. Do not use in-text citation markers. Instead, compile a clean, web-ready list at the very end titled 'References and Authoritative Resources'.Group the references by technology (e.g., Cloudflare Resources, Proxmox Resources). Each item must list the specific guide name and have the live, verified URL embedded directly into the title text. Prioritize official vendor documentation (e.g., cloudflare.com, proxmox.com, docker.com) over third-party blogs."

Step 2: What Your Final Web-Ready List Will Look Like

Once ChatGPT scans your text and searches the web, it will generate a cleanly segmented bibliography directly matching your toolkit. It will look like this:

🌐 Cloudflare Resources Cloudflare Docs: Set up Email Routing Cloudflare Docs: Post-onboarding DNS record configuration

🐧 Linux & Proxmox Resources Proxmox VE Documentation: Getting Started Ubuntu Server Guide: Network Configuration

🐳 Docker & Pi-hole Resources Docker Docs: Docker Compose Overview Pi-hole documentation: Post-Install Configuration

🛠️ Developer Tools (Git, VS Code, Gemini, MS Word, Git Documentation: Reference Manual Visual Studio Code Docs: Getting Started Google Gemini API: Developer Overview Microsoft Support: Advanced Find and Replace with Wildcards

Step 3: Paste into Word as "Keep Source Formatting

"When you copy the finished list out of ChatGPT and paste it into Microsoft Word, make sure to click the small Paste Options clipboard icon that appears next to your text and select Keep Source Formatting (K). This ensures that the live, clickable hyperlinks are preserved exactly as text anchors without reverting back to raw, ugly URLs.

Where do we go from here?

If you want to keep using this approach to create your repository then I would recommend that you go back to the section Setting up a Public Repository on Github located on the Home Lab DNS Procedure web page. At that point I would create a new repository and keep the old one just for fun. You can actually delete it later if desired.

Go ahead and create your Final Web Page - Point your Domain name to it and create away.

Henry David Thoreau: "This world is but a canvas to our imagination."

and you are the artist. Paint your masterpiece for the world to enjoy!