How-To

The right way to Create a Free Net Web page Utilizing GitHub Pages

That is the primary of two articles wherein I’ll show how I used AI with a vibe-coding methodology to generate code for an internet web page that I can host without cost within the Cloud. The explanation was easy: through the years, I’ve written tons of 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, truly, the above is the use case for this text. The precise impetus for these articles was fourfold: I wished to see how simply and successfully it was to get a free net web page up and operating, grow to be aware of operating GitHub domestically, and use the Vibe coding methodology and AI to generate code. In these articles, I’ll present you learn how to do the identical.

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

Beneath, I’ll present you ways I did this. Hopefully, it is going to aid you eradicate lots of the missteps and blind alleys I encountered alongside the best way. Though I doubt that you’ll want to use it for a similar function I did, I feel you will see the strategies and instruments I used to create my free cloud-based, AI-generated net web page useful for different initiatives.

A Free Website for the Net Web page
The very first thing I wanted was a publicly out there web site to host the net 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 an internet site builder like Wix or Weebly due to my distinctive necessities; I wished to write down my very own HTML code for the web site. The record of websites for technical customers contains Oracle, Google Cloud, and AWS. These websites provided digital machine situations that would host an internet 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 record, I first examined Tiny.host and CloudFair. They appeared fascinating, however each had the identical downside: their free tiers have been restricted to a single net web page and included a month-to-month go to cap.

I take advantage of GitHub as a code repository, however I did not notice that it additionally hosts net pages. The method appeared easy: Create a GitHub repository in 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 choice 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 mushy bandwidth restrict of 100 GB per thirty days, and a mushy restrict of 10 builds per hour. They don’t assist server-side code or databases; they’re for pages constructed with HTML, CSS, and JavaScript.

These duties have been nicely inside the scope of what I wished 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 might be created without cost 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 can be viewable by anybody) and clicked Create repository.

After creating the repository, I might both create a brand new file or add an current one so as to add the HTML code. I wished to confirm that every part was working, so I made a small take a look at net web page that displayed “Howdy World.”

It has been some time since I’ve coded any HTML, and I did not wish to dig out any of my outdated 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 have to create an internet web page. To do that, I chosen “creating a brand new file,” was offered with a command line, and pasted the HTML code into it.

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

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

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

Once 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 internet web page.

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

Pushing Native Information to my GitHub Pages Repository
I knew I might be making many iterations of the net 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 best way, Git was designed to work for any code-based venture, 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 frequent methods to add native recordsdata: one is to make use of git-scm, a command-line software, and the opposite is to make use of its GUI software. Git-scm is an official Git supply code administration (scm) software. Programmers broadly use it to trace file adjustments and coordinate work amongst a number of folks. It lets you handle your codebase domestically and remotely, making it straightforward to push updates out of your laptop computer to a GitHub Pages repository.

The GUI-based software might be accessed from the venture’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.