How to Deploy a Website on GitHub?

GitHub is not only a platform for version control and collaboration but also an excellent tool for hosting static websites through GitHub Pages. Whether you’re deploying a personal portfolio, documentation, or a project website, GitHub makes the process straightforward and accessible.

This blog post will walk you through deploying a website on GitHub, covering both beginner-friendly and advanced use cases.

What Is GitHub Pages?

GitHub Pages is a feature that allows you to host static websites directly from a GitHub repository. It supports HTML, CSS, JavaScript, and frameworks like Jekyll. GitHub Pages is free and integrates seamlessly with repositories, making it an excellent choice for developers and hobbyists alike.

---

Prerequisites

Before deploying your website, ensure you have the following:

1. GitHub Account: Sign up at GitHub if you don’t already have an account.
2. Git Installed: Install Git on your local machine (Download Git).
3. Website Files: Ensure your static files (HTML, CSS, JavaScript) are ready.

---

Step 1: Create a GitHub Repository

1. Log in to your GitHub account.
2. Click the + icon in the top-right corner and select New repository.
3. Provide a name for your repository (e.g., my-website).
4. Choose Public if you want your website to be accessible to everyone.
5. (Optional) Add a README file, .gitignore, or license.
6. Click Create repository.

---

Step 2: Upload Your Website Files

Option 1: Upload Files Directly

1. Navigate to your repository on GitHub.
2. Click Add file > Upload files.
3. Drag and drop your website files or select them manually.
4. Click Commit changes to save the files to the repository.

Option 2: Push Files Using Git

1. Open your terminal and navigate to the directory containing your website files.
2. Initialize a Git repository: git init
3. Add the remote repository: git remote add origin https://github.com/<your-username>/<your-repository>.git
4. Add and commit your files: git add . git commit -m "Initial commit"
5. Push the files to GitHub: git push -u origin main

---

Step 3: Configure GitHub Pages

1. Navigate to your repository on GitHub.
2. Go to the Settings tab.
3. Scroll down to the Pages section.
4. Under Source, select the branch that contains your website files (e.g., main).
5. If your files are in a subdirectory, specify the directory (e.g., /docs). Otherwise, leave it as root.
6. Click Save.

Once configured, GitHub will generate a URL for your website (e.g., https://<your-username>.github.io/<repository-name>/).

---

Step 4: Test Your Deployment

1. Open the URL provided in the Pages section of your repository settings.
2. Verify that your website loads correctly.
3. Debug any issues by checking your repository files and ensuring all links and paths are correct.

---

Advanced: Custom Domain for GitHub Pages

You can use a custom domain instead of the default GitHub Pages URL.

Steps to Add a Custom Domain

1. Purchase a domain from a registrar (e.g., GoDaddy, Namecheap).
2. In your repository settings, under Pages, add your custom domain in the Custom domain field (e.g., www.yourdomain.com).
3. Update your DNS records with your domain registrar:
   • Add a CNAME record pointing to username.github.io (replace username with your GitHub username).
4. Wait for the DNS changes to propagate (may take up to 24 hours).

---

Best Practices for GitHub Pages Deployment

1. Use a Build Framework: Tools like Jekyll, Hugo, or Next.js can streamline static website generation.
2. Optimize Your Website: Minify CSS/JS files and compress images for faster load times.
3. Secure Your Repository: Use .gitignore to exclude sensitive files or data.
4. Use CI/CD: Automate deployment with GitHub Actions for smoother updates.
5. Monitor Your Website: Use analytics tools to track performance and usage.

---

Common Issues and Troubleshooting

1. Website Not Loading:
   • Ensure your files are in the correct branch/directory.
   • Verify the GitHub Pages configuration in settings.
2. Broken Links or Missing Files:
   • Check the file paths in your HTML files (relative vs. absolute).
   • Ensure all files are pushed to the repository.
3. Custom Domain Not Working:
   • Verify your DNS settings and ensure the domain is correctly configured in GitHub Pages.

---

Conclusion

Deploying a website on GitHub is simple and efficient, making it an excellent platform for hosting static content. By following the steps outlined in this guide, you can publish your website quickly and take advantage of GitHub Pages’ free and reliable hosting.

With regular updates and best practices, your GitHub-hosted website can become a valuable asset for personal, professional, or project use.