How to Deploy a Website on GitHub?

GitHub is a popular platform for hosting and version-controlling code, but it also offers an excellent feature for hosting websites through GitHub Pages. Whether you’re building a portfolio, documentation, or a static site, deploying it on GitHub is free, easy, and highly accessible.

This post will walk you through deploying your website on GitHub, whether you’re hosting a simple HTML page or a static site generated with tools like Jekyll or Hugo.

Why Choose GitHub for Website Deployment?

• Free Hosting: GitHub Pages offers free hosting for public and private repositories.
• Ease of Use: Straightforward setup, especially for static websites.
• Custom Domains: GitHub Pages supports custom domains for personalized branding.
• Version Control: Your site’s source code is always under version control.
• Integrated Workflows: Seamlessly integrates with GitHub Actions for advanced deployment needs.

---

Types of GitHub Pages

GitHub Pages allows two types of sites:

1. Project Pages: Host a website for a specific project or repository.

• URL format: https://<username>.github.io/<repository-name>/

1. User/Organization Pages: Host a website for your GitHub profile or organization.

• URL format: https://<username>.github.io/

---

Step 1: Prepare Your Website Files

1. Create the files for your website. At a minimum, you’ll need:

• index.html (the main file for your website).
• Additional files like styles.css or images if needed.

1. If using a static site generator like Jekyll, Hugo, or Gatsby, build the site using the generator’s build command (e.g., jekyll build or hugo).

---

Step 2: Push Your Website to a GitHub Repository

1. Create a New Repository

• Log in to GitHub.
• Click New Repository.
• Name your repository (e.g., my-website).
• If this is for a User Page, the repository name must be <username>.github.io.
• Initialize the repository with a README (optional).

1. Upload Your Website Files

• Clone the repository to your local machine:
  bash git clone https://github.com/<username>/<repository-name>.git
• Copy your website files into the repository folder.
• Add, commit, and push the changes:
  bash git add . git commit -m "Initial commit" git push origin main

---

Step 3: Configure GitHub Pages

1. Enable GitHub Pages

• Go to your repository on GitHub.
• Navigate to Settings > Pages.
• Under the Source section, choose the branch to serve your site (e.g., main or gh-pages).
• If deploying from a folder (e.g., /docs), select it under the branch dropdown.

1. Save Settings

• Click Save.
• GitHub will automatically build and host your site.

---

Step 4: Access Your Website

• After saving, GitHub generates a link to your website, typically available in a few minutes.
• Example URL: https://<username>.github.io/<repository-name>/
• For User Pages, the URL is: https://<username>.github.io/

---

Optional: Add a Custom Domain

If you own a custom domain, you can use it with GitHub Pages:

1. Add a CNAME File

• Create a file named CNAME in the root of your repository.
• Add your custom domain name inside, e.g., www.example.com.

1. Update DNS Settings

• Log in to your domain registrar.
• Add DNS records to point your domain to GitHub Pages: Type: A Name: @ Value: 185.199.108.153 (Repeat with these additional IPs: 185.199.109.153, 185.199.110.153, 185.199.111.153)
• For subdomains, use a CNAME record:
  Type: CNAME Name: www Value: <username>.github.io

1. Verify Settings

• Return to the Settings > Pages section on GitHub and confirm your custom domain setup.

---

Tips for Successful Deployment

1. Optimize Files: Compress images and minify CSS/JavaScript for faster load times.
2. Test Locally: Use a local server (e.g., Python’s http.server) to test your website before deployment.
3. Keep Repositories Clean: Exclude unnecessary files like build artifacts by using a .gitignore file.
4. Monitor Site Changes: Use GitHub Actions to automate deployments or add CI/CD pipelines for advanced workflows.

---

Troubleshooting Common Issues

1. 404 Error on Deployment

• Ensure you’ve selected the correct branch and folder in the Pages settings.
• Verify the index.html file exists in the root directory.

1. Custom Domain Not Working

• Check DNS propagation; it can take up to 48 hours.
• Ensure the CNAME file and DNS records are correctly configured.

1. CSS/JS Not Loading

• Check for incorrect paths in your HTML files, especially when using subdirectories.

---

Conclusion

Deploying a website on GitHub is an excellent choice for developers and creators who want a simple, cost-effective hosting solution. By following the steps in this guide, you can have your site live in minutes, complete with version control and optional custom domains.

Whether you’re showcasing a project, hosting documentation, or creating a portfolio, GitHub Pages provides the tools you need to succeed.