• DigitalOcean Account

Create Dockerfile

Create the Dockerfile on your site root.

Our starter template already includes the Dockerfile.

 1###############
 2# Build Stage #
 3###############
 4FROM hugomods/hugo:exts as builder
 5
 6COPY . /src
 7
 8ENV HUGO_ENV=production
 9
10# Base URL
11ARG HUGO_BASEURL=
12ENV HUGO_BASEURL=${HUGO_BASEURL}
13
14# Module Proxy
15ARG HUGO_MODULE_PROXY=
16ENV HUGO_MODULE_PROXY=${HUGO_MODULE_PROXY}
17
18# NPM mirrors, such as https://registry.npmmirror.com
19ARG NPM_CONFIG_REGISTRY=
20ENV NPM_CONFIG_REGISTRY=${NPM_CONFIG_REGISTRY}
21
22# Install dependencies
23RUN npm ci
24
25# Build site
26RUN hugo --minify --gc --enableGitInfo
27
28# Set the fallback 404 page if defaultContentLanguageInSubdir is enabled, please replace the `en` with your default language code.
29# RUN cp ./public/en/404.html ./public/404.html
30
31###############
32# Final Stage #
33###############
34FROM hugomods/hugo:nginx
35COPY --from=builder /src/public /site

• The /site is the output directory of static files, which will be used later.

Create App

Navigate to DigitalOcean Dashboard -> Left Panel -> Apps -> Create App, and then fill up the form as follows.

Algolia is a popular search service that provides free plan (10k records, 10k requests per month). After reading this article, you will learn how to configure Algolia and automatically upload index files.

You can add your own translations on: hugo-theme-bootstrap/i18n

• 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/posts/markdown-syntax/Mon, 09 Nov 2020 00:00:00 +0000https://hbs.razonyang.com/v1/en/posts/markdown-syntax/Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

]]>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>