I want to stay in the dream from the night we met. It’s the wildest fantasy I’ve ever had. Can we meet there again? Just to kiss you one last time, and hold you once more after a million embraces.
Dream
Slash pages in Hugo
In Hugo, creating different slash pages (like /about/, /uses/, etc.) involves creating specific content files for each page and customizing templates as needed.
- Create individual markdown files for each slash page under
content/.
If you want to create an/about/page in your blog, add a markdown page with below front matter in thecontent/page.
//content/about.md
---
title: "About"
date: 2024-10-16
---
This is the About page content.
- Optionally create a template for the page.
Hugo uses thesingle.htmltemplate from thelayouts/_default/folder to render pages by default. However, you can create custom templates in thelayouts/page/ folderto format specific pages as needed.
//layouts/page/about.html
<h1>{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>
You can check my slash pages like uses, credits, and changelog.
References
Hugo Troubleshooting
Hugo is fast, but ineffecinet templates can make it slower. For checking the performance you can use the below commands.
Use
hugo --logLevel debugto display debug information, warning, and error message.Use
hugo --templateMetricsto check for slow templates. This will show the time it takes to render each template.Use
hugo --gc(garbage collection) to clean up unused files, which might help reduce build time.Use
debug.Timerto determine the execution time of a block of code. And use thehugo --logLevel infoinfo command line flag when you build the site.
{{ $t := debug.Timer "TestSqrt" }}
{{ range seq 2000 }}
{{ $f := math.Sqrt . }}
{{ end }}
{{ $t.Stop }}
References
Walking
Walking brings clarity to your thoughts.
About this digital garden
This website is where I document and share pieces of my life my thoughts, photos, code snippets, and notes collected along the way...
Answers
Create your own answers.
Write it down
By writing down your problems, you’ll be able to see the solutions clearly.
Understanding useRef
useRef is a powerful React Hook that allows you to create and manage mutable references that persist between renders, Unlike state, changing the value of a useRef object does not trigger a re-render...