What I've learnt about Websites

Documentation

Tools for Dev

You can create cool static websites with these frameworks, and also with Remix.

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

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

Important Files for all Webs 📌

Look always for the <head> - It will guide you to a Base.astro, BaseLayout.astro, head.html…

In there you can do interesting things, like adding web analytics.

About favicons 📌

as in the withastro/starlight Theme or Pacamara

How to get OpenGraph - OGImage right 📌

As seen in Web3Templates - Stablo Theme or in AstroVerse/VisVRS
For HUGO, HUGO Theme Gallery has OG done right

What Ive Learnt about Astro

ℹ️

Astro Setup once and for all

How to Install Dependencies 📌

checking dependencies

npm list @astrojs/starlight
npm install @astrojs/starlight
npm install @astrojs/starlight --legacy-peer-deps #if you have some dep issues

Better SEO for Astro 📌

Seo Package for astro:

import { AstroSeo } from '@astrolib/seo';

as in the Minimal Studio Theme by michael-andreuzza

WebSearch in Astro 📌

as in the withastro/starlight Theme

one of the most complete Astro themes ive seen - also supporting several languages

https://starlight.astro.build/guides/i18n/

Optimized images in Astro 📌

You will need astrojs/mdx installed first and use it within .mdx files:

import { Image } from 'astro:assets'

import photopost1b from '../../assets/image.jpg';

<figure>
  <Image src={photopost1b} width={500} height={200} alt="Exploring Astro Images" />
  <figcaption class="caption">Say hi to Astro</figcaption>
</figure>

Tweaking HUGO Themes

HUGO is great.

The HUGO Setup was the first SSG that I could get working back in the days.

HUGO Themes I Like📌

You can combine HUGO with RevealJS to create awsome presentations!
- Similarly to what we can do with SliDev - Example at MultiChat
- HUGO + RevealJS - Sample1, Sample2

If you are using HUGO, embedd your images with this shortcode

How to Include Search 📌

Description	Link
PageFind with Astro	VisVRS/AstroVerse Example
FuseJS with Astro	AstroEngineeringBlog Example
FuseJS with HUGO	AstroEngineeringBlog Example
Ghost	Compose Overview

How to add ads.txt to HUGO 📌

Create an ads.txt file in your Hugo project’s static directory. The static folder in Hugo is where you put any files you want to be copied directly to the root of your build output.
Add your content to the ads.txt file:

   google.com, pub-123456, DIRECT, abcdef123456

Build your Hugo site:
Verify the output by checking the public directory (Hugo’s default output folder). You should find the ads.txt file in the root of public:
Deploy your site as usual. The ads.txt file should now be available at https://yourdomain.com/ads.txt.

This method ensures that ads.txt is part of your site’s root directory in the final build output, as required by ad networks.

Firebase Custom Domain

HUGO with Github Pages & CICD

Its very important to know the HUGO Version that makes the theme work.

Laos when you are using Github Actions Workflow.

ℹ️

The workflow configures the base path to work properly as per your repo name

This Hextra Theme, as it is, for example, runs fine with v0.117.0:

hugo v0.117.0-b2f0696cad918fb61420a6aff173eb36662b406e+extended linux/amd64 BuildDate=2023-08-07T12:49:48Z VendorInfo=gohugoio

But not with higher versions like v0.124.

ℹ️

Setup HUGO properly!

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

Firebase
Github Pages or Gitlab Pages
Cloudflare: CLI or CF connected to a GH Repo
AWS S3 Buckets - https://blog.cavelab.dev/2021/08/deploying-hugo-blog-to-s3/
Others - Netlify, Server with NGINX…
SelfHosting Static Websites!

See a benchmark of Static Hosting

Free SSG Deployment 📌

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/

You can also try with Cloudflare or Github Pages.

Get Better at Webs

https://stateofjs.com/en-US
Web Analytics: with Umami or Tianji

ℹ️

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

Setup a Static CMS

There are many alternatives!

https://github.com/payloadcms/payload

FAQ

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

How to Optimize Web Images - WebP 📌

https://simplyexplained.com/blog/implementing-webp-images-on-eleventy-site/

Front End RoadMap Back End RoadMap

How to get the HEX colors of websites - SmartColorPicker extension
Explore HEX colors with Color Picker Chrome extension

You need markdown for these SSGs - https://github.com/Cveinnt/LetsMarkdown.com

docker run --rm -dp 3030:3030 cveinnt/letsMarkdown

Is my website performing well?

CDN and Videos for your Website

https://github.com/orthdron/subatic - Extremely simple video hosting Site that scales with you

Interesting Search Engines

Ecosia.org / qwant.com / Brave / DuckDuckGo
Whoogle/SearXNG
Bing

It’s worth to try few of them - not all the content is indexed in the same way across engines

ℹ️

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

Enhancing a Site

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

Other Software to Create a Page

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

Try with:

Instant land
Wordpress or Ghost
Writefreely

Choosing Colors for a Web

https://github.com/eigenmiao/Rickrack

Favicon Creation

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

Discovered thanks to the Hextra theme

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

What I've learnt about Python Interesting IT Concepts