Host Your Static Website for Free with GitHub Pages

If you build your site using just HTML and CSS, there is no reason to pay for hosting. In this article, I'll show you the exact steps on how to make your site live on the internet using GitHub, completely for free. And yes, everything works—even the contact form.

Why Host on GitHub?

We're going to take it live, step by step. You don't need a hosting plan, so there are no annual fees to stress over. Unlike several free hosting platforms that sneak in weird ads, there is none of that nonsense here. You can even use your own custom domain if you want.

Preparing Your Website Files

Let's consider a standard project structure: a simple folder with an index.html file, and an assets folder containing CSS, images, and a bit of JavaScript. If your website is made of just static files like this, you're ready to go.

Step 1: Create a GitHub Repository

1. First, go to github.com and sign up. It's free and quick.
2. Once you're logged in, look at the top right, click the plus icon, and select New repository.
3. Name it something descriptive, like portfolio.
4. Keep it public and hit Create repository.

Step 2: Upload Your Site

1. Click upload files and drag your entire website folder into the screen. This includes all your HTML, CSS, images, and everything else.
2. Scroll down and click Commit changes. This saves your site's files to GitHub.

Step 3: Deploy with GitHub Pages

1. It's time for deploying the site. Click the Settings tab of your repository.
2. Scroll down to the Pages section.
3. Under Source, choose GitHub Actions.
4. It'll ask you to pick a workflow; select Static HTML.
5. Click Configure and then commit the new workflow file.

Now, GitHub will start deploying your site. To see the progress, click on the Actions tab. Wait for the process to complete, indicated by a green check mark. Once you see it, your site is live.

Go back to Settings, click on Pages, and your new website link will be right there. Click it, and it's live.

Adding a Functional Contact Form

What if people want to contact you through your portfolio? To do that, let's add a simple contact form using Google Forms.

1. Create a new form in Google Forms and add fields like Name, Email, and Message.
2. When you're done, click Send and copy the sharable link.
3. Now, go to your HTML file. You can either make a button that links to the Google Form or paste the form's link into the action attribute of your <form> tag.

While it might not look super fancy, it works perfectly, and responses will show up instantly inside your Google Forms account.

And that's it! Your portfolio site is now live, hosted for free with a working contact form. There are no hosting fees, no servers to manage, and no complicated setup.