Trying a Nuxt Theme and a SSG Recap

Blogs

January 21, 2025

New year, time to try out some new SSG.

This time it is the turn of Nuxt

https://github.com/HugoRCD/canvas

the first thing I noticed, it takes much more time to load compared to Astro or NextJS sites, and much more than HUGO.

You just need 2 things: NPM and NodeJS.

Setup Node and NPM - x86/ARM64/ARM32 📌

sudo apt update && sudo apt upgrade

#install NodeJS https://deb.nodesource.com/
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs

# Verify installation
node -v   # Should show Node.js version - 20.18.1
npm -v    # Should show npm version - 10.8.2

Now you can spin a server and make ASTRO Remote Development in it.

A SSG Recap

ℹ️

Im assuming that you are already aware about CSS and JS tricks

Most SSGs will be powered by node.

Certainly! Below is an improved version of the table that provides a comparison of Hugo, Astro, Next.js, Jekyll, Gatsby, and Nuxt. It highlights key aspects of each static site generator or framework.

About	Hugo	Astro	Next.js	Jekyll	Gatsby	Nuxt
Source Code	Hugo on GitHub	Astro on GitHub	Next.js on GitHub	Jekyll on GitHub	Gatsby on GitHub	Nuxt on GitHub
License	Apache License 2.0 ✅	MIT License ✅	MIT License ✅	MIT License ✅	MIT License ✅	MIT License ✅
Performance	⚡️ Lightning-fast static website generation	⚡️ Optimized for static sites with partial hydration	⚡️ Full-stack with static site generation, hybrid support	⏳ Slow generation, suited for simpler blogs	⚡️ Excellent performance with static content & optimized builds	⚡️ Fast, universal applications with server-side rendering and static site generation
Type	Static Site Generator	Static Site Generator (with partial SSR)	Full-stack Framework (with SSR & Static Generation)	Static Site Generator	Static Site Generator (React-based)	Full-stack Framework (with SSR & Static Generation)
Built With	Go	JavaScript (React)	JavaScript (React)	Ruby	JavaScript (React)	JavaScript (Vue.js)
Key Feature	Blazing speed for static sites	Hybrid Static & SSR with partial hydration	SSR & SSG (static generation and server-side rendering)	Easy blog setup using Ruby and Markdown	Rich React ecosystem, GraphQL support	Full-stack, Vue.js framework with server-side rendering
Best For	Developers looking for speed and simplicity in static sites	Developers who need a modern hybrid approach (static + SSR)	Building complex web applications with both static and dynamic content	Simple blogs and personal websites	Content-rich websites with React	Building modern web apps using Vue.js

For HUGO you will need to use GO, as explained here.

For Jekyll, you will need Ruby.

If you plan to use Github Pages with these SSGs, create the proper Github Actions workflow.

To use HUGO, you just need to Setup GO & HUGO 📌

Example with v0.108.0

sudo apt update -y
sudo apt install wget

#install go
wget https://go.dev/dl/go1.21.1.linux-armv6l.tar.gz
sudo tar -C /usr/local -xvzf go1.21.1.linux-armv6l.tar.gz
export PATH=$PATH:/usr/local/go/bin
source ~/.bashrc
go version

#https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb
go version && \
wget https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb -O hugo_specific_version.deb && \
sudo dpkg -i hugo_specific_version.deb && \
rm hugo_specific_version.deb

HUGO

https://github.com/JAlcocerT/JAlcocerT/blob/main/.github/workflows/pages.yaml

Astro

What it is Pydantic? 📌

Find the Theme Source Code

Github is a good starting point.

You can take components ideas, like: ::github{repo="saicaca/fuwari"}

Clone The Theme

Make sure you are free to use the theme as per its License and then clone it:

git clone https://github.com/Ruben-Winant/astro_spark_template ./astro_template #it has a cool carousel!
cd ./astro_template
rm -rf .git #remove existing git

Try the Theme

npm run build
npm run dev

Explore the results, most likely at: http://localhost:4321

A typical astro project structure:

_index.md
- _index.md
- introduction.md
- introduction.fr.md

hugo.toml

Astro Themes I find interesting:

Fuwari
VisVRS ()
AstroWind (which uses Tailwind CSS)

Resources to Create Cool Websites Astro Components 101

Wordpress to SSG Web 3 with Astro

NextJS

What it is Pydantic? 📌

Whether you’re building a blog, a corporate website, or an e-commerce platform, Next.js provides the tools and scalability to meet your project’s demands.

Gatsby

Jekyll

Example Jekyll GHA WF

FAQ

Good Practices for Web Repositories📌

Add a .gitignore and include the node_modules folder

node_modules

Add a docker ignore if you plan to build images:

#add .env files if any

Free Hosting and Free Domain

Free Hosting Options with Free domain

Firebase: Host your Next.js SSG on Firebase for scalable hosting and integrated services like authentication, database, and analytics.
Cloudflare Pages: Deploy your Next.js SSG on Cloudflare Pages for fast and secure global distribution with built-in CDN and SSL/TLS encryption.
GitHub Pages: Easily host your Next.js SSG on GitHub Pages, perfect for static sites with seamless integration with your GitHub repository.

Outro

Where to get Free SVGs for my SSG:
- https://www.svgrepo.com/svg/424489/adventure-journey-location?ref=fossengineer.com
- https://fontawesome.com/?ref=fossengineer.com
How to choose proper HEX colors:
- https://github.com/Toinane/colorpicker?ref=fossengineer.com - A mininal but complete colorpicker desktop app
  - https://colorpicker.fr/app/?ref=fossengineer.com - you can try it online as well
- https://github.com/eigenmiao/rickrack?ref=fossengineer.com - Generate harmonious colors freely.
- https://huey.design/?ref=fossengineer.com

Brand colors with F/OSS

https://colorpicker.fr/app/?ref=fossengineer.com
https://huey.design/?ref=fossengineer.com
https://leonardocolor.io?ref=fossengineer.com
- https://github.com/adobe/leonardo?ref=fossengineer.com - Generate colors based on a desired contrast ratio - Apache v2
Icons for NextJS
https://github.com/twbs/icons?ref=fossengineer.com (MIT ❤️ Licensed SVG icons)
- https://icons.getbootstrap.com?ref=fossengineer.com

npm i bootstrap-icons

Official open source SVG icon library for Bootstrap.

Look for icons with - https://github.com/antfu-collective/icones (MIT ❤️)
- https://icones.js.org/

⚡️ Icon Explorer with Instant searching, powered by Iconify

https://github.com/iconify/iconify (MIT ❤️)
- https://iconify.design/docs/iconify-icon/
- example - https://icon-sets.iconify.design/uil/bitcoin-circle/

npm install --save-dev @iconify-icon/react

Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

https://fontawesome.com/v5/search?o=r&m=free
- https://fontawesome.com/license/free
- https://github.com/FortAwesome/Font-Awesome

And more! Font Awesome works with Require.js, Rails with Turbolink, and jQuery!

https://github.com/lightvue/light-icons (MIT ❤️)
- https://icons.lightvue.org/icons

add this to your css

@import "../../node_modules/light-icons/dist/light-icon.css";

Handpicked collection of premium & light-wighted icons as font

Simply beautiful open-source icons

Icons for dashboards
- https://github.com/walkxcode/dashboard-icons?tab=readme-ov-file

FavIcons for NextJS

Just use Real Fav Icon Generator 😍 and place in the the proper folder (where the default icons are on your Theme).
Cool FavIcon with: https://favicon.io/favicon-converter/ - You can upload an image, then you will get the favicon.ico and other artifacts to make the web icons look amazing in any device.

Go to the theme folder
Add a /static folder
Add the files generated with the website

Weddings are expensive. Be smart with the right software.Cool Link in Bios (with SSGs)