After setting up Ghost for my personal website, I was looking for something a bit simpler. While Ghost is an incredibly powerful platform, it felt like an overkill for my needs—especially for a personal website.
I still have a soft spot for the straightforwardness of HTML and CSS, so I started scouting for alternatives that allow me to go back to that simplicity.
After a bit of digging around static site generators, I decided to go with Hugo. Given my familiarity with GitHub and the fact that it offers free hosting for static websites, it made sense to deploy my Hugo site using GitHub Pages.
I did consider Jekyll and Astro as alternatives, but then decided to go with Hugo.
Here's why I chose it over the likes of Jekyll and Astro:
- Speed: Hugo is known for its incredible build speed, which is a huge plus.
- Flexibility: The theming system in Hugo is rich and extensive.
- Built-In Features: Hugo comes with a lot of built-in functionalities that would require plugins in other platforms.
- Community: There is an active community and tons of resources to learn from.
Here are the steps I followed to get Hugo up and running using GitHub pages.
Let’s get started
To get going, I'll need to install Hugo and create a new site. Then, we'll move on to GitHub Pages setup.
Step 1: Install Hugo Locally
First, open the terminal and install Hugo on your local machine. You can find the installation instructions for your OS on Hugo's official website.
Step 2: Create a new Hugo Site
If you haven't already, create a new Hugo site:
Or navigate to your existing Hugo site directory.
Step 3: Run Hugo Server Locally
Before pushing anything to GitHub, let's run the site locally to make sure everything is set up correctly.
Visit http://localhost:1313/
in your browser to see your site.
Step 4: Initialize Git and Create GitHub Repository
Initialize a Git repository in your Hugo project folder and link it to a new GitHub repository.
Step 4: Add GitHub Actions Workflow
Create a folder named .github
and inside it another folder named workflows
. Then, create a new YAML file, for example, hugo.yml
. This is where your GitHub Actions workflow will be defined.
Copy and paste the GitHub Actions YAML configuration from Hugo's website into this file. Make sure to adjust the HUGO_VERSION
environment variable to match your Hugo version. Save the file.
Here's the one I ended up using -
Step 5: Push Workflow to GitHub
Add the .github
folder to your Git repository and push it to GitHub.
Step 6: Configure GitHub Repository
In your GitHub repository settings, go to the "Actions" tab to make sure the workflow is recognized. The action will trigger automatically upon your next push to the main
branch.

Step 7: Verify Deployment
After pushing any changes to your main
branch, go to the "Actions" tab in your GitHub repo to see the workflow in action. If it completes without errors, your site should be published to GitHub Pages.
Step 8: Access Your Site
Your site will be accessible at a URL based on your GitHub username and repository name, something like https://YourUsername.github.io/YourRepo/
.
Click on "Settings" tab, and then click on "Pages" on the sidebar. You should see the URL your site is live at.

And that's it! This setup will now automatically build and deploy your Hugo site to GitHub Pages every time you push to the main
branch.
Subscribe to our email newsletter and unlock access to members-only content and exclusive updates.
Comments