HugoBlog

github-style-plus — Hugo Blog Template

By kurt-liao

A Hugo blog theme forked from github-style, retaining the GitHub look while adding pinned and recent posts on the same screen, reading time, local search, clickable contribution graph, custom CSS, and more.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

Pinned posts and recent posts displayed together on the same page

Each post shows estimated reading time and word count

Local keyword search implemented via Hugo RSS-generated index.xml

Annual contribution graph is clickable by day, showing posts published that day

Supports custom CSS files, custom organization blocks, and sponsor link buttons

Integrates GA4 and GTM scripts, and provides previous/next post navigation

Template Details

github-style-plus is a Hugo blog theme maintained by kurt-liao, forked from MeiK2333's github-style branch, with a page appearance that follows the GitHub style. The repository documentation only covers features added relative to the original; for basic usage, refer to the original repository.

The added capabilities focus on content display and site configuration: pinned posts and recent posts can be displayed simultaneously; each post shows reading time and word count; keyword search is supported locally via the Hugo-generated RSS (index.xml); the annual contribution graph is clickable to view posts published on that day; previous/next post navigation is provided at the bottom of each post; and the homepage hides most posts by default, expanding them via a "Show More" button.

For site information and integrations, the real GitHub follower count can be displayed, a sponsor link button can be added, a custom organization block can be configured, custom CSS files are supported, and the legacy Google Analytics is updated to GA4, with GTM script support as well.

Usage limitations: after installation, the content directory must be renamed from posts to post; local search depends on both params.rss and params.enableLocalSearch being enabled. The theme uses the MIT license, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services like domains and hosting may incur additional charges.

HugoBlog

Is it right for your project?

Use Cases

Hugo sites that want a blog appearance close to a GitHub profile page
Needing to highlight both pinned and latest posts on the homepage
Wanting to search posts locally without relying on external search services
Needing to display GitHub follower count, sponsorship entry, or custom social organization links
Needing to integrate GA4 or GTM for traffic analytics

Suitable For

Developers using Hugo to build personal blogs who prefer the GitHub visual style
Writers who need enhanced features such as pinned posts, reading time, and local search
Users willing to adjust config.toml according to the documentation and accept renaming the posts directory to post

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
First run hugo new site to create a site, then add the theme to themes/github-style-plus as a git submodule
2
After installing or updating, rename the content directory content/posts to content/post
3
To enable local search, set both params.rss = true and params.enableLocalSearch = true
4
To display GitHub followers, set enableGithubFollowers = true and fill in the github account
5
For custom CSS, place the style file in the static directory and configure the path in config.toml

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version's code are permitted.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

After installing or updating the theme, the content directory content/posts must be renamed to content/post, otherwise posts may not display properly.
Local keyword search depends on the Hugo-generated RSS (index.xml), and params.rss = true must first be set in the configuration.
Local search is disabled by default and requires additionally setting params.enableLocalSearch = true to enable it.
Displaying the real GitHub follower count requires setting enableGithubFollowers = true and filling in the github account; this feature depends on the external GitHub service.
Using the GTM script requires configuring gtmId in config.toml, which involves the external Google service.
Demo images, fonts, icons, and other third-party assets require license verification according to their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

you need to rename the previous `posts` folder to `post`
Original README

make sure you have set `params.rss = true`
Original README

there's another parameter you need to set to true to enable: `params.enableLocalSearch = true`
Original README

please set `enableGithubFollowers = true` and your github account like `github = kurt-liao`
Original README

just add `gtmId = "xxx"` in your *config.toml* file
Original README

https://github.com/kurt-liao/github-style-plus/blob/main/LICENSE https://github.com/kurt-liao/github-style-plus/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 81 / 100
Technologies: Hugo
Website type: Blog

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2024-11-14
Screenshot last checked: 2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 53b9aea5aac85ff6c5ad09c55e2d44e9d80c86fffbbb2c38502bf68d6a967630

2026-10-02T10:15:21.315Z

Source file / repository

# Github Style Plus

This is a fork from [github-style](https://github.com/MeiK2333/github-style) with some additional features that I made.

> In this repo, the documentation only introduce additional features.
> For more information about basic usage, please follow the original repo.

## Quick guide

### New features in this fork version:

1. [Pinned posts and recent posts show together](#pinned-posts-and-recent-posts-show-together)
2. [Support reading time estimation](#support-reading-time-estimation)
3. [Display your real github followers stats](#display-your-real-github-followers-stats)
4. [Add sponsor link button](#add-sponsor-link-button)
5. [Keyword search locally](#keyword-search-locally)
6. [Clickable day contributions](#clickable-day-contributions)
7. [Support custom css file](#support-custom-css-file)
8. [Support previous and next post](#support-previous-and-next-post)
9. [Show more button](#show-more-button)
10. [Update old Google Analytics to GA4](#update-old-google-analytics-to-ga4)
11. [Support GTM Script](#support-gtm-script)
12. [Custom organizations block](#custom-organizations-block)

## Demo

First, take a look at my [blog](https://blog.kurtstories.com/), it's the completely demo for this theme.

## Usage

### Init hugo site

```bash
hugo new site mysite
cd mysite
```

### Install the theme

```bash
git submodule add [email protected]:kurt-liao/github-style-plus.git themes/github-style-plus
```

### Update the theme

If you just installed the theme, it is already in the latest version. If not, you can update using the below commands

```bash
cd themes/github-style-plus
git pull
```

Then, you need to rename the previous `posts` folder to `post`

```bash
cd <you-project-folder>
mv content/posts content/post
```

## New features✨

### Pinned posts and recent posts show together

In the original version, only one of *Pinned* block and *Recent* block will be shown.
In this version, both blocks will display together.

![2022-09-02_10-15](https://user-images.githubusercontent.com/32745146/188045141-12f720d0-bb7e-4383-8cca-675be98692d7.png)
---

### Support reading time estimation

This feature evaluates the reading time of every post and shows the count of words.
>The evaluation formula referenced [here](https://kodify.net/hugo/strings/reading-time-text/).

![2022-09-02_10-26](https://user-images.githubusercontent.com/32745146/188046079-2c001f05-7e83-420b-8fd3-f810c28284d0.png)
---

### Display your real github followers stats

To show real github followers count, please set `enableGithubFollowers = true` and your github account like `github = kurt-liao` in *config.toml* file.

![](https://i.imgur.com/LkBFrVF.jpg)


![](https://i.imgur.com/htrKTFN.jpg)

---

### Add sponsor link button

Set your sponsor link in **config.toml** like `sponsorLink = "https://www.buymeacoffee.com/vermouth02D"` and the button will show on the page.

For me, I put the [buymeacoffee](https://www.buymeacoffee.com/vermouth02D) link.

![2022-09-02_10-39](https://user-images.githubusercontent.com/32745146/188047984-c40e8bb7-9af5-4601-b613-d636d5a81415.png)
---

### Keyword search locally

Searching in personal site might be important with a growing number of articles.
This feature uses hugo rss that generate `index.xml` feed file, so make sure you have set `params.rss = true`
Since somebody might not want to use this feature, there's another parameter you need to set to true to enable: `params.enableLocalSearch = true`

![](https://i.imgur.com/9k70xpQ.jpg)


![ezgif com-gif-maker](https://user-images.githubusercontent.com/32745146/187828206-829830a4-3fac-40e3-8bcb-399a98b01680.gif)
---

### Clickable day contributions

Make yearly-contributions graph clickable like github does. When you click on specific day, it will show you the posts added that day.

![Clickable day contributions](https://i.imgur.com/pSJi4KB.gif)
---

### Support custom css file

If you want to use some custom style, create a style file in **static** folder.
![](https://i.imgur.com/BgbVvrH.jpg)


Then, set file path in *config.toml* file.
![](https://i.imgur.com/tZHHcgL.jpg)

---
### Support previous and next post

![](https://i.imgur.com/RbYKDnS.jpg)

---

### Show more button

For the speed of page loaded in the first paint, I decide to hide most of posts when the page first loaded.
![](https://i.imgur.com/0cGT1Qx.gif)

---

### Update old Google Analytics to GA4

Since the old Google Analytics is being retired. I've change the old GA code to GA4.
![](https://i.imgur.com/bpCFD6N.png)

---

### Support GTM Script

Apart from Google Analytics, we may also want to add GTM Script.
To do this, just add `gtmId = "xxx"` in your *config.toml* file

![](https://i.imgur.com/iEVBm98.jpg)

---

### Custom organizations block

You may want to set some custom organizations except Github, Twitter, Facebook...
Therefore, I've add the custom organization block for you to do so.
The settings in *config.toml* might look like this:

![](https://i.imgur.com/e6sFTIp.png)

And the effect would look like:
![](https://i.imgur.com/4bd3KRx.jpg)

## Config Example

@see [config.template.toml](/config.template.toml)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

hugo-PaperMod

A fast, clean, responsive Hugo theme for blogs and lightweight portfolios, with three layout modes (Regular, Home-Info, Profile), automatic and manual light/dark themes, Fuse.js client-side search, multilingual support, and built-in Open Graph, Twitter Cards, and Schema.org data.

Hugo · Portfolio

LoveIt

LoveIt is a clean, elegant, and feature-rich Hugo blog theme derived from LeaveIt and KeepIt, MIT-licensed. It offers light/dark modes, responsive layout, multilingual support, and search via Lunr.js or Algolia.

Hugo · Blog

hugo-coder

hugo-coder is a minimalist Hugo blog theme maintained by luizdepra under the MIT license. It provides a clean, text-focused blog appearance, configuration documentation in the docs directory, and a complete exampleSite with hugo.toml.

Hugo · Blog

blowfish

Blowfish is a Hugo personal website and blog theme built with Tailwind CSS 4, focused on lightness, simplicity, and content-first presentation.

Hugo · Blog

hugo-paper

hugo-paper is a simple, clean, and customizable Hugo blog theme configured through config.toml or hugo.toml.

Hugo · Blog

hextra

Hextra is a Hugo theme for documentation and blog sites, built on Hugo and Tailwind CSS with design referencing Nextra.

Hugo · Documentation