How to Host a Website on GitHub Pages: A Beginner-Friendly 

GitHub Pages is one of the easiest ways to host a static website for free. Whether you're working on a personal blog, project site, or portfolio, GitHub Pages makes it simple to deploy your content with just a few steps. This guide will take you through the entire process of hosting your website on GitHub Pages, from creating a GitHub account to setting up a custom domain.

Step 1: Create a GitHub Account

Before you start, you'll need a GitHub account. If you don’t have one, go to GitHub’s Signup Page and create an account. GitHub offers free hosting for public repositories, which is ideal for personal and open-source projects.

Step 2: Create a New Repository

To host your website, you need to create a repository that will store your website files. Here’s how:

  1. Go to the GitHub dashboard and click on the green “New” button to create a new repository.
  2. Name your repository as username.github.io, replacing username with your GitHub username. This is crucial as GitHub Pages will use this naming convention to link your repository to the default GitHub Pages domain.

For more details on creating a new repository, check out GitHub’s official guide.

Share your new website to a community of real and active followers

Get me more followers

Step 3: Add Website Files to the Repository

Once your repository is created, you’ll need to add your website files (HTML, CSS, JavaScript, etc.).

  1. Upload Files Using GitHub Web Interface:
    • Go to your repository, click “Add file”, and select “Upload files”. Drag and drop your HTML files (e.g., index.html).
    • Commit your changes by clicking Commit Changes.
  2. Using Git Locally: If you're more comfortable using Git on your local machine, follow these steps:
    • Clone the repository to your local machine: 
      
git clone https://github.com/yourusername/your-repository.git
    • Add your website files: 
      
git add .
git commit -m "Initial commit"
git push origin main

For more help with using Git, visit the GitHub Docs.

Watch video on adding website files to the repo

Step 4: Enable GitHub Pages

Now that your website files are uploaded to the repository, it’s time to enable GitHub Pages.

  1. Go to the Settings tab in your repository.
  2. Scroll down to the GitHub Pages section.
  3. Under Source, select the branch you want to use (usually main or master).
  4. Click Save.

Your website will now be live at https://yourusername.github.io/ by default. For more on this, see the official GitHub Pages Setup Guide.

Step 5: Customize Your Website

If you want to customize your site with themes or add advanced features, you can take advantage of Jekyll, the static site generator integrated into GitHub Pages. Jekyll allows you to use pre-made themes or create custom templates.

  1. To use a theme, create a _config.yml file in your repository, and add the following line:

    theme: jekyll-theme-slate
    This will apply the Slate theme, one of GitHub Pages' supported themes. You can explore more themes in the GitHub Pages Themes Documentation.

  2. For advanced customization, check out Jekyll Documentation for more options.

Step 6: Set Up a Custom Domain (Optional)

If you want to use a custom domain (e.g., www.yourdomain.com) instead of the default GitHub Pages URL, follow these steps:

  1. Register a custom domain with a registrar like Namecheap or Google Domains.

  2. Configure the DNS settings in your domain registrar to point to GitHub’s servers. Add the following A records:

    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153

      • For detailed DNS instructions, check out GitHub’s DNS setup guide.

  3. In your GitHub repository, go to Settings > GitHub Pages > Custom domain, and enter your domain name. GitHub will automatically create a CNAME file in your repository to link the domain.

Step 7: Enforce HTTPS (Optional but Recommended)

Once you’ve added a custom domain, it’s important to secure your site with HTTPS. GitHub Pages provides free SSL certificates through Let’s Encrypt.

  1. In the GitHub Pages section of your repository's settings, check the box labeled Enforce HTTPS.
  2. Your site will now be served over https://, ensuring a secure connection for visitors.

More details on enforcing HTTPS can be found in the GitHub Pages HTTPS guide.

Step 8: Update and Deploy Changes

To update your website in the future, simply push new changes to your repository. GitHub Pages will automatically rebuild your site with the latest files.

  • Locally: If you're using Git locally, just modify your files and run:

    git add .
git commit -m "Updated website"
git push origin main
  • Using the Web Interface You can upload and commit changes directly from the GitHub web interface as well.

For more information on updating and deploying changes, refer to GitHub's documentation.

Final Thoughts

GitHub Pages is an excellent solution for hosting static websites, especially for personal projects, blogs, or documentation. It’s free, easy to set up, and provides plenty of features like custom domains and Jekyll integration.

If you run into any issues, you can always refer to the GitHub Pages Documentation for further help or check out community forums like Stack Overflow for troubleshooting tips.

With this guide, you should now be able to host your website on GitHub Pages successfully!

© Copyright 2024 Art Sentinel - All Rights Reserved