Matt Duran

I break things to learn how they work

Site updates to make life easier

Published on in đź“ť Posts

Site Refresh: Making My Simple Site Even Better

Introduction

Wow, it has been a hot second since I’ve made an update to this site! Every time that I look at the website, I keep thinking to myself, “man, I really need to get it together and make some updates!” Well, I promise, I will be making more updates to the page now that I’ve made things 1. even more simple to maintain and 2. fixed some underlying problems that prevented me from writing more.

The Need for Change

Not to toot my own horn, but there weren’t a lot of things that needed fixing since the site is so simple as it is – this being just a static website, it makes things a heck of a lot easier to maintain. That said, I did some stupid things that needed rectifying like:

Bad HTML structure

Apparently, all those years doing HTML on MySpace really were too long ago and I forgot how to properly format things. I made some minor updates across the whole site to correct this.

Old:

%CONTENT%lt;body%CONTENT%gt;
  %CONTENT%lt;header%CONTENT%gt;
    %CONTENT%lt;!-- Header content --%CONTENT%gt;
  %CONTENT%lt;/header%CONTENT%gt;
%CONTENT%lt;/body%CONTENT%gt;
%CONTENT%lt;main class=%CONTENT%quot;h-entry%CONTENT%quot;%CONTENT%gt;
  %CONTENT%lt;!-- Main content --%CONTENT%gt;
%CONTENT%lt;/main%CONTENT%gt;
%CONTENT%lt;/html%CONTENT%gt;

Corrected:

%CONTENT%lt;body%CONTENT%gt;
  %CONTENT%lt;header%CONTENT%gt;
    %CONTENT%lt;!-- Header content --%CONTENT%gt;
  %CONTENT%lt;/header%CONTENT%gt;
  %CONTENT%lt;main class=%CONTENT%quot;h-entry%CONTENT%quot;%CONTENT%gt;
    %CONTENT%lt;!-- Main content --%CONTENT%gt;
  %CONTENT%lt;/main%CONTENT%gt;
%CONTENT%lt;/body%CONTENT%gt;
%CONTENT%lt;/html%CONTENT%gt;

SEO additions to the headers

Not that I get linked on many websites (I love to keep a low profile) but there are some additions that can make user experience better if I do. These corrected the paths for the resources used in the headers but also added a bunch of opengraph tags as well. Here’s an example from the last blog post after being updated.

Updated headers:

%CONTENT%lt;head%CONTENT%gt;
  %CONTENT%lt;meta charset=%CONTENT%quot;utf-8%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;meta name=%CONTENT%quot;viewport%CONTENT%quot; content=%CONTENT%quot;width=device-width, initial-scale=1%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;meta name=%CONTENT%quot;description%CONTENT%quot; content=%CONTENT%quot;Keeping Sir Terry Pratchet%CONTENT%#39;s memory alive with HTTP Headers%CONTENT%quot; /%CONTENT%gt;
  
  %CONTENT%lt;!-- OpenGraph tags for social sharing --%CONTENT%gt;
  %CONTENT%lt;meta property=%CONTENT%quot;og:title%CONTENT%quot; content=%CONTENT%quot;Clacks in the Ethernet - Matt%CONTENT%#39;s Site%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;meta property=%CONTENT%quot;og:description%CONTENT%quot; content=%CONTENT%quot;Keeping Sir Terry Pratchet%CONTENT%#39;s memory alive with HTTP Headers%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;meta property=%CONTENT%quot;og:url%CONTENT%quot; content=%CONTENT%quot;https://mattduran.info/posts/2023/12/2023-12-21-terry-clacks.html%CONTENT%quot; /%CONTENT%gt;
  
  %CONTENT%lt;title%CONTENT%gt;Clacks in the Ethernet - Matt%CONTENT%#39;s Site%CONTENT%lt;/title%CONTENT%gt;
  %CONTENT%lt;link rel=%CONTENT%quot;canonical%CONTENT%quot; href=%CONTENT%quot;https://mattduran.info/posts/2023/12/2023-12-21-terry-clacks.html%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;link rel=%CONTENT%quot;me%CONTENT%quot; href=%CONTENT%quot;https://indieweb.social/@matt_d%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;link rel=%CONTENT%quot;me%CONTENT%quot; href=%CONTENT%quot;https://www.linkedin.com/in/matthew-duran/%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;link rel=%CONTENT%quot;me%CONTENT%quot; href=%CONTENT%quot;https://github.com/mattkduran%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;link rel=%CONTENT%quot;shortcut icon%CONTENT%quot; href=%CONTENT%quot;/favicon.svg%CONTENT%quot; /%CONTENT%gt;
  %CONTENT%lt;link href=%CONTENT%quot;/css/style.css%CONTENT%quot; rel=%CONTENT%quot;stylesheet%CONTENT%quot; type=%CONTENT%quot;text/css%CONTENT%quot; /%CONTENT%gt;
%CONTENT%lt;/head%CONTENT%gt;

The really nice part about this is that these are now stored in template files as well so everything will be updated properly every time!

Automation Improvements

Alright, the real meat of the updates really just makes it waaay easier for me to write things now too. Previously, I’d written a blog post that outlined a bash script I made to update the RSS feed – Sometimes, the simplest thing is the correct answer. This script would take a pre-existing template after I had gone through and pre-formatted HTML then copy it into the RSS feed to maintain the styling. Well, no longer! Now this is fully automated with some fresh new features!

Step 1: Write it!

Now, instead of writing out a text file, then adjusting it to be HTML, I can now write the files in Markdown.

Step 2: Convert it!

Once I have a blog post that I’m satisfied with, I push that to Github and the Markdown file is automatically converted to HTML using a Github action. This process gets all of the new markdown files intended to be published and runs the md-to-html.sh script below

#!/bin/bash
# Convert markdown to HTML and integrate with template
# Dependencies: pandoc (install with: sudo apt-get install pandoc)
# Usage: ./md-to-html.sh input.md

source ./site-utils.sh

# Check if pandoc is installed
if ! command -v pandoc %CONTENT%amp;%CONTENT%gt; /dev/null; then
    echo %CONTENT%quot;Error: pandoc is not installed. Please install it first:%CONTENT%quot;
    echo %CONTENT%quot;sudo apt-get install pandoc%CONTENT%quot;
    exit 1
fi

# Check if input file exists
if [[ ! -f %CONTENT%quot;$1%CONTENT%quot; ]]; then
    echo %CONTENT%quot;Error: Input file $1 does not exist.%CONTENT%quot;
    exit 1
fi

# Get the input filename and base name
input_file=%CONTENT%quot;$1%CONTENT%quot;
filename=$(basename %CONTENT%quot;$input_file%CONTENT%quot; .md)

# Extract metadata from frontmatter
title=$(grep -m 1 %CONTENT%quot;^title:%CONTENT%quot; %CONTENT%quot;$input_file%CONTENT%quot; | sed %CONTENT%#39;s/^title: *//%CONTENT%#39;)
summary=$(grep -m 1 %CONTENT%quot;^summary:%CONTENT%quot; %CONTENT%quot;$input_file%CONTENT%quot; | sed %CONTENT%#39;s/^summary: *//%CONTENT%#39;)
date=$(grep -m 1 %CONTENT%quot;^date:%CONTENT%quot; %CONTENT%quot;$input_file%CONTENT%quot; | sed %CONTENT%#39;s/^date: *//%CONTENT%#39;)

# If date is not provided, use today%CONTENT%#39;s date
if [[ -z %CONTENT%quot;$date%CONTENT%quot; ]]; then
    date=$(date +%Y-%m-%d)
fi

# Parse the date
year=$(echo %CONTENT%quot;$date%CONTENT%quot; | cut -d%CONTENT%#39;-%CONTENT%#39; -f1)
month=$(echo %CONTENT%quot;$date%CONTENT%quot; | cut -d%CONTENT%#39;-%CONTENT%#39; -f2)
day=$(echo %CONTENT%quot;$date%CONTENT%quot; | cut -d%CONTENT%#39;-%CONTENT%#39; -f3)

# Create output directory if it doesn%CONTENT%#39;t exist
output_dir=%CONTENT%quot;public/posts/$year/$month%CONTENT%quot;
mkdir -p %CONTENT%quot;$output_dir%CONTENT%quot;

# Output HTML file
output_file=%CONTENT%quot;$output_dir/$filename.html%CONTENT%quot;

# Get template file
template_file=%CONTENT%quot;src/templates/post-template.html%CONTENT%quot;

# Convert markdown to HTML (just the body content)
body_content=$(pandoc %CONTENT%quot;$input_file%CONTENT%quot; -f markdown -t html --no-highlight)

# Read the template
template=$(cat %CONTENT%quot;$template_file%CONTENT%quot;)

# Replace placeholders in the template
html_content=%CONTENT%quot;${template//%TITLE%/$title}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%SUMMARY%/$summary}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%DATE%/$date}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%YEAR%/$year}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%MONTH%/$month}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%DAY%/$day}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%FILENAME%/$filename}%CONTENT%quot;
html_content=%CONTENT%quot;${html_content//%CONTENT%/$body_content}%CONTENT%quot;

# Write to output file
echo %CONTENT%quot;$html_content%CONTENT%quot; %CONTENT%gt; %CONTENT%quot;$output_file%CONTENT%quot;

echo %CONTENT%quot;HTML file created: $output_file%CONTENT%quot;

# Update website pages
echo %CONTENT%quot;Updating website pages...%CONTENT%quot;
./scripts/update-index.sh %CONTENT%quot;$output_file%CONTENT%quot; %CONTENT%quot;$title%CONTENT%quot; %CONTENT%quot;$summary%CONTENT%quot;
./scripts/update-posts-page.sh %CONTENT%quot;$output_file%CONTENT%quot; %CONTENT%quot;$title%CONTENT%quot; %CONTENT%quot;$summary%CONTENT%quot;
./scripts/update-rss.sh %CONTENT%quot;$output_file%CONTENT%quot; %CONTENT%quot;$title%CONTENT%quot;

echo %CONTENT%quot;All done! Post published successfully.%CONTENT%quot;

Step 3: Update it!

Once this process runs, all of the normal update scripts to modify the /posts/ page and the RSS feed are called to add the new article

Step 4: Commit it!

All of the new updated files are then committed to the main branch of the repository to get ready for…

Step 5: Deploy it!

Deployment! Github will then push all of this directly to Firebase which updates shortly after the changes. All I need to do is just write!

Conclusion

Just like with anything else in life, sometimes you need to lower the bar to do something to the point that said bar is on the ground. The easier you make it, the less excuses someone has to not do it and you can very easily (well, with a lot of googling) do this with the right pieces of technology. I do want to make more updates on a regular basis and this will hopefully make that process a heck of a lot easier. Now, if I can ever get a POSSE setup going, maybe I’ll actually participate more in the Fediverse. I’ll save that for another post in the future, fingers are crossed!