• Performance
• Friendly User Experience
• SEO

Features

• Hugo Pipes: used to generate CSS and JS assets.
• PurgeCSS: remove unused CSS.
• Flexible and Configurable.
• Fast and Good User Experience: Google PageSpeed Insights’s score is over 95.
• RTL support: Arabic demo site.
• Built on top of Bootstrap 5.
• FontAwesome icons.
• Responsive.
• PWA, AKA progressive web apps.
• Various Palettes: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.
• A Docs Layout for publishing project documentation, notes, digital gardens, zettelkastens etc.
• Light/Dark Mode.
• Font Size Switcher.
• Multilingual(I18N).
• Local Search.
• DocSearch.
• Pinning Posts.
• Footer Menu.
• Code Block Panel: copy code, line number, line wrap and expand.
• Code Toggle
• Breadcrumb.
• Archive.
• Image Viewer.
• Image Processing: resize and align images.
• Resources Lazy Loading: image and iframe.
• Syntax Highlighting.
• Reward Widget, AKA Buy Me a Coffee: any platform that supports QR code is supported.
• Table of Contents.
• Comments: Disqus, Utterances, Giscus and Staticman can be used out of box, you can also integrate with other comments services.
• Custom Assets: custom CSS and JS.
• Hooks: provides ability to add custom code on page.
• Social Links.
• Various Shortcodes.
• Twitter Cards and Open Graph.
• Creative Commons License.
• Contact Form.
• Numberify Headings Automatically.

Proxy (Optional)

If you’re located at China mainland without VPN, the Hugo module download may fail.

There are two proxies for this: GOPROXY.CN and GOPROXY.IO.

1$ export HUGO_MODULE_PROXY=https://goproxy.cn

Please note that, Hugo doesn’t respect the GOPROXY env var, please use HUGO_MODULE_PROXY instead.

You can also set the module.proxy instead of using env var.

The mainSections parameter is used to filter pages, default to ["posts", "docs"].

1mainSections = ["blog", "posts", "docs", "notes"]

Front Matter

Front Matter is the place where we put page metadata and parameters, such as title, date and so on.

Formats

Hugo supports three formats of front matter: YAML, TOML and JSON.

• TOML: identified by opening and closing +++.
• YAML: identified by opening and closing ---.
• JSON: a single JSON object surrounded by { and }, followed by a new line.

Let’s take TOML as an example:

Create a New Site from Scratch

1$ git clone https://github.com/razonyang/hugo-theme-bootstrap-skeleton myblog
2$ cd myblog
3$ git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
4$ sed -i "s/theme:.*/theme: hugo-theme-bootstrap/g" config/_default/config.yaml
5$ rm go.mod go.sum
6$ hugo mod npm pack
7$ npm install
8$ hugo server

If you’re using Windows, use xcopy .\themes\hugo-theme-bootstrap\exampleSite /E instead.

]]>https://hbs.razonyang.com/v1/en/docs/image-viewer/Fri, 03 Dec 2021 20:46:50 +0800https://hbs.razonyang.com/v1/en/docs/image-viewer/<p>Image viewer is an image gallery, it will be shown up when you click a non-linkable image.</p> <p>It also provides many tools, such as zoom in, zoom out and rotate.</p>https://hbs.razonyang.com/v1/en/docs/look-and-feel/Fri, 03 Dec 2021 19:42:57 +0800https://hbs.razonyang.com/v1/en/docs/look-and-feel/<p>By default, a site using this theme has the default fonts, colors, and general look and feel. However, the default scheme cannot satisfy everyone, but don&rsquo;t worry, you can easily override the theme defaults, such as palette colors, fonts, syntax highlighting.</p>https://hbs.razonyang.com/v1/en/docs/pwa/Fri, 03 Dec 2021 19:39:01 +0800https://hbs.razonyang.com/v1/en/docs/pwa/PWAs(Progressive web apps) are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.

HBS provides some basic features, such as install site to home screen, precache files and available offline.

]]>https://hbs.razonyang.com/v1/en/docs/layouts/archives/Fri, 03 Dec 2021 11:16:51 +0800https://hbs.razonyang.com/v1/en/docs/layouts/archives/<p>The archive page is a collection of posts grouped by year.</p>https://hbs.razonyang.com/v1/en/docs/layouts/search/Fri, 03 Dec 2021 11:16:51 +0800https://hbs.razonyang.com/v1/en/docs/layouts/search/<p>It may be difficult for readers to retrieve an article in the case if there are many articles in your site, therefore, we added the search feature.</p>https://hbs.razonyang.com/v1/en/docs/widgets/author/Fri, 03 Dec 2021 11:10:19 +0800https://hbs.razonyang.com/v1/en/docs/widgets/author/<p>The author widget is located in the sidebar, in order to introduce yourself briefly.</p>https://hbs.razonyang.com/v1/en/docs/widgets/reward/Fri, 03 Dec 2021 11:10:19 +0800https://hbs.razonyang.com/v1/en/docs/widgets/reward/The reward widget, AKA buy me a coffee widget, gives the readers a way to support a creator through the use of donations or tips.

However, it limited to the QR code image, please take a look at the funding widget.

]]>https://hbs.razonyang.com/v1/en/docs/widgets/social-links/Thu, 02 Dec 2021 16:27:45 +0800https://hbs.razonyang.com/v1/en/docs/widgets/social-links/<p>The <code>social</code> parameter is a set of key value pairs of social links that mapping from platform to their user identifier. It supports many popular social platforms, such as Twitter, Facebook, Reddit, GitHub. This article lists all supported platforms and how to use them.</p>https://hbs.razonyang.com/v1/en/docs/layouts/contact/Tue, 30 Nov 2021 23:56:00 +0800https://hbs.razonyang.com/v1/en/docs/layouts/contact/<p>We can put our email address on <a href="https://hbs.razonyang.com/v1/en/docs/widgets/social-links/">social links</a> so that readers can contact us. Unfortunately, emails will be more or less treated as spam and even filtered. Therefore, we bring a feature called contact form.</p>https://hbs.razonyang.com/v1/en/docs/advanced/custom-assets/Sun, 28 Nov 2021 16:00:49 +0800https://hbs.razonyang.com/v1/en/docs/advanced/custom-assets/<p>As a customizable theme, it provides the ability to customize assets, whether it is customizing CSS and JS or introducing third-party CSS and JS.</p>https://hbs.razonyang.com/v1/en/docs/widgets/comments/Sat, 27 Nov 2021 19:54:29 +0800https://hbs.razonyang.com/v1/en/docs/widgets/comments/Disqus, Utterances and Giscus comments widgets are supported out of box. This article shows how to configure them and even customize your own comment widgets.

]]>https://hbs.razonyang.com/v1/en/docs/get-involved/Sat, 27 Nov 2021 19:54:29 +0800https://hbs.razonyang.com/v1/en/docs/get-involved/<p>We are happy to listen to your opinions and feedback, and welcome you to get involved.</p>https://hbs.razonyang.com/v1/en/docs/advanced/hooks/Sat, 27 Nov 2021 19:54:29 +0800https://hbs.razonyang.com/v1/en/docs/advanced/hooks/<p>As a flexible theme, it should have the ability to customize code and integrate third-party services. Therefore, we brought a feature called hook.</p> <p>In this article, we will introduce all hooks and provide some use cases.</p>https://hbs.razonyang.com/v1/en/docs/configuration/page-params/Sat, 27 Nov 2021 19:53:24 +0800https://hbs.razonyang.com/v1/en/docs/configuration/page-params/Page parameters are located in page’s Front Matter.

]]>https://hbs.razonyang.com/v1/en/docs/configuration/site/Sat, 27 Nov 2021 19:53:24 +0800https://hbs.razonyang.com/v1/en/docs/configuration/site/<p>The site configuration is located in <code>config/_default/config.toml</code> by default.</p>https://hbs.razonyang.com/v1/en/docs/configuration/site-params/Sat, 27 Nov 2021 19:53:24 +0800https://hbs.razonyang.com/v1/en/docs/configuration/site-params/<p>The site parameters are located in <code>config/_default/params.toml</code> by default.</p>https://hbs.razonyang.com/v1/en/docs/configuration/structure/Sat, 27 Nov 2021 19:53:24 +0800https://hbs.razonyang.com/v1/en/docs/configuration/structure/As the example site shown, we use Configuration Directory to maintain easier organization and environment specific settings, it is especially useful on multilingual sites.

]]>https://hbs.razonyang.com/v1/en/posts/diagram/Wed, 01 Sep 2021 11:36:50 +0800https://hbs.razonyang.com/v1/en/posts/diagram/This article offers a sample of basic diagram usage that can be used in Hugo content files.

Please see also Mermaid.

]]>https://hbs.razonyang.com/v1/en/docs/image-processing/Sun, 15 Aug 2021 14:19:06 +0800https://hbs.razonyang.com/v1/en/docs/image-processing/<p>This article offers some use cases for showing how to resize, crop, fit, fill and align images.</p>https://hbs.razonyang.com/v1/en/docs/shortcodes/alert/Thu, 22 Oct 2020 00:00:00 +0000https://hbs.razonyang.com/v1/en/docs/shortcodes/alert/<p>This article shows how to use the <code>alert</code> shortcode.</p>https://hbs.razonyang.com/v1/en/docs/shortcodes/media/Thu, 22 Oct 2020 00:00:00 +0000https://hbs.razonyang.com/v1/en/docs/shortcodes/media/<p>A detailed description of media shortcodes, such as Bilibili, Tencent, Youku, iQiyi and Netease Music.</p>https://hbs.razonyang.com/v1/en/docs/shortcodes/online-ide/Thu, 22 Oct 2020 00:00:00 +0000https://hbs.razonyang.com/v1/en/docs/shortcodes/online-ide/<p>A detailed description of online IDE shortcodes, such as JSFiddle, CodePen, JSRun.</p>