Skip to content
Go back

Hosting a Static Website on GitHub Pages

Edit page

Hosting a Static Website on GitHub Pages

Question: How to host a index.html in github pages

  1. Push your code to a GitHub repo.
  2. In Settings → Pages → Source: set to / (root) or main.

Tips:


Question: How to configure a custom domain (CNAME) for GitHub Pages

  1. In your GitHub repo, create a file named CNAME in the root (or in the public/ folder if using Astro).
  2. Add your custom domain (e.g., yourdomain.com) as the only line in the CNAME file.
  3. Push this file to your repository.
  4. In GitHub, go to Settings → Pages and set your custom domain.
  5. Update your DNS provider to point your domain to GitHub Pages (usually with an A or CNAME record).

Question: How to deploy with GitHub Actions (and why use it)


Question: Astro vs Hugo for static sites


Question: How to set up an Astro project for GitHub Pages

  1. Install Astro:
    npm create astro@latest
    # or
    pnpm create astro@latest
  2. Choose a template and follow the prompts.
  3. In astro.config.ts, set the base option if your site is not at the root (e.g., /your-repo-name/).
  4. Add a CNAME file in public/ if using a custom domain.
  5. Add a GitHub Actions workflow (see above) to automate deployment.
  6. Push your code to GitHub and verify your site at your custom domain or GitHub Pages URL.

Edit page
Share this post on:

Next Post
Injecting Environment Variables in HTML Using EJS