1 - Nextcloud Collectives and Hugo SSG | Fish-Maule Family Tech Site

1 - Nextcloud Collectives and Hugo SSG

January 1, 2025

Go, Nextcloud, Collectives, Hugo, Static Site Generator

Result #

All the errors were were corrected and the site is working just fine now! Here are the results of the Workflow:

1. Front Matter #

FRONTMATTER START  
title: "Nextcloud Collectives and Hugo SSG"  
description: "My experience with using Nextcloud Collectives and Hugo Static Site Generator."  
draft: false  
tags:  
 - "Go"  
 - "Nextcloud"  
 - "Collectives"  
 - "Hugo"  
 - "Static Site Generator"  
date: "2024-12-27"  
categories:   
 - "Hugo"  
 - "Nextcloud"  
menu: "main"  
author: "Vincent Maule"  
type: posts  
FRONTMATTER END

2. Copy Files from Nextcloud Collective #

#! /run/current-system/sw/bin/bash
cd ..
git submodule init
git submodule update
cd themes/hugo-book
git checkout e104a11f42fbd069aa15606c5f01631b07d7528c
cd ../..
rm -rf content/*
echo "Copying Files..."
cp -r ~/Nextcloud/Collectives/tech_fish-maule_com/* content
echo "Moving to Content Directory: " && pwd
cd content
echo "Renaming all Readme.md files..."
find . -depth -name "Readme.md" -exec sh -c 'f="{}"; mv -- "$f" "${f%Readme.md}_index.md"';
echo "Replacing Front Matter for all files where applicable..."
# Function to replace frontmatter
replace_frontmatter() {
    local file="$1"
    # Read the file content
    local content=$(cat "$file")
    
    # Check if the old frontmatter format exists
    if [[ "$content" =~ "FRONTMATTER START" && "$content" =~ "FRONTMATTER END" ]]; then
        # Replace the old format with the new one
        content="${content/FRONTMATTER START/---}"
        content="${content/FRONTMATTER END/---}"
        
        # Write the modified content back to the file
        echo "$content" > "$file"
        echo "Updated frontmatter in $file"
    fi
}

# Find all .md files in the current directory and its subdirectories
find . -type f -name "*.md" | while read -r file; do
    replace_frontmatter "$file"
done

echo "Frontmatter conversion process completed."

3. Git Push #

#!/run/current-system/sw/bin/bash
cd ..
rm tech_fish-maule_com.tar.gz
rm -rf public
git add .
git commit -a -m "Perform Initial Commit attempt 7."
git push

4. Generate Sites #

#! /run/current-system/sw/bin/bash
cd ..
hugo --gc --minify
tar -czf tech_fish-maule_com.tar.gz public/*

Experience #

Timeline: December 24, 2024 - January 1, 2025

In the past, I’ve been playing with Hugo and Nextcloud. Learning how to setup basic sites with Hugo took some time. Collectives add-on was interesting; understanding how the system works, and how it stores it’s data within Nextcloud.

After some time, I came to the realization; Collectives structure could be seen as sites, each collective being the content for the Hugo Site. Nextcloud is already an easy to use tool. Why not extend it further?

So, I did some digging and tinkering and with some luck, I was successful!

Session 1 #

Current Date: December 24, 2024

This session took place for about a day to a day and a half. I started off with creating a Pull Request in my Private Git Repo. There were two parts to make this Pull Request Successful; find out if it’s possible to Copy from Collectives and test this book template for an upcoming site.

1. Initial Commits #

There were about three-four commits that I performed that could be see as the initial commit:

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..12744dd
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "themes/hugo-book"]
+	path = themes/hugo-book
+	url = https://github.com/alex-shpak/hugo-book
diff --git a/themes/hugo-book b/themes/hugo-book
new file mode 160000
index 0000000..7c78a39
--- /dev/null
+++ b/themes/hugo-book
@@ -0,0 +1 @@
+Subproject commit 7c78a39c531aa2492ed7e92f2ce9dfb2c8c0d3fa
diff --git a/themes/hugo-book b/themes/hugo-book
index 7c78a39..e104a11 160000
--- a/themes/hugo-book
+++ b/themes/hugo-book
@@ -1 +1 @@
-Subproject commit 7c78a39c531aa2492ed7e92f2ce9dfb2c8c0d3fa
+Subproject commit e104a11f42fbd069aa15606c5f01631b07d7528c

The first step was establishing the modules I would use for the website theme. With Hugo, we have the choice to use a Hugo Go Module or a Git Sub-module. In my case, I choose to use Sub-module.

After some testing and configuration, I found out the version of Hugo I have installed is not compatible with latest version of this theme. Considering this, I decided to use the last version I know that would work with the version I have, the e104a11... commit.

2. `readme.md` vs `_index.md` #

My first goal was to trial out the structure, see how it works. After being able to get the template built successfully from the initial commit, I took one real quick look at the structure and seen one thing I needed change; I need all the files titled readme.md -> _index.md for Hugo.

For this problem, I went to one of the AI Models and asked the question to answer this problem… the result was exactly what I was looking for:

find . -depth -name “Readme.md” -exec sh -c ‘f="{}"; mv – “$f” “${f%Readme.md}_index.md”’;

As a result, I committed to Git:

diff --git a/scripts/generate_sites.sh b/scripts/generate_sites.sh
index 88d5302..7eef477 100755
--- a/scripts/generate_sites.sh
+++ b/scripts/generate_sites.sh
@@ -1,5 +1,12 @@
-#!/run/current-system/sw/bin/bash
+#! /run/current-system/sw/bin/bash
 cd ..
-rm -rf public
+git submodule init
+cd themes/hugo-book
+git checkout v10
+cd ../..
+git submodule update
+cp -r ~/content/docs
+cd content/docs
+find . -depth -name "Readme.md" -exec sh -c 'f="{}"; mv -- "$f" "${f%Readme.md}_index.md"';
 hugo --gc --minify
+tar -czf family_fish-maule_com.tar.gz public/*
No newline at end of file

Tested the site and worked beautifully! But though… only worked beautifully for the situation I faced. There was still more which lead to the next Session.

Note: What separated the sessions is a Pull Request.

Session 2 #

Current Date: December 27, 2024

What I noticed is missing from the get go is how some of the pages are not showing up while others are. After some looking around, I found out I was missing the Front Matter in all of the pages. Usually Front Matter is something every doc parsed through Hugo would need.

1. Perfect Match #

Why not put EXACTLY what one would want right on the page? Front matter and content right in the page? I attempted this but then the page when opened through the collective would not load nor let me edit said page.

Ok, I took a step back on what I could do here. Took a couple hours of a break before I came up with this idea I asked AI:

Question #

Use pandoc to add front matter to markdown files in a directory.

Answer #

...
    Use find and sed to Modify Files:

    Create a small shell script or use a one-liner to process each Markdown file:

    bash

    find . -type f -name "*.md" -exec sed -i '1i
    ---\ntitle: "Your Title Here"\ndate: "2024-12-25"\n---' {} +


    Here's what this command does:
        find . -type f -name "*.md" finds all .md files in the current directory and subdirectories.
        -exec sed -i ... executes sed on each file found, where:
            -i performs in-place editing (this might need a backup extension like -i.bak for safety on some systems).
            '1i' tells sed to insert the following text at line 1.
            The text inside the i command is the front matter, formatted with YAML.
...

Ok, this is to add content. I continued to let myself stew on the thoughts. What didn’t set right with me is how the is to create the front matter. I don’t want to just create, I want to give the user the ability to modify the front matter right in the collective. That’s what lead to this follow up question:

Question #

My idea is that each file will have at the start:

-FRONTMATTER START-
`Frontmatter Content`
-FRONTMATTER END-

The goal is to replace -FRONTMATTER START- and -FRONTMATTER END- with three dashes for each file in the directory.

Answer #

To achieve your goal of replacing -FRONTMATTER START- with --- at the start of each file and -FRONTMATTER END- with --- at the end of your frontmatter block, you can use a combination of sed commands. Here's how to do it:

Using find and sed:
bash

find . -type f -name "*.md" -exec sed -i 's/^-FRONTMATTER START-/---/;s/-FRONTMATTER END-$/---\n/' {} +


Here’s what this command does:

    Find all .md files in the current directory and subdirectories.
    Sed performs two substitutions:
        s/^-FRONTMATTER START-/---/ replaces -FRONTMATTER START- at the beginning of the file with ---.
        s/-FRONTMATTER END-$/---\n/ replaces -FRONTMATTER END- at the end of the file with --- followed by a newline.
...

Funny enough, I didn’t actually use Pandoc for this. I thought I would need to but I’m just looking for simple solutions. AI for the win on this one. As a result of this, I made some changes and here is the latest for my script:

#! /run/current-system/sw/bin/bash
cd ..
git submodule init
git submodule update
rm -rf content/*
cp -r ~/Nextcloud/Collectives/family_fish-maule_com/* content/
cd content
find . -depth -name "Readme.md" -exec sh -c 'f="{}"; mv -- "$f" "${f%Readme.md}_index.md"';
for file in *.md; do
  sed -i 's/^-FRONTMATTER START-/---/' "$file"
  sed -i 's/-FRONTMATTER END-$/---\n/' "$file"
done
cd ../..
hugo --gc --minify
tar -czf family_fish-maule_com.tar.gz public/*

Note: What separated these sessions is a change in the domain name for the site.

Session 3 #

Current Date: December 31, 2024

I am a person that likes to fixate on one thing at a time. I am not wired to work on multiple different projects at the same time. While I am not wired for this, I am exploring ways that I could change this. I want to become that person that can adapt; I firmly believe that is possible!

For the past few days, I feel like I’ve been working through stupid issues; what I know is the case is that I’ve been working through the small issues Hugo does not like. I appreciate the craziness and love the challenge. Nonetheless, I did some tinkering and managed to successfully get the beginning of a workflow going:

Nextcloud Collectives Metadata #

I found two issues:

1. A `\` added to the beginning #

diff --git a/content/docs/Hugo/Create Linode Image.md b/content/docs/Hugo/Create Linode Image.md
new file mode 100644
index 0000000..42614b4
--- /dev/null
+++ b/content/docs/Hugo/Create Linode Image.md	
@@ -0,0 +1,19 @@
+-FRONTMATTER START-  
+title: "Create Linode Image"  
+weight: 3  
+type: docs  
+-FRONTMATTER END-
+
+## Create Linode Image
+
+### Resource
+
+[Linode Guide](<https://www.linode.com/docs/guides/install-nixos-on-linode>)
+
+### Steps:
+
+1. Create configuration from above resource.  
+2. Generate Linode from above guide following the *Prepare Your Linode Steps* using NixOS-Generate Flake.  
+   1. `sudo nixos-generate -c flake.nix --flake ./#cstuspfamli -f linode --system x86_64-linux -o cstuspfamli`  
+3. Upload image to Linode as an image.  
+4. change Password & Hostname.
 No newline at end of file

2. A `\` added to the opening and close #

diff --git a/content/posts/nc-2-git-hugo.md b/content/posts/nc-2-git-hugo.md
new file mode 100644
index 0000000..b7fa0ec
--- /dev/null
+++ b/content/posts/nc-2-git-hugo.md
@@ -0,0 +1,289 @@
+-FRONTMATTER START-  
+title = "Presenting Git Changes"  
+description = ""  
+tags = [  
+"go",  
+"golang",  
+"templates",  
+"themes",  
+"development",  
+]  
+draft = true  
+date = "2014-04-02"  
+categories = [  
+"Development",  
+"golang",  
+]  
+menu = "main"  
+author = "Vincent Maule"  
+type = posts  
+-FRONTMATTER END-
+
+---
+
+With documenting my experiences to blog and documentation; I've been starting the process to understand how I could get the Git information presented clearly into the appropriate resources, or as clear as possible. 
+
+## Get Commits
+
+As a start, I began to conceptualize how to approach this from top, bottom approach. I began my experience with asking AI this: 
+
...
+
+<END OF QA>
 No newline at end of file

It seems that the Collectives App would add back slashes to the sections of the Front Matter; the beginning of where the Front Matter is located, and act as an opening and closing for lists found within the Front Matter.

Simple Solutions #

I felt rushed to make the changes, wanting to get to the next task I needed to; I tried three different variations of scripts from the questions I asked. After trail and error is just changed lines at the beginning of the file from -FRONTMATTER START|END- to FRONTMATTER START|END. something else I noticed, thanks to the AI, is how the Front Matter is formatted as TOML and not YAML. Here are the latest results:

diff --git a/scripts/staging/posts/nc-2-git-hugo.md b/scripts/staging/posts/nc-2-git-hugo.md
new file mode 100644
index 0000000..628122a
--- /dev/null
+++ b/scripts/staging/posts/nc-2-git-hugo.md
@@ -0,0 +1,275 @@
+---  
+title: "Presenting Git Changes"  
+description: "Use Git to present Evidence clearly with Hugo Static Site Generator."  
+tags:  
+ - "Git"  
+ - "Hugo"    
+draft: False  
+date: "2024-12-29"  
+categories:   
+ - "Git"    
+menu: "main"  
+author: "Vincent Maule"  
+type: posts  
+---
+
+**Current Date**: *December 29, 2024*
+
+With documenting my experiences to blog and documentation; I've been starting the process to understand how I could get the Git information presented clearly into the appropriate resources, or as clear as possible. 
+
+## Get Commits
+
+As a start, I began to conceptualize how to approach this from top, bottom approach. I began my experience with asking AI this: 
+
...
+
+Make sure to make the script executable with chmod +x script_[name.sh](http://name.sh) before running it.