Are you ready to launch a website for free? Whether you're just starting out or looking for a quick, budget-friendly solution, this guide will show you how to get a website live in under 5 minutes.

Using GitHub Pages and Visual Studio Code, you'll have access to free web hosting, and the best part? It's easy and beginner-friendly. Follow along with these simple steps, and you’ll have your site up and running in no time.

This guide is for uploading static sites

A static site is a website that displays fixed content to all users without any backend processes or dynamic updates. They are built with HTML, Javascript, and CSS. Static sites are not websites made with popular tools like React, Next, Angular...

Download and Install Visual Studio Code

Before creating your website, you will need a reliable code editor. Visual Studio Code (VS Code) is a free, lightweight, and powerful code editor developed by Microsoft. It's widely used by developers for its ease of use, vast extensions library, and built-in support for Git, making it a perfect tool for launching and managing websites

How to Download VS Code:

• Head Over to the Visual Studio Code Website

• Click on the Download button and choose your operating system (Windows, macOS, or Linux)

• Once downloaded, follow the instructions to set it up on your computer

Create a Free GitHub account

First, head over to GitHub and create a free account. GitHub is a powerful platform not only for developers but also for hosting websites for free using GitHub Pages. Once your account is set up, you're ready to start hosting your website.

Connect Your GitHub Account to Visual Studio Code

How to Connect GitHub to VS Code:

• Find the profile icon in Visual Studio Code window, and click on *Backup and Sync Settings.

• Then click on the Sign In button

• Select the GitHub option

• Enter your GitHub credentials for your account

Create a Basic Website to Upload to GitHub

If you already have a website you want to launch and host you can skip this step.

Set Up Your Workspace

• Make sure Visual Studio Code is open

• Click on Open Folder, then create or select a folder where you want to store your website files. This will be your project folder (e.g., my website).

• Once the folder is open you can create a new file by clicking File > New File or using the keyboard shortcut CTRL+N (Windows) or CMD+N (Mac).

Create Your Website

• Inside index.html file, enter docs and select the auto suggestion provided from Emmet Abbreviation, this will fill in the basic HTML structure that HTML requires

• From here you can insert any HTML for your website, a full guide on HTML can be found at https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Upload Your Website to GitHub and Enable GitHub Pages

After you have written your website and are satisfied with how it looks, it’s time to upload your files to GitHub and enable GitHub Pages to make your website live. This step will guide you through the process of pushing your local code to your GitHub repository and configuring GitHub Pages so that anyone can access your site online. With just a few simple clicks, you'll share your creation with the world!

Create New Repository Inside Visual Studio Code

• Click on Terminal > New Terminal, then copy and paste the code found in **..or create a new repository on the command line

• Once that is complete, you will be able to use Source Control in Visual Studio Code where you will see your repository changes

• It is important that you have all changes seen in Source Control within the Staged Changes section

• Now you can enter any message along with your commit, and click the Commit button

Enable GitHub Pages In Your GitHub Repository

• Navigate to GitHub's website and go to your Profile
• Within your Profile click on the *Repositories tab
• Find your repository that you made for your website and click on it.

• Navigate to the Settings tab

• Click on Pages menu option

• Under the Branch section select the None dropdown menu and select main option, then hit the Save button

• GitHub will take a few minutes to launch your webiste. After this period, refresh the page and you will see a banner that has the Visit Site button.

• You now have a live link of your website that was launched and hosted to GitHub Pages for free.

Conclusion

Knowing how to launch and host a website on the internet is a task that at first seems quite difficulty but in reality it is simple. It is the first step that every developer must know when building their own portfolio.

This guide showcased the simplest way to launch and host a website using HTML and GitHub pages for free within 5 minutes.

Remember, this specific method is only for static websites.