Deploying a website can seem daunting, but with GitHub Pages, you can host your static website for free! This guide will walk you through the step-by-step process of deploying your website using GitHub Pages.

Prerequisites

  • A GitHub account
  • Basic knowledge of Git and command line
  • A static website (HTML, CSS, JavaScript files)

Step 1: Create a Repository

  1. Log in to GitHub:
    Go to GitHub and log in to your account.

  2. Create a new repository:

    • Click on the "+" icon in the top-right corner and select "New repository."
    • Name your repository (e.g., my-website).
    • Optionally, add a description.
    • Choose whether to make it public or private. For GitHub Pages, it’s usually best to make it public.
    • Check the box to initialize the repository with a README file if you want.
    • Click on "Create repository."

Step 2: Upload Your Website Files

  1. Navigate to your repository:
    Go to the repository you just created.

  2. Upload your files:

    • Click on the "Add file" button, then select "Upload files."
    • Drag and drop your website files (HTML, CSS, JS) into the upload area or click "choose your files" to select them manually.
    • After the files are uploaded, click "Commit changes."

Step 3: Configure GitHub Pages

  1. Access repository settings:
    In your repository, click on the "Settings" tab.

  2. Scroll to the GitHub Pages section:
    Scroll down until you find the "GitHub Pages" section.

  3. Select the source:

    • In the "Source" dropdown, select the branch you want to use (usually main or master).
    • Choose the folder as / (root) for the main directory.

  4. Save your changes:
    Click on "Save" to enable GitHub Pages for your repository.

Step 4: Access Your Live Site

  1. Get the URL:
    After saving, you’ll see a message indicating that your site is published. It will provide a URL like https://<username>.github.io/<repository-name>/.

  2. Visit your website:
    Click the link to view your newly deployed website.

Step 5: Update Your Website

Whenever you want to update your website:

  1. Make changes to your local files.

  2. Upload the changes to your GitHub repository:

    • You can either upload the new files directly via the GitHub interface or use Git commands:
      git add .
git commit -m "Update website"
git push origin main

  3. Your website will automatically update:
    GitHub Pages will reflect the changes shortly after you push them.

Conclusion

Deploying a website using GitHub Pages is a straightforward process that allows you to host your static site for free. With just a few steps, you can share your projects with the world. Keep your site updated and explore additional features of GitHub Pages, such as custom domains and Jekyll integration, for even more functionality.