Hugo

#website #technology #coding

Workflow

(sorry my terminology may be all wrong when it gets to git-related things)

Updating Hugo

Follow this stuff from the Installation guide:

Prebuilt binaries

Prebuilt binaries are available for a variety of operating systems and architectures. Visit the latest release page, and scroll down to the Assets section.

Download the archive for the desired edition, operating system, and architecture
Extract the archive
Move the executable to the desired directory
Add this directory to the PATH environment variable
Verify that you have execute permission on the file
Please consult your operating system documentation if you need help setting file permissions or modifying your PATH environment variable.

If you do not see a prebuilt binary for the desired edition, operating system, and architecture, install Hugo using one of the methods described below.

Basically, download the old release ZIP file and add it to the go folder with the hugo.exe and replace the executable. Then you are ready to roll.

To-do

I need to

here is something else that isn't nice

Maybe this is just markdown being markdown.

Changelog and lessons learned

I already have broken my website.

I started with hugo new post/so-it-began.md to create my first post, and then tried to change the folder "post" to "posts", added a second file with hugo new posts/digital-garden.md, and now it's not showing up on my website. lol.

Thanks to this video for the setup guide tho https://www.youtube.com/watch?v=LIFvgrRxdt4. And I think I used https://janezhang.ca/posts/building-website-with-hugo/ for inspo.

I am a bit unnerved by the fact that he doesn't merge to the main branch via a pull request and instead commits straight to the main branch. I am 99% sure that is bad git practice.

I started with the PaperMod theme, and then tried using PaperModX for a bit, and then decided to switch back to PaperMod because 1. I figured out how to better use Hugo and 2. PaperModX had too many bugs for me.
To build my site, need to use hugo -t PaperMod (or instead of PaperMod, the current website theme).

To customise CSS and HTML of a theme, you should override these rather than edit the themes files directly. The PaperMod files of my website were downloaded onto my laptop and edited directly, which I shouldn't have done. For HTML, images, etc., you can create a new file in the folders of your actual site, rather than the theme's folders. For example, to overwrite head.html stored in /my-site/themes/theme-name/layout/partials/ you can copy that file into something like /my-site/layouts/partials/ and then the content of that file will overwrite the original file. This is especially important if you have cloned a repository (but that's kinda of obvious, right?). To do that but for CSS, I am referencing Banjo Code.

https://www.banjocode.com/post/hugo/custom-css/

Had to do this too
https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource

Did this
https://bphogan.com/2020/08/11/2020-08-11-creating-unlisted-content-in-hugo/

Changed markdown to render HTML with https://gohugo.io/getting-started/configuration-markup/ by changing goldmark renderer to unsafe = true

In head.html, changed something about favicon stuff because I moved my favicon files elsewhere and my website does not like it so seeing if this fixes it.

{{/*  <link rel="icon" href="{{ .Site.Params.assets.favicon | default "favicon.ico" | absURL }}">
-> <link rel="icon" href="{{ .Site.Params.assets.favicon | absURL }}">

Unsure how to nest functions in hugo yet.

Added URLS to the books of Bible overview pages so that instead of /46-1-corinthians/ being the end of the URL, it's just /1-corinthians/ https://gohugo.io/content-management/urls/. Doesn't cause clashes with /booksofbible/1-corinthians/.

Actually, now I've changed it so that /1-corinthians/ links to a page that displays every page that hasthe 1-corinthians term in the booksofbible key, and I've added a custom _index.md to each directory \content\booksofbible\BOOKNAME\ so that I can put my overview of each book of the bible there. I think chapters of the bible would make it too messy, but I think I could try and implement that in future. Unfortunately, I don't think Hugo has sub-taxonomies. Also, each booksofbible term now is a weighted page.

Light to dark mode logo swap from https://push.blue/posts/20220718-add-lightdarklogoswap/

themes\PaperMod\layouts\partials\footer.html
themes\PaperMod\layouts\partials\header.html

to

layouts\partials\footer.html
layouts\partials\header.html

and then

--- themes\PaperMod\layouts\partials\footer.html        2022-07-18 09:47:47.635823100 -0700
+++ layouts\partials\footer.html                        2022-07-15 13:59:02.482056200 -0700
@@ -75,9 +75,11 @@
         if (document.body.className.includes("dark")) {
             document.body.classList.remove('dark');
             localStorage.setItem("pref-theme", 'light');
+            document.getElementById("siteLogo").src = "/images/pushblue-dark.png";
         } else {
             document.body.classList.add('dark');
             localStorage.setItem("pref-theme", 'dark');
+            document.getElementById("siteLogo").src = "/images/pushblue-light.png";
         }
     })

and

--- themes\PaperMod\layouts\partials\header.html        2022-07-18 09:47:47.635823100 -0700
+++ layouts\partials\header.html                        2022-07-15 13:59:02.482056200 -0700
@@ -63,13 +63,35 @@
                     <img src="{{ $img.Permalink }}" alt="logo" aria-label="logo"
                         height="{{- site.Params.label.iconHeight | default "30" -}}">
                 {{- else }}
-                <img src="{{- site.Params.label.icon | absURL -}}" alt="logo" aria-label="logo"
+                <img id="siteLogo" src="{{- site.Params.label.icon | absURL -}}" alt="logo" aria-label="logo"
                     height="{{- site.Params.label.iconHeight | default "30" -}}">
+                    <script>
+                        if (document.body.className.includes("dark")) {
+                            document.getElementById("siteLogo").src = "/images/pushblue-light.png";
+                        }
+                    </script>
                 {{- end -}}
                 {{- end -}}

does the trick

And while we're at it, push blue brings up a good point in that the nav seems backwards. this[2] makes it so that the right arrow goes to the future and the left arrow goes to the past.

--- themes\PaperMod\layouts\partials\post_nav_links.html        2022-07-18 09:47:47.635823100 -0700
+++ layouts\partials\post_nav_links.html                        2022-07-18 09:56:20.596032400 -0700
@@ -1,14 +1,14 @@
 {{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
 {{- if and (gt (len $pages) 1) (in $pages . ) }}
 <nav class="paginav">
-  {{- with $pages.Next . }}
+  {{- with $pages.Prev . }}
   <a class="prev" href="{{ .Permalink }}">
     <span class="title">A« {{ i18n "prev_page" }}</span>
     <br>
     <span>{{- .Name -}}</span>
   </a>
   {{- end }}
-  {{- with $pages.Prev . }}
+  {{- with $pages.Next . }}
   <a class="next" href="{{ .Permalink }}">
     <span class="title">{{ i18n "next_page" }} A»</span>
     <br>

2023.10.03

Trying to get the site back up and I seem to have hit a road block where the page just doesn't have any sort of styling occuring. Above, I discussed that when this happened last (I assume this is for the same issue), I...

Had to do this too
https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource

Now, I think I will use the head.html file from the newest version of Papermod with the following code in my config.yaml file:

params:
    assets:
        disableFingerprinting: true

IT WORKED! Don't need the other fix anymore.

Favicon troubleshooting

uh

I made a cute little thing on https://editor.method.ac/ and then added to header.html.

                        <path d="m691,343c8,6 8,6 7.95313,5.9534c0.04687,0.0466 5.04687,-47.9534 -6.95313,13.0466" opacity="NaN" fill="currentColor"/>

                        <path d="m651,357" opacity="NaN" fill="currentColor"/>

                        <path d="m700.485,308.03792l0.56913,0l0.17587,-0.54067l0.17587,0.54067l0.56913,0l-0.46044,0.33415l0.17588,0.54067l-0.46044,-0.33416l-0.46044,0.33416l0.17588,-0.54067l-0.46044,-0.33415z" fill="currentColor"/>

                        <path d="m647.91964,290.31466c0.12781,-0.28313 0.35823,-0.52479 0.55426,-0.76461c0.22804,0.15391 0.42505,0.49249 0.59645,0.72831c-0.15288,0.27277 -0.37295,0.52118 -0.5712,0.76581c-0.21372,-0.22381 -0.39648,-0.47951 -0.57952,-0.72951l0,0l0.00001,0z" fill="currentColor"/>

                        <path fill="currentColor" opacity="NaN" d="m555.15062,220.82672c-3.22766,3.51585 0.63401,5.24495 0.62824,5.22766c0.00577,0.0173 2.59943,-8.7435 -0.62824,-5.22766z"/>

                        <path fill="currentColor" opacity="NaN" d="m-23.58793,-75.60289l-4.15562,-1.28531l4.15562,1.28531z"/>

                        <path d="m6.00368,3.67933c2.06147,-5.16818 10.13838,0 0,6.6448c-10.13838,-6.6448 -2.06147,-11.81297 0,-6.6448z" stroke-width="1.5" fill="#000000"/>

  1. Example (fixed) ↩︎

  2. https://push.blue/posts/20220718-reverse-papermodnavlinks/ ↩︎