TTT
TTT Support Portal
Managed IT Services & Infrastructure
Active Clients: Please sign in to your corporate account to submit tickets, manage requests, or connect with your dedicated engineer.

How to Build, Host, and Deploy Your First HTML Website

How to Build, Host, and Deploy Your First HTML Website

Follow this step-by-step guide to generate, preview, edit, and publish your lightweight HTML website using Gemini AI, GitHub Pages, and your own custom domain name.


Phase 1: Generating & Previewing Your Code

Step 1: Generate HTML Code with AI

  1. Find an example website you like for layout inspiration.
  2. Open Gemini AI and submit a prompt like this:


    "I want to create a lightweight, fast-loading HTML landing page inspired by [Paste URL or describe layout]. Include a header, hero section, features list, image placeholders, contact form, and footer. Output everything in a single, self-contained HTML file with embedded CSS styling."

  3. Copy the generated code block from Gemini.

Step 2: Create a Local Preview File

  1. Open Notepad (Windows) or TextEdit (Mac, set to Plain Text mode via Format -> Make Plain Text).
  2. Paste the code generated by Gemini into the editor.
  3. Save the file as: index.html


    • Note for Windows: In Notepad, change "Save as type" to All Files (.) so it does not save as index.html.txt.
  4. Double-click index.html to open and view the live preview in your web browser.

Phase 2: Adding Images & Local Files

Step 3: Organize Your Folder

  1. Create a folder on your computer named my-website.
  2. Move index.html into this folder.
  3. Place all custom images (logos, banners) into this same folder.
  4. Keep image filenames short and lowercase using hyphens (e.g., logo.png, hero-banner.jpg).

Step 4: Link Images in Your Code

In index.html, locate the tags and update the src attribute to match your exact file name:


HTML

Hero Banner

Phase 3: Publishing Free on GitHub Pages
Step 5: Set Up a GitHub Repository
  1. Go to GitHub.com and log in or create a free account.
  2. Click the + icon in the top right -> New repository.
  3. Name your repository (e.g., my-landing-page).
  4. Set the visibility to Public.
  5. Check Add a README file, then click Create repository.
Step 6: Upload Your Files
  1. Inside your repository, click Add file -> Upload files.
  2. Drag and drop index.html and all your image files into the upload zone.
  3. Scroll down and click Commit changes.
Step 7: Turn On GitHub Pages
  1. Go to Settings (top tab) -> Pages (left sidebar menu).
  2. Under Build and deployment -> Branch, change None to main (or master).
  3. Click Save.
  4. Wait 1–2 minutes. GitHub will display your live URL (e.g., [https://yourusername.github.io/my-landing-page](https://yourusername.github.io/my-landing-page)).
Phase 4: Editing Code & Making Safe Backups
CRITICAL RULE: Before making major code changes, open index.html, copy the entire code block, and save it in Notepad as a local backup file (e.g., backup-index-date.html). If an edit breaks your site, you can restore your backup instantly.
Making Direct Edits in GitHub
  1. Open index.html inside your GitHub repository.
  2. Click the Pencil icon (Edit this file).
  3. Modify text or styling directly in the editor.

    • Tip: If you want AI assistance, copy the code back to Gemini AI, request your changes, and paste the updated code back into GitHub.
  4. Scroll down and click Commit changes. Your live site will update automatically in 1–2 minutes.
Phase 5: Connecting a Custom Domain
Step 8: Configure Custom Domain in GitHub
  1. In your repository, go to Settings -> Pages.
  2. Scroll to Custom domain, enter your domain (e.g., [www.yourdomain.com](https://www.yourdomain.com)), and click Save.
  3. Check the box for Enforce HTTPS.
Step 9: Update Your Domain DNS Settings
Log in to your domain registrar (GoDaddy, Namecheap, Cloudflare) and add these records in DNS Management:

Apex Domain (yourdomain.com) — Four A Records:
  • Host / Name: @ | IP Address: 185.199.108.153
  • Host / Name: @ | IP Address: 185.199.109.153
  • Host / Name: @ | IP Address: 185.199.110.153
  • Host / Name: @ | IP Address: 185.199.111.153
Subdomain ([www.yourdomain.com](https://www.yourdomain.com)) — CNAME Record:
  • Host / Name: www | Target / Value: yourusername.github.io
(DNS updates take anywhere from 15 minutes to 24 hours to propagate full network-wide).
Back to Home

Didn't find an answer?

Whether you have questions, need assistance, or want guidance on using our services, our support team is here to help.

Recent Alerts

Tweets