How-To

Create a Free Net Web page Utilizing GitHub Pages

That is the primary of two articles by which I’ll exhibit how I used AI with a vibe-coding methodology to generate code for an online web page that I can host totally free within the Cloud. The rationale was simple: through the years, I’ve written a whole lot of articles and weblog posts for Virtualization & Cloud Overview and different publications, however I’ve by no means had a central location for them.

In hindsight, really, the above is the use case for this text. The precise impetus for these articles was fourfold: I needed to see how simply and successfully it was to get a free net web page up and operating, change into aware of operating GitHub domestically, and use the Vibe coding methodology and AI to generate code. In these articles, I’ll present you how you can do the identical.

I broke this undertaking down into the next steps: finding a web site to host a static net web page, making a JSON listing of my articles, and utilizing AI to generate the online web page.

Under, I’ll present you ways I did this. Hopefully, it should enable you to get rid of lots of the missteps and blind alleys I encountered alongside the way in which. Though I doubt that it would be best to use it for a similar goal I did, I feel you can find the strategies and instruments I used to create my free cloud-based, AI-generated net web page useful for different tasks.

A Free Website for the Net Web page
The very first thing I wanted was a publicly obtainable web site to host the online web page. A Google seek for “Free Net Website Internet hosting” returned outcomes organized into three classes: all-in-one web site constructing, free websites for technical customers, and free static web sites. I did not need or want a web site builder like Wix or Weebly due to my distinctive necessities; I needed to put in writing my very own HTML code for the web site. The listing of websites for technical customers contains Oracle, Google Cloud, and AWS. These websites provided digital machine cases that might host a web site, not static net web page internet hosting. The candy spot for me was the static net web page part, which listed three websites: GitHub Pages, Cloudflare, and Tiny.host.

Ranging from the underside of the listing, I first examined Tiny.host and CloudFair. They appeared fascinating, however each had the identical drawback: their free tiers have been restricted to a single net web page and included a month-to-month go to cap.

I exploit GitHub as a code repository, however I did not notice that it additionally hosts net pages. The method appeared simple: Create a GitHub repository on your web site’s code. Push your static web site recordsdata to this repository. Allow GitHub Pages in your repository settings and choose the department from which to publish.

They even have an possibility to make use of a customized area title.

GitHub does have some limitations for net pages: a most web site dimension of 1 GB, deployment timeouts of 10 minutes, a gentle bandwidth restrict of 100 GB monthly, and a gentle restrict of 10 builds per hour. They don’t help server-side code or databases; they’re for pages constructed with HTML, CSS, and JavaScript.

These duties have been nicely throughout the scope of what I needed to do.

Making a Free GitHub Repository for my Web site’s Code
To get began, I wanted to create a brand new GitHub repository to carry the recordsdata for my web site. Following the directions on its web site, this is how I did it:

However earlier than doing this, you’ll need a GitHub account, which will be created totally free right here.

Since I already had a GitHub account, I logged in and clicked “New.” This initiated the method of making a brand new repository.

I gave the repository a reputation (TomsPastContent). I selected to make the repository public (so the web site could be viewable by anybody) and clicked Create repository.

After creating the repository, I may both create a brand new file or add an current one so as to add the HTML code. I needed to confirm that the whole lot was working, so I made a small check net web page that displayed “Howdy World.”

It has been some time since I’ve coded any HTML, and I did not need to dig out any of my previous HTML reference books, so I used ChatGPT to generate the HTML code. I prompted it with “create an HTML code to show Howdy World.”. It took lower than a second to generate the HTML code (see beneath).

I then must create an online web page. To do that, I chosen “creating a brand new file,” was introduced with a command line, and pasted the HTML code into it.

I named the file HelloWorld.html and clicked Commit modifications. Upon reviewing the repository, I noticed the HelloWorld.html file.

I clicked Settings, chosen Pages within the left navigation pane, chosen Primary from the department drop-down menu, and clicked Save.

Now, the highest of the web page signifies that my web site is dwell, displaying the URL and an icon to click on for a direct go to to my site.

After I clicked “Go to Website,” I obtained a 404 error as a result of the URL lacked “HelloWorld.html” on the finish. As soon as I appended it so the URL appeared like this: https://fentontom.github.io/TomsPastContent/HelloWorld.html.

Howdy, World!
It was displayed on the net web page.

As soon as I used to be glad that I may create a GitHub Pages web site, I proceeded to the following step: organising a neighborhood GitHub repository for my GitHub Pages web site. This is able to permit me to work on the code wanted to construct the online web page itemizing my articles. As this was to be a static net web page, I would wish so as to add new articles to it as they have been printed.

Pushing Native Information to my GitHub Pages Repository
I knew I’d be making many iterations of the online web page and programmatically creating them on my laptop computer, so I wanted to arrange GitHub on my native machine to push my code to my GitHub Pages Repository.

By the way in which, Git was designed to work for any code-based undertaking, however it works simply as nicely for importing my HTML pages. To facilitate this, I’ll use git-scm on my laptop computer.

There are two widespread methods to add native recordsdata: one is to make use of git-scm, a command-line instrument, and the opposite is to make use of its GUI instrument. Git-scm is an official Git supply code administration (scm) instrument. Programmers extensively use it to trace file modifications and coordinate work amongst a number of folks. It means that you can handle your codebase domestically and remotely, making it simple to push updates out of your laptop computer to a GitHub Pages repository.

The GUI-based instrument will be accessed from the undertaking’s GitHub net web page by clicking Arrange in Desktop, whereas the identical web page shows the instructions wanted to make use of git-scm.