Hosting a Static Website with GitHub Pages

1

GitHub Pages is one of the most popular ways to host static websites directly from a GitHub repository. Here’s how to set it up:

Basic Setup

  1. Create a GitHub repository
  2. Push your static website files to the repository
  3. Go to repository Settings → Pages
  4. Select your source branch (typically “main” or “master”)
  5. Your site will be published at https://yourusername.github.io/repositoryname

For a Custom Domain

  1. Add a CNAME file to your repository with your domain name
  2. Update your domain’s DNS settings:
  • Add an A record pointing to GitHub Pages’ IP addresses
  • Add a CNAME record for www subdomain
  1. Configure the custom domain in repository Settings → Pages

Benefits

  • Completely free hosting
  • Automatic HTTPS with SSL certificates
  • Integrated with your version control workflow
  • Good performance with GitHub’s CDN

To add a custom domain with a subdomain (e.g., blog.example.com) to your GitHub Pages site, follow these steps. This process assumes you have a domain (like example.com) and want to use a subdomain for your GitHub Pages site.

Step 1: Prepare Your Repository for GitHub Pages

  • Ensure content is ready: Your repository must contain an index.html file in the root directory or a docs/ folder, depending on your setup.
  • Enable GitHub Pages:
    • Go to your repository on GitHub.
    • Navigate to Settings > Pages.
    • Under “Source,” select the branch to publish (e.g., main or gh-pages).
    • If applicable, choose the folder (e.g., / (root) or /docs).
    • Save the settings. This activates GitHub Pages for your repository.

Step 2: Set the Custom Domain in GitHub

  • Add the subdomain:
    • In the same Pages section, locate the “Custom domain” field.
    • Enter your subdomain, e.g., blog.example.com.
    • Click Save.
  • What happens: GitHub creates a CNAME file in your repository with the subdomain name, linking it to your GitHub Pages site.

Step 3: Configure DNS Settings

  • Access your DNS provider: Log in to your domain registrar or DNS management tool (e.g., GoDaddy, Namecheap, Cloudflare).
  • Add a CNAME record:
    • Create a new record with the following details:
      • Type: CNAME
      • Name/Host: blog (this represents blog.example.com; use only the subdomain part)
      • Value/Points to: username.github.io (replace username with your GitHub username)
    • Save the record.
  • Purpose: The CNAME record tells the DNS system to direct blog.example.com to your GitHub Pages site.

Step 4: Wait for DNS Propagation

  • Time delay: DNS changes can take up to 24 hours to propagate worldwide, though it’s often faster.
  • Check progress: Use tools like dig or online DNS checkers (e.g., WhatsMyDNS) to confirm the subdomain resolves to GitHub’s servers.

Step 5: Verify and Enable HTTPS

  • Test the site: Once DNS propagates, visit your subdomain (e.g., blog.example.com) in a browser to ensure it loads your GitHub Pages content.
  • Secure it with HTTPS:
    • Back in Settings > Pages, check the “Enforce HTTPS” box.
    • This ensures your site uses a secure connection, which GitHub Pages supports for custom subdomains.

Additional Notes

  • Public vs. private repositories: This works for public repositories by default. For private repositories, you’ll need a paid GitHub plan (e.g., GitHub Pro) to use custom domains with GitHub Pages.
  • Apex domains: If you wanted to use the root domain (e.g., example.com) instead of a subdomain, you’d need A records pointing to GitHub’s IP addresses (e.g., 185.199.108.153). For subdomains, CNAME is sufficient.
  • Multiple subdomains: To use different subdomains (e.g., project1.example.com, project2.example.com) for different GitHub Pages sites, repeat this process for each repository, assigning a unique subdomain to each.

Troubleshooting Tips

  • DNS not working?: Double-check your CNAME record for typos and ensure it points to username.github.io (not username.github.io/repository-name).
  • Site not loading?: Confirm GitHub Pages is enabled and the custom domain is saved in the repository settings.
  • HTTPS issues?: Ensure DNS has fully propagated before enabling “Enforce HTTPS.”

By following these steps, your GitHub Pages site will be accessible at your custom subdomain, providing a professional and personalized URL.

2

使用 GitHub 託管靜態網站

GitHub Pages 是直接從 GitHub 儲存庫託管靜態網站的最受歡迎方式之一。以下是設置方法：

基本設置

  1. 創建一個 GitHub 儲存庫
  2. 將您的靜態網站文件推送到儲存庫
  3. 前往儲存庫設置 → Pages
  4. 選擇您的源分支（通常是「main」或「master」）
  5. 您的網站將發布在 https://yourusername.github.io/repositoryname

自定義域名設置

  1. 在您的儲存庫中添加包含您域名的 CNAME 文件
  2. 更新您域名的 DNS 設置：
  • 添加指向 GitHub Pages IP 地址的 A 記錄
  • 為 www 子域名添加 CNAME 記錄
  1. 在儲存庫設置 → Pages 中配置自定義域名

優勢

  • 完全免費的託管服務
  • 自動 HTTPS 與 SSL 證書
  • 與您的版本控制工作流程集成
  • 通過 GitHub 的 CDN 提供良好的性能

您需要關於此過程的任何部分的更多具體細節嗎？