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.
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
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.
If you've read previous blog posts in this series, you may have noticed that I use
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
pre-commitby adding this plugin to
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: + - "firstname.lastname@example.org" + - "email@example.com" - repo: https://github.com/antonbabenko/pre-commit-terraform rev: v1.74.1 hooks:
note, we also need to add
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
.editorconfig. And we are done.
There is also another
gohtml file type formatter, you can find it here https://github.com/Riverside-Healthcare/djlint.