New Article

Oh when we just got some new trash talk tutorial whatever I want to share with the world. In the git repo open the content folder, open the en folder, then depending if it is a how to or a thinking/opinion article we create a new .md file within the according folder.

We give it the frontmatter(header for hugo with parameters) with title, summary, date, tags, canonical_url and lang.

Then we can just write in Markdown style whatever we want. When finished translate to other languages into respective folder, do not forget to set the lang param in frontmatter correct - otherwise the page won’t appear.

Test with hugo

hugo server --watch --poll=1000ms -D --disableFastRender

Build with hugo

hugo --minify

Refresh files on server and done

Setup

Super fast setup of a basic blog. Just install hugo add a theme, done you have a stable working Blog.

Config.toml and content folder file structure

So you want to configure the whole website in a central place the config.toml (It can also be YAML). In here you define several variables/parameters, which are used by hugo and/or the theme for the logic, texts, main menu and file structure.

My setup is a classic i18n setup, since i want to publish at least in english and german. The content is in the content folder^^ In there we got for each supported language a folder, e.g. de or en. Then we can have for each folder also for the root, e.g. en, a section file (_index.md) and we can have single pages, like the actual one.

Section pages list by default all single pages within the same folder. They are good to change the title or tell the reader what is going on in this section. I got a section page for the home/landing page, blog and how tos. A subfolder in the root language dir is always a section. Also the URL represents this. the language folder, e.g. de, is pacheco.de/de/ if you have a folder blog with md files inside, then pacheco.de/de/blog is the section.

Main Menu items are set either in config.toml, when the name is the same across all languages or on each page in the frontmatter. Every section or single page file can and will have a frontmatter, which is either in toml or yaml and normally at the beginning of the file. See about.md.

CSS

CSS files just go into assets/css/extended and will all be loaded automatically.

Theme

If a theme is used it is in the themes folder.

layout files and folder OR how to use html

In the layout folder you have _default, partials and shortcode folder.

I use the _default folder to override the default home html defined by PaperMod. You can use hugo logic blocks to control what and how content will be placed in html file. The parameters from config.toml and frontmatter can be used.

I use the partials folder to override PaperMod’s extended_footer.html, which is especially for customization. I hide the default footer (which contains the copyright) with parameter in config.toml. And make my own footer in extended_footer.html, which then uses PaperMod’s default footer, but at the very end of the page - this is where i want it ;)

The shortcode folder is really nice, whenever you have parts of a page which are language independent you will use a shortcode. For example I user badges.html, where only badges are shown. You can refer to a shortcode html with: (without spaces!)

{ {<badges>}}