Hosting Your Static Website on GitHub Pages for Free: A Step-by-Step Guide

/ Frontend, GitHub / By
Photo by Danny Meneses

If you have a static website and you’re looking for a hassle-free way to host it for free, GitHub Pages is an excellent choice. GitHub Pages allows you to easily host and share your HTML, CSS, and JavaScript-based websites with the world. In this step-by-step guide, we’ll walk you through the process of hosting your static website on GitHub Pages

Prepare Your Website

Before you begin, make sure your static website is ready. Ensure that it contains all the necessary HTML, CSS, JavaScript, and other assets (images, fonts, etc.). Here’s a quick checklist:

  • HTML files for your webpages.
  • CSS files for styling.
  • JavaScript files for interactivity (if needed).
  • Any additional assets like images or fonts.
ADVERTISEMENT

Create a GitHub Repository

To host your website on GitHub Pages, you’ll need a GitHub account. If you don’t have one, sign up at GitHub.

  1. Log in to GitHub: If you’re not already logged in, log in to your GitHub account.

  2. Create a New Repository:

    • Click on the ‘+’ sign in the top right corner of the GitHub dashboard and select “New Repository.”
    • Choose a name for your repository. The repository name should be in the format yourusername.github.io, where yourusername is your GitHub username. This naming convention is crucial for GitHub Pages to work.
    • Provide a short description (optional).
    • Choose the repository visibility. If you want to keep your website public, select “Public.” If you prefer it to be private (which is not recommended for hosting a public website), you can choose “Private.”

  3. Initialize with a README:

    • It’s a good practice to initialize your repository with a README. This file can contain information about your website or project.
    • You can also choose a license for your project. If you’re unsure, you can select an open-source license like MIT.

  4. Create Repository:

    • Click the “Create repository” button.
ADVERTISEMENT

Upload Your Website Files

With your repository created, it’s time to add your website files.

  1. Upload Files:

    • Click on the “Add file” button and select “Upload files.”

  2. Drag and Drop:

    • You can drag and drop your website files or click the “choose your files” link to upload them.

  3. Commit Changes:

    • After adding your files, scroll down, and you’ll see an area to commit your changes. You can provide a brief description of the changes you made (e.g., “Initial website upload”).
    • Click the “Commit changes” button.
ADVERTISEMENT

Configure GitHub Pages

Now that your website files are in your repository, let’s configure GitHub Pages to publish them.

  1. Go to Repository Settings:

    • In your repository, click the “Settings” tab at the top.

  2. Scroll Down to the Code and automation Section:

    • Scroll down to the Code and automation section in the left navigation bar and select “Pages”. Here, you can see the source for your GitHub Pages site.

  3. Choose a Branch:

    • By default, the source is set to the main branch. If your website’s HTML file is named something other than index.html, you can specify the correct filename here.
    • Once you’ve configured this, click “Save.”
ADVERTISEMENT

Access Your Website

Your website is now live on GitHub Pages! You can access it using the URL in the GitHub Pages section of your repository settings. It will be in the format https://yourusername.github.io.

That’s it! Your static website is now hosted on GitHub Pages and accessible to anyone with the URL. You can continue to make changes to your website by updating your GitHub repository, and the changes will be reflected on your hosted site.

GitHub Pages is an excellent and free option for hosting static websites, portfolios, blogs, and more. It’s simple to set up and provides reliable hosting for your projects. So, go ahead and share your creations with the world!

Related Posts