タグ : Hugo
Congo Theme Overview
Install Congo theme with the default configuration and the example site. Congo theme is built with TailwindCSS 3.2.
Hugo Overview
Hugo is a static site generator made by Go. It’s the fastest SSG to embrace JAMstack.
Building a Basic Theme
Although we can place all layouts into the layouts folder, we can also place these layouts into the themes folder to build our theme.
Creating index.html for Home Page Layout
Since home page has a different look than other content page, Hugo uses a separate layout layouts/index.html for the home page to generate.
Understanding Archetype
Archetype is the template to create a markdown file. We can add more page variables for our convenience.
Creating list.html for List Page Layout
When using hugo new to create many markdown files for a section, Hugo uses layouts/_default/list.html as the default list page layout to generate.
Integrating HATstack with Hugo
Hugo is great for JAMstack, but we have to use vanilla JavaScript and CSS to create templates. With Alpine and TailwindCSS, we can create layouts by declarative style directly in HTML.
Cleaning Up the public Folder
Hugo doesn’t clean up the public folder. If you were to remove some pages or rename them, you would need to delete the generated versions from the public folder as well.
Creating single.html for Single Page Layout
When using hugo new to create a markdown file, Hugo uses layouts/_default/single.html as the default single page layout to generate.
Using Go Template for Hugo in WebStorm
Since Hugo uses Go template language, we can install the Go Template plugin developed by JetBrains for layout.
Using Hugo Variables with Alpine
Not only using Hugo’s variables with Go template language, but also Alpine’s directive.
Minimizing HTML under Production
Minimizing HTML is provided by Hugo. We can minimize HTML under production.
Integrating Petite-vue with Hugo
Petite-vue is great for JAMstack, but we have to integrate Petite-vue with Hugo manually.
Integrating Alpine with Hugo
Alpine is great for JAMstack, but we have to integrate Alpine with Hugo manually.
Integrating TailwindCSS with Hugo
TailwindCSS is great for JAMstack, but we have to integrate TailwindCSS with Hugo manually.
Relationship between dot, Site and Page Context
There are scope and context concepts in the Go template language. This post explains why we have to use . to access site variables and page variables.
Using range to Iterate over an Array
The Go Templates make heavy use of range to iterate over a Map, Array, or Slice.
Using JSON File to Store Custom Data
For site-level custom data, we can store them on the .json file in the data folder.
Using Site Variables to Store Custom Data
For site-level custom data, we can store them on the params section of config.json.
Site Variable Overview
We can define site variables in config.json and access them by Go template language.
Using .Content to Access Markdown Content
We can use .Content page variable to access Markdown content.
Using relref to Get Relative Permalink
We can use relref to get the relative permalink to a page for the href attribute of <a>.
Using ref to Get Absolute Permalink
We can use ref to get the absolute permalink to a page for the href attribute of <a>.
Using pipe for Function Pipeline
We can use the | operator to compose multiple functions for Function Pipeline.
Using markdownify to transform Makrdown to HTML
If we use Markdown to define a variable, we can use markdownify to transform Markdown to HTML.
Using humanize to Capitalize the String
Hugo provides humanize function to make a String with the first letter capitalized.
Using with to Change the Context
We can use with to change the context and . as the context variable.
Using .Param to access User-defined Variable
For user-defined variable, we can either define it as site variable or page variable. $.Param reads page variable first. If it doesn’t exist, then read site variable.
Using default to Provide the Default Value
We can use default to provide the default value of the template variable instead of using if else.
Using if else for Truthy Value
We can use if else for truthy/falsy value in Go template language.
Hugo Template Overview
One strength of Hugo is a clear separation of concerns between data (Markdown) and layout (HTML).
The resources Folder of Hugo
resources folder is not created by default. It is created only when hugo server command is issued. Should I delete or git ignore this folder?
Hugo Folder Structure Explained
After using hugo new site to create a new Hugo site, Hugo CLI create the default folder structure for us. This post will explain the folder structure.
How to use JSON as Hugo Config ?
Since Hugo is developed by Go, it uses TOML as Hugo config file. But we can still use JSON as Hugo Config.
.gitignore for Hugo
As for using Git for Hugo, some files don’t need to be controlled by Git. We can create .gitignore to ignore them.