Workflow

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

  • editing
    • do whatever adding posts, changing taxonomies, etc.
    • test as needed with hugo server -D as necessary (loads site at http://localhost:1313/ without comments to avoid duplicate Disqus entries as specified I think in my comments.html partial)
  • when ready to update live site
    • empty /public/ except for .git and CNAME
    • build static files with hugo -t papermod
    • do github things
      • create new branch for public submodule as YYMMDD
      • stage all changes
      • commit
      • publish branch
      • create pull request
      • merge with main
        • resolve any errors in VSCode if necessary (often with my clumsy coding skills is necessary)
      • delete branch on GitHub
      • delete branch locally on VSCode
      • checkout? to main branch and sync with remote main
    • repeat “do github things” with digital-gardens repo
    • check site is live
      • record any errors that may have happened

To-do

I need to

here is something else that isn’t nice

  • here is a list

    • and a subpoint
    • and another

  • and when I put another list below it with a space

    • it’s gonna get
    • kinda hairy because the spacing gets really weird between the parent and subpoint

  • idk what to do

  • here’s me trying more stuff

    • and another indent

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. this2 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

  1. Example (fixed) ↩︎

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