Rework with Hextra
I have been doing a rework of my website for the past few days as the previous hugo theme I have been using did not meet my requirements anymore.
Previously I have been using Hello Friend NG, which is a great theme, but it was missing some features I wanted to have.
I was not satisfied with the way the theme displayed codeblocks and it was not as flexible as I wanted it to be. Besides that, I also wanted to have a docs section for my projects and the theme did not provide a clean way to do that. The blog, docs, and projects sections all looked pretty much the same, making it hard to quickly distinguish between them.
I wanted a theme that was more flexible and easier to maintain, so I went on hugos theme browser and found Hextra, which seems to be an almost perfect fit for my needs as it provides a lot of features out of the box and is very flexible in terms of customization.
Changes
As previously mentioned, Hextra seems almost perfect for my needs, but there are still some changes I wanted to make to the theme to make it fit my needs even better. The theme is very well documented and provides a lot of customization options, so making these changes was pretty easy.
Blog Section
The theme and its features seem to be a bit docs-focused, which is great, but I also wanted to have a blog to publish articles like this one.
Hextra does have a blog section, but it does not look as polished as the rest of the theme, so I decided to make some changes to make it look more like the rest of the theme.
The original blog section can be seen on Hextras documentation. It does not seem that bad at first glance, but it gets worse when you have multiple posts. They get stacked on top of each other, making them hard to distinguish from each other.
To fix this I decided to use Hextras built in cards in the blog section, which significantly improved the readability of the blog entries.
I did this by changing the post entries from the base layout to using Hextras cards in list.html in the layouts/posts/ folder.
{{ define "main" }}
{{- $readMore := (T "readMore") | default "Read more →" -}}
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="content">{{ .Content }}</div>
{{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}}
{{- range $pages }}
<div class="hx-mb-10">
<h3><a style="color: inherit; text-decoration: none;" class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{- if site.Params.blog.list.displayTags -}}
{{ with .Params.tags }}
<p class="hx-opacity-50 hx-text-sm hx-leading-7">
{{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}}
</p>
{{ end -}}
{{- end -}}
<p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p>
<p class="hx-opacity-80 hx-mt-1 hx-leading-7">
<a class="hx-text-[color:hsl(var(--primary-hue),100%,50%)] hx-underline hx-underline-offset-2 hx-decoration-from-font" href="{{ .RelPermalink }}">
{{- $readMore -}}
</a>
</p>
<p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
</div>
{{ end -}}
</main>
</article>
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
</div>
{{- end -}}{{ define "main" }}
{{- $readMore := (T "readMore") | default "Read more →" -}}
<div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="content">{{ .Content }}</div>
{{- $pages := partial "utils/sort-pages" (dict "page" . "by" site.Params.blog.list.sortBy "order" site.Params.blog.list.sortOrder) -}}
{{- range $pages }}
<div class="hx-mb-10">
{{ $description := partial "utils/page-description" . }}
<p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
{{ partial "shortcodes/card.html" (dict
"title" .Title
"subtitle" $description
"link" .RelPermalink
"image" .Params.thumbnail
) }}
{{- if site.Params.blog.list.displayTags -}}
{{- end -}}
</div>
{{ end -}}
</main>
</article>
<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
</div>
{{- end -}}Status Page
As Hextra does not provide a built-in status page, I decided to again use the blog template to create a status page for my services.
My current blog setup is not ideal for this, as the servers status is not immediately visible when viewing /status.
To fix this I decided to add colored labels to the cards in the status section making it easier to see the status of each post at a glance.
Final Result
View Comparison
A comparison of the homepage before and after the changes:
After these changes the blog and status section look much better and are easier to read and navigate. I am very happy with the result and I am looking forward to using this theme for a long time hehe
I hope you like the changes I made to the theme and I would love to hear your feedback on it. You can view the changes I made by simply navigating through this website.