How-To
How to Create a Free Web Page Using GitHub Pages
This is the first of two articles in which I will demonstrate how I used AI with a vibe-coding methodology to generate code for a web page that I can host for free in the Cloud. The reason was straightforward: over the years, I have written hundreds of articles and blog posts for Virtualization & Cloud Review and other publications, but I have never had a central location for them.
In hindsight, actually, the above is the use case for this article. The actual impetus for these articles was fourfold: I wanted to see how easily and effectively it was to get a free web page up and running, become familiar with running GitHub locally, and use the Vibe coding methodology and AI to generate code. In these articles, I will show you how to do the same.
I broke this project down into the following steps: locating a site to host a static web page, creating a JSON list of my articles, and using AI to generate the web page.
Below, I will show you how I did this. Hopefully, it will help you eliminate many of the missteps and blind alleys I encountered along the way. Although I doubt that you will want to use it for the same purpose I did, I think you will find the techniques and tools I used to create my free cloud-based, AI-generated web page helpful for other projects.
A Free Site for the Web Page
The first thing I needed was a publicly available site to host the web page. A Google search for "Free Web Site Hosting" returned results organized into three categories: all-in-one website building, free sites for technical users, and free static websites. I didn't want or need a website builder like Wix or Weebly because of my unique requirements; I wanted to write my own HTML code for the website. The list of sites for technical users includes Oracle, Google Cloud, and AWS. These sites offered virtual machine instances that could host a website, not static web page hosting. The sweet spot for me was the static web page section, which listed three sites: GitHub Pages, Cloudflare, and Tiny.host.
For static websites:
- GitHub Pages: A free service for hosting static websites directly from your GitHub repositories.
- Cloudflare Pages: Another free service for hosting static sites, known for its performance and scalability.
- Tiiny.host: A simple tool for hosting static websites by uploading a zip file.
Starting from the bottom of the list, I first examined Tiny.host and CloudFair. They looked interesting, but both had the same problem: their free tiers were limited to a single web page and included a monthly visit cap.
I use GitHub as a code repository, but I didn't realize that it also hosts web pages. The process seemed straightforward: Create a GitHub repository for your website's code. Push your static website files to this repository. Enable GitHub Pages in your repository settings and select the branch from which to publish.
They even have an option to use a custom domain name.
GitHub does have some limitations for web pages: a maximum site size of 1 GB, deployment timeouts of 10 minutes, a soft bandwidth limit of 100 GB per month, and a soft limit of 10 builds per hour. They do not support server-side code or databases; they are for pages built with HTML, CSS, and JavaScript.
These tasks were well within the scope of what I wanted to do.
Creating a Free GitHub Repository for my Website's Code
To get started, I needed to create a new GitHub repository to hold the files for my website. Following the instructions on its site, here's how I did it:
But before doing this, you will need a GitHub account, which can be created for free here.
Since I already had a GitHub account, I logged in and clicked "New." This initiated the process of creating a new repository.
I gave the repository a name (TomsPastContent). I chose to make the repository public (so the website would be viewable by anyone) and clicked Create repository.
[Click on image for larger view.]
After creating the repository, I could either create a new file or upload an existing one to add the HTML code. I wanted to verify that everything was working, so I made a small test web page that displayed "Hello World."
It has been a while since I have coded any HTML, and I didn't want to dig out any of my old HTML reference books, so I used ChatGPT to generate the HTML code. I prompted it with "create an HTML code to display Hello World.". It took less than a second to generate the HTML code (see below).
I then need to create a web page. To do this, I selected "creating a new file," was presented with a command line, and pasted the HTML code into it.
[Click on image for larger view.]
I named the file HelloWorld.html and clicked Commit changes. Upon reviewing the repository, I saw the HelloWorld.html file.
[Click on image for larger view.]
I clicked Settings, selected Pages in the left navigation pane, selected Main from the branch drop-down menu, and clicked Save.
[Click on image for larger view.]
Now, the top of the page indicates that my site is live, displaying the URL and an icon to click for a direct visit to my web site.
[Click on image for larger view.]
When I clicked "Visit Site," I received a 404 error because the URL lacked "HelloWorld.html" at the end. Once I appended it so the URL looked like this: https://fentontom.github.io/TomsPastContent/HelloWorld.html.
Hello, World! It was displayed on the web page.
[Click on image for larger view.]
Once I was satisfied that I could create a GitHub Pages website, I proceeded to the next step: setting up a local GitHub repository for my GitHub Pages site. This would allow me to work on the code needed to build the web page listing my articles. As this was to be a static web page, I would need to add new articles to it as they were published.
Pushing Local Files to my GitHub Pages Repository
I knew I would be making many iterations of the web page and programmatically creating them on my laptop, so I needed to set up GitHub on my local machine to push my code to my GitHub Pages Repository.
By the way, Git was designed to work for any code-based project, but it works just as well for uploading my HTML pages. To facilitate this, I will use git-scm on my laptop.
There are two common ways to upload local files: one is to use git-scm, a command-line tool, and the other is to use its GUI tool. Git-scm is an official Git source code management (scm) tool. Programmers widely use it to track file changes and coordinate work among multiple people. It allows you to manage your codebase locally and remotely, making it easy to push updates from your laptop to a GitHub Pages repository.
The GUI-based tool can be accessed from the project's GitHub web page by clicking Set up in Desktop, while the same page displays the commands needed to use git-scm.
[Click on image for larger view.]
The use of these tools is beyond the scope of this article, and both are relatively intuitive. Other articles specify the usage, so I will leave it to you to decide which to work with.
Tom's Tip: I found Dennis Ivy's tutorial very well written and helpful for using git-scm, and I highly recommend reading it.
The GUI-based application is very intuitive, as shown in the example below: I downloaded the original code I created (HelloWorld.html), modified it, and made a copy (HelloWorldV2.html). You can see the two files in my local repository.
[Click on image for larger view.]
Once I selected Commit two files to main and Push Origin, they were pushed to GitHub.
[Click on image for larger view.]
In this article, I explained how I used AI to generate and deploy a free, cloud-hosted web page. I was motivated by the desire to finally have a central place for my past blog posts and articles, and to learn how to run GitHub locally. After exploring several free hosting options, I chose GitHub Pages because it was simple, supported static HTML, CSS, and JavaScript, and didn't require paid hosting or a database. I then walked you through how I created a GitHub repository, used ChatGPT to generate HTML code, published the site, and set up a local GitHub environment to manage updates.
In my next article, I will demonstrate how I utilized Vibe coding and AI, along with a few other free tools, to create the page's content.