How to Set Up a Custom Domain with GitHub Pages and Protect a Specific Area

GitHub Pages is a powerful and free platform provided by GitHub for hosting static websites. It allows you to transform your GitHub repository into a fully functional website without needing to set up a server or worry about hosting costs. It’s an excellent tool for personal websites, project documentation, blogs, and portfolios. However, while GitHub Pages is great for static content, you might also want to add a custom domain and protect certain sections of your site. In this article, we’ll cover how to set up a custom domain with GitHub Pages and how to protect a specific area using simple authentication methods.

What Are GitHub Pages?

GitHub Pages is a feature provided by GitHub that allows you to host static websites directly from a GitHub repository. A static website is a website that consists of fixed content (HTML, CSS, and JavaScript files) and does not rely on a backend server for generating dynamic content (such as PHP or Node.js).

With GitHub Pages, you can easily create a personal or project website by simply pushing the HTML files into a repository. GitHub Pages will automatically serve these files as a website. One of the advantages of using GitHub Pages is that it’s free, and you can use it for any public repository, making it ideal for portfolios, documentation, and personal blogs.

GitHub Pages supports two types of sites:

• User/Organization Sites: These are tied to your GitHub username or organization and are hosted at username.github.io.
• Project Sites: These are tied to individual repositories and are hosted at username.github.io/repository-name.

How to Set Up a Custom Domain with GitHub Pages

GitHub Pages also allows you to use a custom domain for your site instead of the default username.github.io. This is especially useful for professional websites, portfolios, or any site where you want a more personalized domain (e.g., www.yourdomain.com). Here’s how you can set it up.

Step 1: Purchase a Domain

First, you need to purchase a domain from a domain registrar like:

• GoDaddy
• Namecheap
• Google Domains

Once you purchase the domain, you’ll have access to the domain’s DNS settings.

Step 2: Add a CNAME File to Your Repository

GitHub Pages uses a file called CNAME to associate your repository with your custom domain. Here’s how to set it up:

1. In your GitHub Pages repository, create a new file named CNAME (no file extension).
2. Inside this CNAME file, write your custom domain. For example:CopyEditwww.yourdomain.com
3. Commit and push the file to your repository:bashCopyEditgit add CNAME git commit -m "Add CNAME file for custom domain" git push origin main

Once this is done, GitHub will automatically use your custom domain to serve the pages of this repository.

Step 3: Configure DNS Settings

To make sure your custom domain points to GitHub Pages, you need to configure your domain’s DNS settings.

1. For the Root Domain (without www): Add A records to point to GitHub’s IP addresses:CopyEdit185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 These IP addresses are used by GitHub Pages to serve your site.
2. For the www Subdomain: Add a CNAME record for the www subdomain:
   • Name: www
   • Value: username.github.io (replace username with your actual GitHub username)

This ensures that when someone types www.yourdomain.com, GitHub Pages will load your website.

Step 4: Enable HTTPS (Optional but Recommended)

To ensure that your website is served securely, you should enable HTTPS. Here’s how to do it:

1. Go to the Settings page of your repository on GitHub.
2. Scroll down to the GitHub Pages section.
3. Check the box labeled Enforce HTTPS.

This will ensure that your site is accessible only via a secure connection (HTTPS).

Step 5: Verify the Setup

After configuring DNS settings, it may take up to 48 hours for the changes to propagate. Once it’s done, visit www.yourdomain.com (or your root domain) and confirm that your GitHub Pages site is live with your custom domain.

How to Protect a Specific Area of Your GitHub Pages Site

While GitHub Pages doesn’t support server-side authentication (since it hosts static sites), there are ways you can protect specific areas of your site, especially if you need to restrict access to certain content. Here are a couple of methods you can use.

Option 1: Basic Authentication Using JavaScript

One simple method is to use basic authentication via JavaScript. While this method is not secure (since the password is exposed in the JavaScript code), it can work for basic protection when you’re not dealing with sensitive data.

Here’s a simple example of a password-protected page using JavaScript:

1. Create an HTML file for the login page:htmlCopyEdit<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Protected Area</title> <script> var username = "user"; // Set the username var password = "password"; // Set the password function checkPassword() { var enteredUsername = document.getElementById("username").value; var enteredPassword = document.getElementById("password").value; if (enteredUsername === username && enteredPassword === password) { document.getElementById("protected-content").style.display = "block"; document.getElementById("login-form").style.display = "none"; } else { alert("Incorrect credentials!"); } } </script> </head> <body> <div id="login-form"> <h2>Protected Area - Login</h2> <input type="text" id="username" placeholder="Username" required> <input type="password" id="password" placeholder="Password" required> <button onclick="checkPassword()">Enter</button> </div> <div id="protected-content" style="display:none;"> <h1>Welcome to the protected area!</h1> <p>This content is protected and can only be accessed after logging in.</p> </div> </body> </html>
2. Upload this HTML file to your GitHub Pages repository.

This simple password-protection mechanism works by checking if the user inputs the correct username and password. If they do, the protected content is revealed.

Limitations:

• Not secure: JavaScript-based authentication is not secure as the credentials are exposed in the page’s source code.
• Limited to simple use cases: This method is only suitable for non-sensitive data.

Option 2: Using Firebase Authentication

For a more secure option, you can integrate Firebase Authentication into your GitHub Pages site. Firebase provides an easy-to-use, secure authentication system that works with static sites.

1. Create a Firebase project and set up authentication (Firebase offers free tier plans for small sites).
2. Integrate Firebase into your site by following the Firebase Authentication documentation.
3. Protect specific content by checking if the user is authenticated before showing protected pages.

Conclusion

GitHub Pages is a powerful and cost-effective way to host static websites. By following the steps outlined above, you can not only set up a custom domain for your GitHub Pages site but also protect certain areas with basic authentication. However, it’s important to note that for more secure areas or sensitive data, you might need to consider a backend solution or use services like Firebase for secure user authentication.

If you need more advanced features, such as dynamic content or robust authentication, consider using platforms like Netlify or Vercel, which support backend integration and more complex security features.

If you have any questions or need assistance with setting up your GitHub Pages site or authentication, feel free to reach out!