Hosting a website on GitHub Pages with Hugo involves the following steps:

Creating a website

#

1. Install Hugo and git

> sudo pacman -S Hugo

2. Create a new Hugo site

> hugo new site your-website

3. Add a Theme

Navigate to your website directory and add a theme. You can choose one from the Hugo Themes .

> cd your-website
> git init 
> git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/hugo-PaperMod

Now you will need to update the hugo.toml file for them to take effect. To do so you can either echo or addd it in the file.

> echo "theme = 'hugo-PaperMod'" >> hugo.toml

To view the website you can run it locally using Hugo’s development server to view the site. You can add -D to see your drafts.

> hugo server

3. Add Content

To add a new page to your site.

> hugo new content content/posts/yout-first-post.md

This is it You have done it. YAY!

Hosting it on GitHub

#

1. Create a GitHub repository.

• Click the + icon in the top-right corner of:> [!WARNING]
• the GitHub interface and select New repository.
• Enter a repository name: yourusername.github.io
• Click Create repository.

2. Add Files for Your website

Clone the repository locally using Git:

git clone https://github.com//.git

Add your static site files (generated by Hugo) to the repository. Commit and push the changes:

> git add -A
> git commit -s -m "Initial commit"
> git push origin main

3. Configure the Repository for GitHub Pages

• Go to the Settings tab of your new repository.
• Scroll down to the Pages section. Settings > Pages.
• In the center of your screen you will see this: Build and development
• Change the Source to GitHub Actions.

4. Create a file named hugo.yaml in a directory named .github/workflows.

> mkdir -p .github/workflows 
> cd ./github/workflows touch hugo.yaml

5. Add content in the YAML file.

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.141.0
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
      - name: Install Dart Sass
        run: sudo snap install dart-sass
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
          HUGO_ENVIRONMENT: production
          TZ: America/Los_Angeles
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

5. Commit and push your GitHub repository.

>git add -A
>git commit -m "Create hugo.yaml"
>git push

6. Deployment status From GitHub’s main menu, choose Actions. When GitHub has finished building and deploying your site, the color of the status indicator will change to green.

Step 5: Verify Your GitHub Pages Site

The site will be live at https://yourusername.github.io.