Documentation
Tools for Devs
What I've learnt about Websites

What I've learnt about Websites

You can create cool static websites with these SSG frameworks.

And also with Remix.

Which frameworks?

I mean, with: HUGO, Astro, NodeJS, jekyll…

Astro 101 HUGO 101

And if you are new to Websites, do it (The Web Deployment) with Github Pages to get a free subdomain with it.

If you come from a Data Analytics domain and this sounds too far out of reach. You are wrong.

I discovered static sites thanks to using first Flexdashboards in R language.

These dashboards are consolidated into “just” html information, like static sites.

And you bet, they are cool and functional.

Features for Webs

Features that most likely, you will want on your Website:

  1. Pre-Requisites: Fast and Secure (SSL, https)
  2. Search: Pagefind, FuseJS,…
  3. Scheduled Posts
  4. Internationalization (i18n)
  5. A CDN?
  6. APIs: Forms, Newsletters, email marketing…
How to get OpenGraph - OGImage right 📌
ℹ️
How to Include Search to SSGs 📌
DescriptionLink
PageFind with AstroVisVRS/AstroVerse Example
FuseJS with AstroAstroEngineeringBlog Example
FuseJS with HUGOAstroEngineeringBlog Example
GhostCompose Overview

And some add-ons:

  1. Calendar meetings: see cal.com
  2. Newsletters: see mailerlite.com
  3. Payments? Try stripe which links with paypal, bank accounts, CC’s
  4. Web Analytics - Id go for GDPR compliant and cookieless, like: umami, tianji
  5. Uptime Monitoring
  6. Chatbot with AI?
  7. Optional: Social Contacts,…

Deployments

Select a SSG

Choose the SSG (Hugo, Astro,…) And find/create a theme you like

Tweak the Theme and Build

Tweak the theme so that it looks even better

Make sure that the preview works!

Local build and last check 

#option1
cd public
python3 -m http.server 8099 #8000

#option2
npm install -g http-server
http-server -p 8000

Select the Deployment Method

There are few alternatives to host a static website:

See a benchmark of Static Hosting

Free SSG Deployment - Firebase CLI, Cloudflare Wrangler CLI…📌
  1. With Firebase, the Free Tier allows for up to 10GB for ppl to download your content.

Per month, and at least at the time of writing. This might (or not) change.

#npm install -g firebase-tools
#firebase login

firebase init #configure files for firebase hosting / public directory is normall public for HUGO and dist for Astro/nodes
firebase deploy #you will get something like -> https://jalcocertech.web.app/
  1. You can also try with Cloudflare Workers and Pages or Github Pages.

Get Better at Webs

  1. An overview of JS and CSS is always good!

<a class=“hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"href=“https://roadmap.sh/frontend" target="_blank” rel=“noreferrer”>Front End RoadMap

<a class=“hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"href=“https://roadmap.sh/backend" target="_blank” rel=“noreferrer”>Back End RoadMap

ℹ️
Some CSS will do the Trick. As well as JS libraries like: PhotoSwipe,…

https://stateofjs.com/en-US

  1. Web Analytics: you have several options, with Umami or Tianji as alternatives to Google Analytics.

Setup a Static CMS

There are many alternatives! /blog/cms-for-static-websites

  1. https://github.com/payloadcms/payload

FAQ

Enhancing a Website - Comments, CDN and Videos… 📌

  1. Comments - https://blog.cavelab.dev/2022/01/comments-again/

  2. CDN and Videos for your Website: https://github.com/orthdron/subatic - Extremely simple video hosting Site that scales with you

How to Optimize Web Images - WebP 📌
Better Colors for your website 📌

  1. How to get the HEX colors of websites - SmartColorPicker extension

  2. Explore HEX colors with Color Picker Chrome extension

  3. https://github.com/eigenmiao/Rickrack

snap install rickrack

Generate harmonious colors freely on your desktop

  1. https://colorpicker.fr/app/?ref=fossengineer.com

  2. https://huey.design/?ref=fossengineer.com

  3. https://leonardocolor.io?ref=fossengineer.com

https://github.com/adobe/leonardo?ref=fossengineer.com -

Apache v2 | Generate colors based on a desired contrast ratio

  1. See more here

You need markdown for these SSGs. And there are cool markdown tools:

  1. https://github.com/Cveinnt/LetsMarkdown.com
docker run --rm -dp 3030:3030 cveinnt/letsMarkdown
  1. https://github.com/joemccann/dillinger

MIT | The last Markdown editor, ever.

Icons and FavIcons

For regular ICONS:

  1. Iconify is a great place to start.

MIT | 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!

  1. https://github.com/pqoqubbw/icons

MIT | beautifully crafted animated icons

  1. https://github.com/lucide-icons/lucide

ISC | Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

  1. Images for Web:

At the moment when you will need proper FAVICONS:

About favicons 📌

As seen in the withastro/starlight Theme or Pacamara

  1. FavYcon - https://github.com/ruisaraiva19/favycon

MIT | Favycon - A favicon generator tool. Discovered thanks to this Hextra theme!

  1. Real Fav Icon Generator 😍 and place in the the proper folder (where the default icons are on your Theme).

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

How to add favicons to your SSG?

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

Is my website performing well?

  1. https://pagespeed.web.dev/

See also https://search.google.com/search-console/

Check that the SiteMap Works 📌
#curl -s https://example.com/sitemap.xml -o /dev/null -w "%{http_code}\n"
curl -s https://jalcocertech.xyz/sitemap.xml -o /dev/null -w "%{http_code}\n" #200 means its there!
curl -s https://cyclingthere.com/sitemap.xml -o /dev/null -w "%{http_code}\n"
curl -s https://cyclingthere.com/sitemap-index.xml -o /dev/null -w "%{http_code}\n" #its here!
curl -s https://iotechcrafts.com/sitemap.xml -o /dev/null -w "%{http_code}\n" 

curl -s https://fossengineer.com/sitemap.xml -o /dev/null -w "%{http_code}\n" #hugo paper mod has it

#optional - check robots.txt
curl -s https://jalcocertech.xyz/robots.txt | grep -i sitemap #look for sitemap direction
curl -s https://iotechcrafts.com/robots.txt | head -n 10 #see the first 10 lines

#example of path with robots
curl -s https://bachatafests.com/sitemap.xml -o /dev/null -w "%{http_code}\n"
curl -s https://bachatafests.com/robots.txt | head -n 10 #see the first 10 lines
curl -s https://bachatafests.com/robots.txt | grep -i sitemap #look for sitemap direction
curl -s https://bachatafests.com/sitemap_index.xml -o /dev/null -w "%{http_code}\n"

Search for any references to a sitemap URL within the robots.txt file.

If found sth, you can use that URL to check for the sitemap instead!

  1. https://trends.google.es/trends/
Notify Google/Bing about your Website Changes based on the sitemap 📌

There are some Interesting Search Engines available:

And for you to get traffic, you need SE to be aware of your awsomeness:

  1. To ping Google’s engine to review your site’s sitemap:
curl "https://www.google.com/ping?sitemap=https://www.example.com/sitemap.xml"
  1. Don’t forget about Bing Search as well:
curl "https://www.bing.com/ping?sitemap=https://www.example.com/sitemap.xml"

It’s worth to try few of them.

Not all the content is indexed in the same way across engines and you can miss valuable info.

ℹ️
Thanks to Ecosia I could find how to add Web Analytics to the Jekyll Chirpy Theme!

  1. https://www.websitecarbon.com/

  2. https://github.com/Lissy93/web-check

MIT | 🕵️‍♂️ All-in-one OSINT tool for analysing any website

  1. See how a linkshortener see your site: https://dub.co/

  2. Does the site have Broken Links?

#podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://jalcocert.github.io/JAlcocerT/ > linkchecker_output.txt

docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://www.example.com

You will get a summary in the end of the file with:

Statistics:
Downloaded: 26.0MB.
Content types: 234 image, 202 text, 0 video, 0 audio, 8 application, 0 mail and 2209 other.
URL lengths: min=14, max=880, avg=58.

That's it. 2653 links in 2653 URLs checked. 20 warnings found. 24 errors found.
Stopped checking at 2025-03-05 10:43:17+000 (3 minutes, 9 seconds)

You can use LinkChecker within a GHA workflow

Other Software to Create a Web Pages

Does all of this sounds too complex for the first website?

Then, Try with:

  1. Wordpress or Ghost

  2. Instant Land

GPL3.o | Create, Copy, Modify landing pages for all your needs

  1. Writefreely (but does not provide a docker container for a quick spin)

aGPL3 | A clean, Markdown-based publishing platform made for writers. Write together and build a community. Does NOT provide a clear container for SelfHost.

  1. Other ways to get a personal blog

The Small Web

A very interesting concept, for minimalistic sites:

What I've learnt about PythonInteresting IT Concepts