Using Hugo without theme
In quick start guide and many online tutorials, new projects are advised to use one of the existing themes or create a new one. But after reading official docs, I've decided not to use any theme in my previous blog version. I am going to do the same for this new project. If in the future some of my functionality will look like it could be decoupled from the blog, I will create a theme but for now, I do not see any need for one.
How to start Hugo project without a theme
It is actually pretty easy. First, you need to understand how hugo project structure works. Basically, hugo will look for needed files in the root folder and if it can't find them, it will try to look them up in the theme folder. Most of the themes provide us with archetypes
, assets
, layouts
and static
folders. For example, If we create a new theme with hugo new theme
we will get this directory structure.
themes/theme
├── LICENSE
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── head.html
│ └── header.html
├── static
│ ├── css
│ └── js
└── theme.toml
As you can see it, most of the files created by cli are in layouts
folder, so we just can copy it to our root. This will provide use with basic scaffold for our project.
Configure pre-commit and editorconfig to format hugo templates
If you've read previous blog posts in this series, you may have noticed that I use pre-commit
and editorconfig
to ensure that all files in the project are validated and autoformated. To add support for gohtml
file type, we are going to use prettier-plugin-go-template
.
Configure pre-commit
by adding this plugin to additional_dependencies
.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index ca47c31..3e5cfef 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -22,7 +22,10 @@ repos:
rev: v2.7.1
hooks:
- id: prettier
- types_or: [yaml, markdown, json]
+ types_or: [yaml, markdown, json, html]
+ additional_dependencies:
+ - "prettier@2.7.1"
+ - "prettier-plugin-go-template@0.0.13"
- repo: https://github.com/antonbabenko/pre-commit-terraform
rev: v1.74.1
hooks:
note, we also need to add prettier
itself too because usually JavaScript hooks use additional_dependencies
to install libraries that hook uses, here is example
And after that update .prettierrc.yaml
following instructions from official README
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index f96ee19..22fe08f 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -11,3 +11,10 @@ overrides:
- "*.md"
options:
tabWidth: 4
+ # https://github.com/NiklasPor/prettier-plugin-go-template
+ - files:
+ - "blog/src/layouts/**/*.html"
+ options:
+ parser: go-template
+ tabWidth: 4
+ printWidth: 88
Finally, we are going to add html
to .editorconfig
. And we are done.
Extra
There is also another gohtml
file type formatter, you can find it here https://github.com/Riverside-Healthcare/djlint.
Top comments (1)
You could add this to my list of Hugo themes