How to Create a Workflow for HUGO Website hosted on GitHub Pages

Nuttaphat Arunoprayoch — Wed, 10 Nov 2021 02:34:30 +0000

Creating websites should be an easy task that takes a little effort. I used to build my own website from scratch using HTML, CSS, and JS. Though I have learned a lot from that, it was a time-consuming process; so, I was looking for a better approach to save time.

Then I came across HUGO, it's basically a framework to create websites, and it works fantastically. We can just write content on Markdown files and run Hugo command to generate a website automatically. Moreover, there are a great selection of themes available.

Now, I had a website ready to be deployed. Where should I host it? Of course, I did not want to spend a dime and keep paying for hosting. Eventually I decided to use GitHub Pages where you can host your content directly from your repository.

I had a website in a repository ready to go. However, my website was not generated automatically when I commit changes to the repository. That's when GitHub Actions came into play.

My Workflow

My purpose was to re-generate the website every time I commit changes to the repository; by this way, my content will be up-to-date.

Luckily, there is a workflow for it. By implementing peaceiris/actions-hugo@v2 on my GitHub workflow, I was able to achieve what I wanted to do. Simple as that.

This workflow saves me a great deal of time, and helps me focus more on actual development.

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

https://github.com/nat236919/nat236919.github.io

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Hack(Spam?)toberfest

Nuttaphat Arunoprayoch — Thu, 22 Oct 2020 01:57:50 +0000

What I Learned From Hacktoberfest

I was having fun working on different interesting projects, It surely opened a wider door for open-source communities to global networking and collaboration.

However, let's talk about the elephant 🐘 in the room...

Hack(Spam?)toberfest

While it has been encouraging developers to get into open-source development, a Hacktoberfest shirt offers a sweeter taste.

It turns out that there are a ton of spam PRs from newly-registered accounts all over the place. Okay, this is not new but it is just simply ugly. Of course, an attempt was made to prevent this from happening; I do appreciate it.

I just wanted to point out that it saddens me as a developer to see this behaviour.

Examples

.
.
.
Let's do it better and properly next time

P.S. Save READMD.md, Save the World

DEV Community: Nuttaphat Arunoprayoch

How to Create a Workflow for HUGO Website hosted on GitHub Pages

My Workflow

Submission Category:

Yaml File or Link to Code

Hack(Spam?)toberfest

What I Learned From Hacktoberfest

Hack(Spam?)toberfest

Examples