Best Codes

Posted on Dec 12, 2023

I made a simple website 100% for FREE! 🤯

#github #webdev #tutorial #programming

I made a simple website 100% for FREE! 🤯

Yes, it is true! You can make a website 100% for free! The catch: you don't get your own special domain (e.g., bestcodes.com). However, you do have full control of the site, including as many sub-paths as you want and a virtually unlimited amount of storage. (APIs are not supported, you can use a service like Vercel to make one).

First, you may be wondering where the site I made is. You can check it out here:

https://the-best-codes.github.io/

As you can see, the site is hosted on github.io, which is GitHub's free site hosting platform. Essentially, GitHub allows you to turn any repository into your own personal site, with a custom subdomain name. This article will explore how to take advantage of this and make your own free site using github.io. So let's get started!

Step 1: Create a site repository

First, you will need to create a repository for your site. If you have a GitHub account, you can simply go to https://github.com
and click the “New” button in the repo panel:

Name your repository like this: username.github.io, and replace username with your GitHub username!

Make sure that the repository is public, too.

Step 2: Configure the repository

Now, navigate to the settings tab for your repo to change its settings.

Next, on the left side panel, look for the “pages” option. Click on it. Check and make sure that the settings are similar to the ones shown below:

Now, you need to start coding! If you prefer a VS Code environment, then you can use the GitHub CodeSpace.

Step 3: Adding site content

First, let's navigate back to the code tab of our GitHub repo:

Then, click on the green “Code” button, switch to the CodeSpaces tab, and click “Create CodeSpace on main”:

A tab will open, and after it is finished loading, a UI nearly identical to VS Code will appear.

Tip: A README.md file will open by default; you can close it.

In the files tab of the CodeSpace, you can click “New File”, and create a new HTML file called index.html.

Now, simply add your site's content in the file.

Tip: Type html:5 and press enter to use the HTML 5 document Emmet abbreviation.

Step 4: Updating the site

Now, you have site content. But how do you update the site to display it? First, let's navigate to the source control tab of the CodeSpace in the sidebar.

Please note that you can only update your site if you have made changes to it (Duh). This is a bit complicated. Hover over the “Changes” container, and click the button to stage all changes.

You should now see the Staged changes:

The next step is very important: The changes will not commit without a message! Simply type one in the message box:

Now, click the button to commit the changes. Then click the button to sync the changes (no message necessary).

If prompted, select “OK”. Now, wait a few minutes for the github site to update.

Viewing the site

To view your site and make sure it is live, go back to your site's repo and to Settings > Pages again. Now, you should see a new message. Click “Visit site” to see your free website live:

If the site doesn't look as you expected, wait a few minutes and try again. You may also need to view the site in a new private window to prevent page caching.

You now have a free website!

For more info about using themes like Jekyll to blog with your site easily, or to learn about other awesome things you can do with your website, be sure to check out the useful resources below:

https://pages.github.com/
https://docs.github.com/en/pages
https://docs.github.com/en/pages/quickstart
https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll

That's it! Thanks for reading my whole post! If you thought the content was interesting or useful, please give it a like and let me know in the comments below!

Happy coding!