Hugo Themes
Terminal
Terminal is a theme inspired by the cobalt 2 theme for terminal on macOS. It uses tailwind CSS to achieve the look and feel
- Author: Nayan Seth
- GitHub Stars: 0
- Updated: 2024-04-13
- License: MPL-2.0
- Tags: Blog Personal
terminal-hugo-theme
A theme for hugo made using tailwind CSS library and mono font family
Live Demo
Setup
- This theme uses tailwind CSS
- There are two config files for tailwind located in
assets/csss/tailwind
directory 1. For dev runnpm run dev
-> This generates all the possible CSS classes from tailwind. Some may still be left out 2. For prod runnpm run prod
-> This generates only the CSS classes from tailwind that you are using in the theme hugo new site <SITE_NAME>
cd <SITE_NAME>
git submodule add git@github.com:techbarrack/terminal-hugo-theme.git themes/terminal
- Replace the contents of
<SITE_NAME>/hugo.yaml
with<SITE_NAME>/themes/terminal/hugo.yaml
- Run the website
hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w
Modifying the Contents
- Uncomment the ignoreFiles attribute in
<SITE_NAME>/hugo.yaml
- Start adding the files in
<SITE_NAME>/content
by replicating what is present in<SITE_NAME>/themes/terminal/content
- Update the meta content in
head.html
Third Party JS
- Create partials in
<SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
- All the files in
third_party_js
folder will get included before</body>
tag
Shortcodes
{{< svg logo="blah" >}}
-> Use the following code to add svg in markdown files 1. Add svg as .html file inlayouts/content/svg
- Raw HTML
{{< rawhtml >}}
<div>This is raw HTML content</div>
{{< /rawhtml >}}
References
Some reference links for additional info on how to do things in Hugo:
- https://gohugo.io/methods/page/
- https://gohugo.io/methods/pages/groupbydate/
- https://gohugo.io/content-management/taxonomies/
- https://gohugo.io/templates/taxonomy-templates/
- https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
- https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
- https://gohugo.io/methods/page/scratch/
- https://gohugo.io/functions/collections/dictionary/
- https://gohugo.io/methods/page/paginate/
- https://discourse.gohugo.io/t/better-term-listing/10261
- https://gohugo.io/templates/partials/
- https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
- SVG Icons