Attraction Web Offer x Show a Problem

Tl;DR

If I ever talked with you about how to build a website: its obsolete.

+++ Gitlab Pages

Intro

This is Vertigo.

Not the U2 song.

But… see.

Last year I completed all these pieces of the puzzle: PaaS + DecapCMS x Astro

Time to put those together with a quick WebApp/SaaS to free my time and enhance the output of people’s DIYs.

How about improving CX for DIYs websites?

#git clone https://github.com/JAlcocerT/poc_webs_magnet
docker ps -a --filter "name=audit"
#docker logs --tail 120 auditmagnet-prod
docker compose -f docker-compose.prod.yml up -d --build #https://webaudit.jalcocertech.com/
make help

Was able to put some UI/X changes with cc into the original product.

As well as some backend changes like get leads flowing into pocketbase.

See the details at [this section].

You know that you can reach webaudit.jalcocertech.com as created here on this repo

The thing is: Does it needs to be a trade off between a Wordpress/Ghost/Wix or a code driven cool SSG?

Cant we go ECO/green and have websites that respect the environment?

flowchart LR
    %% --- Styles ---
    classDef free fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px,color:#1B5E20;
    classDef low fill:#FFF9C4,stroke:#FBC02D,stroke-width:2px,color:#FBC02D;
    classDef mid fill:#FFE0B2,stroke:#F57C00,stroke-width:2px,color:#F57C00;
    classDef high fill:#FFCDD2,stroke:#C62828,stroke-width:2px,color:#C62828;
    classDef bridge fill:#E3F2FD,stroke:#1565C0,stroke-width:3px,color:#0D47A1;

    %% --- Nodes ---
    L0("Free Content
($0)"):::free
    L1("AuditMagnet 🛡️
(Free Web Audit )"):::free
    L11(" Blog/Youtube"):::free
    L12(" ebooks"):::free
    L2("DIY
(Optimization Guides) $"):::low
    L3("Done With You
(Consulting) $$"):::mid
    L4("Done For You
(Full Service) $$$"):::high
    L44("GenBI
Shopify PoC"):::bridge
    L45("Real Estate
Funnel Bot"):::bridge


    %% --- Connections ---
    L0 --> L1
    L0 --> L2
    L0 --> L11
    L0 --> L12
    L2 --> L3
    L3 --> L4
    L44 -->|Enhancing| L4
    L45 -->|Enhancing| L4

As per my service, you can at least be aware how good your site is:

The launch strategy: aka, focus strategy

The Tier of Service: DIY (1b - leverages on actual tech stack Ive put together - PaaS x (WP/Ghost or SSG+CMS))

The tech stack:

The journey to a CMS managed cool Website

npm run dev
npx decap-server #in terminal 2

make hugo-dev #hugo server --bind="0.0.0.0" --baseURL="http://localhost" --port=1313 #localhost:1313

#git clone https://github.com/JAlcocerT/EntreAgujayPunto.git #http://jalcocert-x300-1:8090/
npm install npm-run-all --save-dev
#npm run dev:full #decapcms local + hugo local dev
HUGO_BASEURL="http://jalcocert-x300-1" HUGO_PORT=1313 npm run dev:full

#hugo server --bind="0.0.0.0" --baseURL="http://192.168.1.100" --port=1313
#npm run cms
make dev-all

The journey of the infra side

Because not everything is code.

What the experience show me

a CMS x Astro, why?

From the experience: Dont do more than 3 websites to very close people if you they are not able to enable self-service.

Thats where selfhosted tools like: https://github.com/vriteio/vrite are supposed to shine.

Open-source developer content platform

I also got inspired by tools listed: https://www.awesome-homelab.com/category/writing

Particularly by https://www.awesome-homelab.com/item/novel-editor

I would recommend you to consider DecapCMS or….

The journey of putting this together

Fast forward to today: lets put a web/app with UI to bundle all this.

Creating a DIY x PaaS

I thought about building some kind of a PaaS instead of a SaaS

But…with no clients? really?

git init && git add . && git commit -m "Initial commit: Starting N ebooks DIY" && gh repo create 1toN-ebooks --private --source=. --remote=origin --push

This can be easy, but not effort token free.

So skip.

Testing the Web Audits with EAyP v3

See the deployment guide:

#git clone https://github.com/JAlcocerT/foldergram
docker compose -f docker-compose.yml -f docker-compose.local.yml up -d --build --force-recreate
#docker ps -a --filter "name=foldergram"

# One-time copy
scp -r ./data/gallery/ jalcocert@192.168.1.2:/home/jalcocert/foldergram/data/gallery/

#But for photos, rsync is much better — it's incremental (only copies new/changed files) and shows progress:

# First time or any subsequent sync
#rsync -avz --progress ./data/gallery/ jalcocert@192.168.1.2:~/foldergram/data/gallery/

Go to 192.168.1.2:4141 and sync the pushed photos :)

You can try to update files via: thay will be accessed by filebrowser

#docker compose -f docker-compose.yml -f docker-compose.filebrowser.yml up -d
docker compose -f docker-compose.yml -f docker-compose.filebrowser.yml logs filebrowser

Just remember to add _index.md and index.md so that the captions match what you want to write

The web audits …were fine

but the edits and uploads…not there.

So for the v3…

I just played around the forked oss foldergram project:

git clone /foldergram

Few Changes since I drafted this early 2026

1. Formbricks is a survey engine, not a lead database.

#git clone https://github.com/JAlcocerT/poc_webs_magnet
cd ./poc_webs_magnet
make pb-install pb-bootstrap
#docker ps -a --filter "name=pocketbase"
#docker exec pocketbase /pb/pocketbase --version
#docker ps -a --filter "name=magnet" #auditmagnet-prod
make docker-up #make dev
#docker compose logs -f

Conclusions

Remember, you can always do your wordpress stuff.

#/remote-control
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

But considering that you can make awsome one pagers that are converted to the landing…

what for?

mindmap
  root((PaaS))
    Web Containers
      WP
      Ghost
      LinkStack
    SSG + CMS
      HUGO
      Astro
    DIY Landing
    Real Estate
    ChatBots

Yea, what for?

graph TD
    A[www.jalcocertech.com] --> B(blog/YT 0$);
    A --> C(DIY 0/$);
    A --> D(Consult via Cal.com - DWY $$);
    A --> E(Services - DFY $$$);

Or formbricks….

FAQ

If you are building websites, get inspired:

1. https://github.com/gridaco/grida

Apache v2 | Grida — Ambitious 2D Graphics Editor for the Web

Interesting Features for any Web

1. Pop up at time or location of page

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

How Ive improved my websites

You can see:

FOSS

Fossengineer Docs and Theme Directory!

WIP

1. Keep HUGO as SSG
2. Create Doc like section as companion to the blog
3. Create theme directory that works as per the config added at the homelab repo

BaJ

Beyond a journey…

A project that I phased out for now, but with interesting learnings around astro and static websites.

Other Static CMS

What are Static Site Generators?

• https://github.com/zensical/zensical

MIT | A modern static site generator by the Material for MkDocs team

• https://github.com/plentico/plenti

Apache v2 | Static Site Generator with Go backend and Svelte frontend

Build-Time Render Engine (aka Static Site Generator) with Go backend and Svelte frontend

Ships with a fully integrated Git-CMS that you can host for cheap/free right with your static site

Install plenti:

snap install plenti

As the author mentions: Plenti = Hugo + NetlifyCMS

This is a very cool proposal for landing pages see https://plenti.co/themes !

1. https://github.com/keystonejs/keystone

• https://keystonejs.com/docs

Keystone helps you build faster and scale further than any other CMS or App Framework. Describe your schema, and get a powerful GraphQL API & beautiful Management UI for your content and data.

MIT | The superpowered headless CMS for Node.js — built with GraphQL and React

What about GitLab Pages?

Hosting a static website can be simple, secure, and cost-effective.

GitLab Pages embodies these qualities by providing developers with a straightforward platform for hosting static sites directly from GitLab repositories.

GitLab Pages is an integrated feature within GitLab that allows users to publish static websites directly from repositories in their GitLab accounts.

It supports various static site generators like Jekyll, Hugo, and others, or simply HTML, CSS, and JavaScript, making it a versatile option for all types of static content.

Key Features of GitLab Pages

• Seamless Integration with GitLab: Directly connect your static site’s repository with GitLab Pages for continuous integration and deployment without leaving the GitLab ecosystem.
• Custom Domain Support: Easily connect your custom domain to your GitLab Pages site with the added benefit of free SSL certificates provided by Let’s Encrypt.
• Automatic HTTPS: Secure your site by default with HTTPS, enhancing security and trust for your visitors.
• CI/CD Pipeline: Leverage GitLab’s powerful CI/CD tools to automate the build and deployment process, ensuring that updates are pushed live with minimal manual intervention.
• Free and Unlimited: Yes, you read that right. GitLab Pages is completely free and offers unlimited bandwidth, so you can focus on building and sharing your projects without worrying about hidden costs.

Getting Started with GitLab Pages

1. Set Up Your Project:

   • Ensure your static site project is hosted in a GitLab repository. If you’re using a static site generator, set up your project according to the specific requirements of that generator.

2. Configure GitLab CI/CD:

   • Create a .gitlab-ci.yml file in the root of your repository to define the build and deployment process. GitLab Pages integrates with GitLab CI/CD to build and deploy your site whenever you push changes.

3. Enable GitLab Pages:

   • In the project’s settings, navigate to the ‘Pages’ section to configure and enable GitLab Pages. This will automatically deploy your site to a GitLab subdomain, which you can then link to a custom domain if preferred.

Enhancing Your Static Site with GitLab Pages

GitLab Pages is not just for serving static content.

You can enhance site interactivity and functionality using modern web development approaches:

• Client-Side JavaScript: Enrich your site with dynamic content and interactive elements using JavaScript frameworks like React or Vue.js.
• Third-Party APIs: Integrate APIs to bring dynamic data into your static site, such as e-commerce platforms, CMSes, or social media feeds.
• WebAssembly: Use WebAssembly for high-performance web applications directly in the browser, which can be hosted as part of your static GitLab Pages site.

NEW - Make landing

Landing Page x TailWind x VanillaJS x email to SQLITE

NEW - Make landing

Creating the Waiting2Landing Concept x Formbricks