Awesome Open Source
Awesome Open Source


A simple and beautiful Hugo theme based on GitHub's Primer CSS | 日本語記事

This theme would be a perfect fit if you are used to GitHub style pages.
Hugo-Primer is a theme based on GitHub style css: Primer, and adds some blog like features onto it.

Try it now, and leave me a star if you like it!



  • [x] Primer css like theme
  • [x] Menu bar header
  • [x] Colored code pen
  • [x] Math inline
  • [x] Awesome TOC
  • [x] Tags & Categories
  • [x] Social Share buttons


Clone to your theme directory:

git clone themes/hugo-primer

hugo server --theme=hugo-primer



You can refer to exampleSite/ to get started. Reading exampleSite/ is good too.

For a quick start:

cp -av themes/hugo-primer/exampleSite/* .



You can configure Hugo-Primer behavior with these params in your blog's config.toml. Shown are defaults and most recommended configs.

# config.toml

hasCJKLanguage = true
# Code pen
pygmentsCodeFences = true
pygmentsUseClasses = true

# Enter a copyright notice to display in the site footer.
# To display a copyright symbol, type `©`.
copyright = ""

# Chose Social Sharing Buttons you want to use.
shareTo = ["Twitter", "Hatena", "Facebook", "Pocket"]
# You may disable copyright sentence by setting this to false.
showFooterCredits = true

That being said, below is all recommended configuration example.

# config.toml

baseURL = "https://your_web_site"
title = "Your Blog"
theme = "hugo-primer"
languageCode = "ja"
# If you are using Chinese, Japanese, or Korean, I highly recommend you to set this true.
hasCJKLanguage = true
summaryLength = 70
# Code pen
pygmentsCodeFences = true
pygmentsUseClasses = true
googleAnalytics = "U-12345678-0"

# Enter a copyright notice to display in the site footer.
# To display a copyright symbol, type `©`.
copyright = "©Your Name 2019"

# update sitemap.xml's lastmod datetime by file change time, instead of git.
lastmod = ["lastmod", ":fileModTime", ":default"]

description = "Describe what your web page is about"
twitter = "your_twitter_id"
# You can use favicon by adding `favicon-64.png` to `static` directory.
# You can also add `apple-touch-icon.png` and `pinned-icon.svg`.  
useIcon = true
useTwitterCard = true
# Use MathJax.js. Disabling site-wide and you still can enable in indivisual pages
math = true

shareTo = ["Twitter", "Hatena", "Facebook", "Pocket"]
showFooterCredits = true


It is also recommended to remove your site's archetypes/, or copy Hugo-Primer's archetypes/ to your site.

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true

page-level params

hugo-primer also comes with some custom page level parameters

  • showDate (default: true)
    shows the date on a post

  • comments (default: true)
    setting to false will hide disqus comments

  • toc (default: true)
    display the table of contents

  • categories (default: an empty list)
    a list of categories to display in the sidebar

  • tags (default: an empty list)
    a list of tags to display in the sidebar

  • math (default: false)
    If math.js is disabled for the site you can use this setting to enable it for a single page

  • keywords (default: an empty list)
    This adds a metatag to the page for listing keywords. This can be useful for SEO.

Example usage where the defaults are overridden:

showdate: false
comments: false
toc: false
- Diary
- Shopping
- Health
math: true
- Cheese
- Milk

ruby annotation

ruby annotation allows you to show pronunciation of characters. Ruby in hugo-primer is like this:


You just need one line shortcodes code:

{{< ruby rb="深表遗憾" rt="Xi Wen Le Jian" >}}

{{< ruby rb="My heart is broken." rt="I'm happy for that." >}}


Issues and PRs are welcome. :)



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Html (419,904
Theme (6,115
Hugo (1,805
Hugo Theme (530
Hugo Site (277
Related Projects