Building a Minimalist Academic Blog with Hugo and GitHub Pages
1 Streamlining the setup workflow
1.1 Prerequisites
To host your blog on GitHub Pages, you should need a GitHub account.
While GitHub Pages officially recommends the Jekyll static site framework, it also support other frameworks, including Hugo.
1.2 Choosing a theme
Start by selecting a clean, informative blog theme. I choose ʕ•ᴥ•ʔ Bear Blog for its:
- Blazing-fast performance.
- Works seamlessly across devices.
- Minimalist philosophy.
Bear Blog offers two usage modes:
- Hosted service: Sign up on Bear Blog’s platform
- Self-hosted: Use the open-source hugo-bearblog Hugo theme.
I opted for the self-hosted approach. It gives me full control over customization and deployment, which aligns with my philosophy of mastering the entire pipeline.
1.3 Version control and deployment with Git and GitHub
Here is my workflow for setting up the blog repository:
Initialize a new Git repository.
Add the
hugo-bearblogtheme as a Git submodule.git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog.Copy the example configuration and content from hugo-bearblog/exampleSite at master · janraasch/hugo-bearblog into your project root.
Crucial step Automate deployment via GitHub Actions:
- In you repository, got to
settings->pagesand selectDeploy from a branchand set the source togh-pagesbranch. - Set up a workflow file (e.g., .github/workflow/build_depoly.yml). You can refer to my workflow here.
- Two common pitfalls to avoid:
- Forgetting to enable submodules in the checkout step,
- Missing write permissions for the deployment step.
- In you repository, got to
Once the workflow runs successfully, your blog will be live.
2 Personalizing your minimalist blog
Although Bear Blog embraces minimalism, a few tweaks can make it more personalized.
2.1 Custom favicon
A small but important detail: your site’s favicon (the icon shown in your browser taps).
- Choose a simple, recognizable icon in PNG format.
- Limit the file size under 5 KB to avoid slowing down page loads.
<< Previous Post
|
Next Post >>