Jun Gu's Blog ʕ→ᴥ← ʔ

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:

  1. Blazing-fast performance.
  2. Works seamlessly across devices.
  3. Minimalist philosophy.

Bear Blog offers two usage modes:

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:

  1. Initialize a new Git repository.

  2. Add the hugo-bearblog theme as a Git submodule. git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog .

  3. Copy the example configuration and content from hugo-bearblog/exampleSite at master · janraasch/hugo-bearblog into your project root.

  4. Crucial step Automate deployment via GitHub Actions:

    1. In you repository, got to settings -> pages and select Deploy from a branch and set the source to gh-pages branch.
    2. Set up a workflow file (e.g., .github/workflow/build_depoly.yml). You can refer to my workflow here.
    3. Two common pitfalls to avoid:
      1. Forgetting to enable submodules in the checkout step,
      2. Missing write permissions for the deployment step.

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).

  1. Choose a simple, recognizable icon in PNG format.
  2. Limit the file size under 5 KB to avoid slowing down page loads.

<< Previous Post

|

Next Post >>

#Blog #GitHub