Github Style Plus

This is a fork from 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
2. Support reading time estimation
3. Display your real github followers stats
4. Add sponsor link button
5. Keyword search locally
6. Clickable day contributions
7. Support custom css file
8. Support previous and next post
9. Show more button
10. Update old Google Analytics to GA4
11. Support GTM Script
12. Custom organizations block

Demo

First, take a look at my blog, it's the completely demo for this theme.

Usage

Init hugo site

hugo new site mysite
cd mysite

Install the theme

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

cd themes/github-style-plus
git pull

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

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.

Support reading time estimation

This feature evaluates the reading time of every post and shows the count of words.

The evaluation formula referenced here.

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.

---

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

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

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.

Support custom css file

If you want to use some custom style, create a style file in static folder.

Then, set file path in config.toml file.

---

Support previous and next post

---

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.

---

Update old Google Analytics to GA4

Since the old Google Analytics is being retired. I've change the old GA code to GA4.

---

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

---

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:

And the effect would look like:

Config Example

@see config.template.toml