A website for a Moto Blogger. With SSG, FFMpeg and Chocolatey

Today I have managed to help two friends to get their own website up and running.

Moto Blogger Setup

A friend wanted to have the following Astro theme:

The theme - https://github.com/Boston343/horizon

Which initially seems oriented to weddings, but its fully photo centered.

Original (and fantastic) job was done by https://github.com/Boston343/horizon and released under GPL3.0

There was a Windows Web-Dev setup in between, so…

…the setup took just a little bit more clicks than in linux:

1. Install node and npm (nodejs.org and docs.npmjs.org)

node --version
npm --v

2. Install git and vscode

3. Install firebase CLI - in windows that means pasting the .exe to the repo folder and adding it as gitignore to avoid pushing it to the repo

4. Install npm firebase package to configure the hosting

#npm install -g firebase-tools

firebase login
firebase init
#firebase projects:list

  /><span class="flex font-semibold items-start gap-2 pt-4 px-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">Domains</span><div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">Get a domain first!</div></a>

5. Do the one time Firebase Project setup: .\firebase init

Why firebase and not cloudflare?

Just using Google account was enough after accepting firebase T&C’s.

And…thats all the one time things/setup required to get your website.

Conclusions

A free website with Firebase and Astro SSG!

In a nutshell, from now on, just these 3 commands are enough:

npm run dev #to see locally the changes live, as you tweak your website
npm run build #To render the site to /dist

#optional
#npm install -g serve
#serve -s dist #See locally the built website

Deploy to firebase:

#As all the files are ready, we just upload them to firebase free static hosting
firebase deploy #to push dist to proyectorutasmoto.web.app

There you go, your public website with a free firebase subdomain: https://proyectorutasmoto.web.app/

Next steps - To link a custom domain and to not forget to sync it to github for a free code backup!

SSGs are Crazy Efficient

See how this other HUGO Gallery Project was delivered

To make the user experience better when starting with SSGs and markdown:

1. Add FrontMatter CMS support

• https://frontmatter.codes/ - A CMS that works seamlessly with any static site generator
  • https://github.com/estruyf/vscode-front-matter

Front Matter is a CMS running straight in Visual Studio Code.

Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more…

2. Add the vscode MDX extension

Outro

I encouraged this client to also do somethign with his awsome action camera video content.

Chocolatey and FFMPeg

You can install ffmpeg without chocolatey.

But thats ’en plan pringao’.

I prefer to leverage chocolatey: https://community.chocolatey.org/packages

So that programs will get installed programatically (instead of downloading .exe, executing and clicking next few times).

With Chocolatey as package manager you just need to use these 4 commands to get ffmpeg ready.

Open powershel as administrator and copy paste these (one by one):

# Install Chocolatey (Run as Administrator)
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; Invoke-WebRequest -UseBasicParsing 'https://community.chocolatey.org/install.ps1' | Invoke-Expression

# Verify Chocolatey Installation
choco --version

# Install FFmpeg (Run as Administrator)
choco install ffmpeg -y
#choco install chocolateygui #optionally, install a UI to install other packages with GUI

# Verify FFmpeg Installation
ffmpeg -version #I got the version 7.1-essentials_build

If you are here already, you are ready to join videos with ffmpeg!

FFmpeg Video Workflow for Windows

This is how I prepare simple videos avoiding repetitive edition.

Within POWERSHELL as admin, do:

Copy the files with CLI (optional) - I like to use such command to do it with CLI, but you can drag and drop:

Copy-Item -Path "E:\DCIM\DJI_001\*.MP4" -Destination "C:\Users\Escritorio\cadiz" -Force
#Robocopy "E:\DCIM\DJI_001" "C:\Users\j--e-\OneDrive\Escritorio\cadiz" *.MP4 /MT:8 /R:3 /W:2 /ETA /TEE /LOG+:copy_log.txt

1. Place all the videos you want to join into a folder, and place the powershell session on that folder:

cd C:\Users\Escritorio\cadiz #this is a sample folder on my desktop

2. Create the .txt list: this will create a file with all the mp4 that will be joined

Get-ChildItem -Filter "*.MP4" | ForEach-Object { "file '$($_.Name)'" } | Set-Content file_list.txt

You can review that all the mp4 are considered once generated

3. Last step: Just use ffmpeg to join all the files accordingly. You have few alternatives:

• Just join them (keeping the original audio) - This is the one uncommented
  • You can trim this output between two given time (in seconds)
• Join them but silence the audio
• Place music on top of the silenced combined video

#1)
ffmpeg -f concat -safe 0 -i file_list.txt -c copy output.mp4 #simple join
#ffmpeg -ss 120 -to 900 -i output.mp4 -c copy trimmed_output.mp4 #trim and take only between 120s and 900s

#2) Silenced video
#ffmpeg -f concat -safe 0 -i file_list.txt -c:v copy -an output_video.mp4 #silenced video

#3) 🎵 Music by
#ffmpeg -f concat -safe 0 -i file_list.txt -c:v copy -an silenced_output_video.mp4 #silenced video
#ffmpeg -stream_loop -1 -i "TRAVELATOR - Density & Time.mp3" -i silenced_output_video.mp4 -c:v copy -c:a aac -shortest output_with_song.mp 

Every time you do this for ~20min GOPro 4K videos, you are saving ~3h, which at ~65W as of today ~0.05$

Optionally, you can extract the mp3 audio of your joined video, edit it with Audacity and place it back as in step 3:

ffmpeg -i output.mp4 -vn output.mp3

Automatic Video Chapters

Dont forget to add chapters to your video description:

$files = Get-ChildItem -Filter "*.MP4" | Sort-Object Name; $currentTime = 0; function Format-Time ($seconds) { [TimeSpan]::FromSeconds($seconds).ToString("g") }; $files | ForEach-Object { $formattedTime = Format-Time $currentTime; try { $duration = (ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 "$($_.FullName)") -as [double] } catch { Write-Warning "ffprobe failed for $($_.Name).  Assuming 0 seconds."; $duration = 0 }; $currentTime += $duration; "$formattedTime $($_.Name)" } | Set-Content file_list.txt

About HEVC Format

HEVC (High Efficiency Video Coding), also known as H.265, is a video compression standard.

To play HEVC videos, your system needs the appropriate codecs in Windows.

Still, imo it performs better in Linux!

FAQ

Chocolatey Setup for Astro

Astro [QUICK] web development setup for windows

# Install Chocolatey (Run as Administrator)
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; Invoke-WebRequest -UseBasicParsing 'https://community.chocolatey.org/install.ps1' | Invoke-Expression

# Verify Chocolatey Installation
choco --version

choco install nodejs-lts -y
#choco install nodejs -y

node -v
npm -v

choco install vscode -y

For additional installs with Chocolatey, see this gist and packages here

Other Interesting Tools for Astro

• Maps ✅

  • https://github.com/roblabs/maps-withastro ✅
    • Leaflet + OSM ✅
    • MapLibre ✅ - https://github.com/roblabs/maps-withastro/blob/main/src/MapLibre.astro
      • An open source visual editor for the ‘MapLibre Style Specification’ - https://github.com/maplibre/maputnik
    • komoot embed OK

• Adding interactive globe with the countries you have visited

  • From astro bento portfolio (d3 & solid-js library) ✅

• ig embed ✅

  • https://developers.facebook.com/docs/instagram/oembed
  • https://about.instagram.com/blog/announcements/introducing-web-embedding-instagram-content-on-websites
    • must be a public profile to be shared!

• Use gpx.studio to visualize your GPX, or see my Route Tracker repo

• https://www.youtrack.es

• metabase/superset/redash - Can also represent GPX data

• OSM Widgets

  • https://snorpey.codes/en/articles/self-host-openstreetmaps-widgets
  • https://github.com/maplibre/maplibre-gl-js?tab=License-1-ov-file#readme

• rawhtml shortcode from hugo - translate to astro -» gpx support?

• with peertube

• https://www.vidstack.io/

  • https://github.com/vidstack/player

• https://vimejs.com/

  • https://github.com/vime-js

YouTube Videos

Or, in pure Markdown, but losing the image sizing and border:

• Carousel - Even with CSS Only as per this video like so and so

• with react (v1) as per astro project: https://github.com/gio-del/Astro-Theme-Astroway

• with embla - v2

  • https://www.embla-carousel.com/
  • https://github.com/davidjerleke/embla-carousel

• with v3 - Astro + Alpine + Tailwind Starter - as per https://github.com/cssninjaStudio/dokto

• Photo galleries

  • https://github.com/tvoma/cube-gallery
  • https://github.com/jomaendle/astro-photo-gallery
  • https://jankraus.net/2024/04/05/how-to-build-a-simple-photo-gallery-with-astro/

pop up at time or location of page

• Others: if traffic is directed here, ever
  • booking maps - https://affiliates.support.booking.com/kb/s/article/Map-Widget-everything-you-need-to-know
  • https://www.travelocity.com/Flights
  • Search
  • Booking/expedia widgets