Build website with Hugo and Github (in just 10 mins) | Hugo tutorial

 

Building a website with Hugo and GitHub is a great way to create a fast and flexible website that can be easily deployed to the web. Hugo is a static website generator that uses markdown files to create HTML pages, making it a great choice for developers who prefer to work with code instead of a graphical interface. In this blog post, we’ll walk you through the process of building a website with Hugo and deploying it to GitHub.

Install Hugo

Before you start building your website with Hugo, you’ll need to install the Hugo static site generator on your computer. You can download the latest version of Hugo according to your system from the official Hugo website.

Here I am using Termux, so for termux just execute following to install Hugo in Termux

pkg update ; pkg install hugo -y

Create Website with Hugo

Once you’ve installed Hugo, you’re ready to start building your website. Open your terminal and navigate to the directory where you want to create your website. Run the following command to create a new Hugo website

hugo new site your-website-name

This will create a new directory with the name of your website. Navigate to this directory to start building your website.

Then just change directory to it

cd your-website-name

Start Hugo server

Just execute following to start the Hugo server

hugo server

Once the server is started, just go to localhost:1313 to access your site

To stop the server just press ctrl + c

Video tutorial 

Install Theme for Hugo

Next, you’ll want to choose a theme for your website. Hugo has a large library of themes to choose from, which you can find on the official Hugo website.

Here I will be using newsroom theme, so execute following to install the same theme

git init
git submodule add https://github.com/onweru/newsroom themes/newsroom

If you are using different theme, just change the url and theme name in above command

Then open config.tom file

nano config.toml

and add following it in

theme = 'newsroom'

Create New Post

To create a new post on your website, navigate to the root directory of your website and run the following command

hugo new posts/your-post-name.md

This will create a new markdown file in the posts directory of your website, which you can edit with your content.

Configure Sidebar in the Site

Most Hugo themes come with a pre-configured sidebar that you can customize to display information about your website or blog. To configure the sidebar, I recommend you to watch the video, so that you understand better.

Create New Pages

In addition to blog posts, you may want to create other pages on your website, such as an about page or a contact page. To create a new page, navigate to the root directory of your website and run the following command

hugo new your-page-name.md

This will create a new markdown file in the root directory of your website, which you can edit with your content.

Create GitHub Repository

Now that you’ve built your website with Hugo, it’s time to deploy it to the web. The first step is to create a new GitHub repository to host your website. Log in to your GitHub account and click the "Create repository" button to create a new repository and create a repository with .github.io extension after your repository name and make sure that your repository name must be same as your GitHub username so that get a simple URL.

Setup GitHub with SSH in Terminal

To setup ssh with GitHub, you’ll need to set up SSH authentication, so go to your repository and then go to setting and click on "SSH and GPG key"

Then got to terminal and install openssh

pkg install openssh -y

Now execute following to create ssh key

ssh-keygen -t ed25519 -C "your_email"

It will ask you some question just keep entering to that.

Then execute following

eval "$(ssh-agent -s)"

Then just add the key, execute following to do that

ssh-add ~/.ssh/id_ed25519

Now just cat your key

cat ~/.ssh/id_ed25519.pub

Copy that and again go to github and click on New key and there give a title to it and paste the key you copied and save it.

then go to terminal, and execute following

git config --global "your_github_email"

git config --global "your_github_username"

git branch -M main

git remote add origin git@github.com:your-github-username/your-repository-name.git

Push Code to GitHub

Now that you’ve set up SSH authentication, you can push your code to your new GitHub repository. Just execute following

git add .

git commit -m "inititial commit"

git push origin main

Deploy it on GitHub

Once you’ve pushed your code to your GitHub repository, you’re ready to deploy your website. GitHub Pages is a free service provided by GitHub that allows you to host static websites directly from your GitHub repository.

To enable GitHub Pages for your website, navigate to the "Settings" tab of your repository and scroll down to the "GitHub Pages" section and change source to github actions and click "Save".

Then go to terminal and execute following

mkdir -p .github/workflows

Now create a file with hugo.yml

nano .github/workflows/hugo.yml

And paste following in it

# 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 one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.2
    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 Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"         
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        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@v1

And save the file

Then push it to to github

git add .
git commit -m "deploy"
git push

Access the Site

To access your website, simply visit the URL provided by GitHub Pages. Just go to your github repository -> setting -> pages and there you will find you website URL.

In conclusion, building a website with Hugo and deploying it on GitHub Pages is a great way to create a fast and flexible website that can be easily managed and updated. By following the steps outlined in this blog post, you can create a beautiful website that showcases your content and reflects your personal style.