Thumbnail

Launch and Host a Website for Free in Under 5 minutes

Updated October 17th, 2024

Introduction

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.

Step 1. 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
  • Visual Studio Codes Website Homepage
  • Click on the Download button and choose your operating system (Windows, macOS, or Linux)
  • Once downloaded, follow the installation instructions to set it up on your computer

Step 2. 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.

Step 3. Connect Your GitHub Account to Visual Studio Code

By connecting your GitHub account to Visual Studio Code, you will be able to take advantage of Visual Studio Code's built-in support for Git making it easier to manage your repositories.

How to Connect GitHub to VS Code:

  • Find the profile icon in Visual Studio Code window, and click on Backup and Sync Settings.
  • Visual Studio Code Backup and Sync Settings Menu
  • Then click on the Sign In button.
  • Visual Studio Code Backup and Sync Settings Options
  • Select the GitHub Option.
  • Enter your GitHub credentials for your account.

Step 4. Create a basic Website to Upload to GitHub

If you already have a website you would like 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)
  • Opening Folder For Visual Studio Code Workspace
  • 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).
  • Name this file index.html-this will be the main file for your website

Create Your Website:

  • Inside index.html, enter 'doc' and select the auto suggestion from Emmet Abbreviation, this will fill your file with the basic HTML structure.
  • Using doc Emmet Abbreviation Autocomplete To Fill Out Basic HTML Format
  • From here you can insert any HTML for your website, for a guide on HTML follow this link.

Step 5. 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 the code found in ...or create a new repository on the command line
  • Opening New Terminal From macOS Terminal Dropdown
  • 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 Commit button
  • Ready To Commit Changes To GitHub

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 created for your website and click on it.
  • Navigate to the Settings tab.
  • Ready To Commit Changes To GitHub
  • Click on Pages menu option.
  • Ready To Commit Changes To GitHub
  • 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.
  • Ready To Commit Changes To GitHub