hongtaoh/hugo-ht

hugo-ht: a hugo "theme" that powers my personal website.

HUGO HT

A simple hugo theme suitable for bilingual personal blogs. It is a copy of my personal website.

Example site

People

• Kristen Zhang
• Ashley
• Zhijie

Shoulders of the giants

Hugo-ht is heavily built on others' amazing work:

• The base of Hugo-ht is Yihui Xie's hugo-xmin

• The design of navigation bar and footer texts is copied from the theme of Lithium by Jonathan Rutheiser

• Styles of body texts are based on typo.css by xiangming

• The style of table of contents is based on that of Zachary Betz's personal blog.

• Custom blocks are based on the CSS of Bookdown by Yihui Xie

Besides, Daijiang Li's personal website helped me a lot.

Blog tutorial

If you read Chinese, consult the website-building tutorial I created.

Installation

Navigate to the root of your hugo project and run:

cd themes
git clone https://github.com/hongtaoh/hugo-ht
mkdir hugo-ht-new
cp -r hugo-ht/* hugo-ht-new
rm -rf hugo-ht
mv hugo-ht-new hugo-ht
cd .. 

Submodule

Or you can add hugo-ht as a submodule:

git submodule add https://github.com/hongtaoh/hugo-ht themes/hugo-ht
cp -r themes/hugo-ht/exampleSite/* .
cp -r themes/hugo-ht/archetypes . 

The difference between the two methods is that if you add it as a submodule, the hugo-ht theme you use is connected to this repository. The benefit is that you can keep it updated, but there is a caveat: if you make lots of changes to the styles based on your personal preferences, these changes might be lost.

Simply git clone is recommended if:

• You pretty satisfied with the current version of hugo-ht; and/or

• You are going to make changes according to your personal taste; and/or

• You are not familiar with Git and do not know how to update the submodule.

To update the submodule, run the following codes at the root directory of your hugo project:

cd themes/hugo-ht
git checkout main && git pull
cd ..
git add hugo-ht
git commit -m "updating submodule to latest"
cd ..

The above codes came from paularmstrong.

Customize

Editing config.toml

• Edit baseURL

• Edit USERNAME AND REPONAME associated with github

• params.lang.author: edit Your Name

Language mode

If you want to use a single language in the menu. Make sure there are folders within the content folder. Let's say you have about and posts.

1. Edit thems/hugo-ht/layouts/partials/nav.html

Change the codes between

and

to:

{{ $currentPage := . }}
{{ $section := replaceRE "^/([^/]+)/.*" "$1" .Permalink }}
{{ range (default .Site.Menus.main (index .Site.Menus $section)) }}
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
{{ end }}

The above codes came from Daijiang Li's blog.

2. Edit config.toml

Delete all the codes with [[menu.en]] and [[menu.cn]]. Add codes like:

[[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
[[menu.main]]
    name = "About"
    url = "/about/"
    weight = 2
[[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 3

Then uncomment # singleLang = true.

Notice

In config.toml, please make sure blogDirNmae matches the name used in menu:

License

Codes are available under the MIT License.

hugo-ht's Issues

中英文订阅是分离的？

个人挺喜欢 hugo-ht 这个主题的，后知后觉才发现居然是你自己设计的……先点个赞👍

我之前用 Feedly 订阅了你的网站（英文版），今天刷的时候发现没有中文版的内容，才发现中英文是独立的：

• https://hongtaoh.com/en/blog/index.xml
• https://hongtaoh.com/cn/blog/index.xml

不知是否是有意而为之，留一个 issue 提醒一下吧。