A Website or Blog-page for you

Here is how I developed and hosted my blog page on GitHub Pages for free.

Prerequisites

1. Install Git on your local machine and create a GitHub account if you do not have one.
2. Setup a repository for your website
3. Install Hugo extended
4. Choose a theme of your interest.
5. Create a Hugo site and test it locally with the hugo server

There are three types of GitHub Pages sites: project, user, and organization. Project sites are connected to a specific project hosted on GitHub. User and organization sites are connected to a particular account on GitHub.com.

Procedure

Step 1

Push your local repository to GitHub.

Step 2

Visit your GitHub repository. From the main menu, choose Settings?>?Pages. In the center of your screen, you will see this:

Step 3

Change the Source to GitHub Actions. The change is immediate; you do not have to press a Save button.

Step 4

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

Step 5

Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed.

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Blog to GitHub-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.135.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        

Step 6

Commit and push the change to your GitHub repository.

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

Step 7

From GitHub’s main menu, choose Actions.

Step 8

When GitHub has finished building and deploying your site, the color of the status indicator will change to green.

Step 9

Click on the commit message as shown above. You will see this:

Under the deploy step, you will see a link to your live site.

In the future, whenever you push a change from your local repository, GitHub will rebuild your site and deploy the changes.

Improved setup

You can set up or update certain DNS records and your repository settings to point the default domain for your GitHub Pages site to a custom domain.

I hosted the website on my domain, www.devopsifyengineering.com. You can configure this under the custom domain section of the pages setting.

• Under "Custom domain", type your custom domain, then click Save.
• Navigate to your DNS provider and create an A and CNAME records.
• For the CNAME record, point your apex domain to the default domain for your site.

• For A record, point your apex domain to the IP addresses for GitHub Pages.

• To confirm that your DNS record is configured correctly, use the nslookup or dig command

• Optionally, to enforce HTTPS encryption for your site, select Enforce HTTPS.

The final version of the setup would look like the one below.