Riflessioni sul lancio di questo blog
Condivido gli elementi valutati per il lancio di questo blog, dallo scopo alla scelta dei framework frontend e del CMS headless.
Ho raccolto le mie riflessioni iniziali sul lancio di questo blog.
【Scopo】
Scrivendo sul blog delle tecnologie che acquisisco, miro a ottenere una comprensione accurata e approfondita della tecnologia e, come bonus, a provare a monetizzare il sito per coprire i costi di manutenzione del server. Pertanto, le priorità sono le seguenti:
- Acquisire le ultime tecnologie.
- Mantenere i costi operativi il più bassi possibile. Se le spese superano le entrate, diventa difficile continuare.
- Minimizzare le attività esterne alla scrittura, come la gestione tecnica e la pubblicazione degli articoli.
- I contenuti degli articoli saranno principalmente tecnici, seguiti dai miei hobby.
【Considerazioni sull'ambiente operativo】
Ho elencato le modalità operative per avviare un blog.
<Svantaggi dei siti gratuiti>
- Non consentono di acquisire le ultime tecnologie.
- I siti gratuiti mostrano automaticamente annunci pubblicitari, aumentando le visualizzazioni che non generano entrate per te. Inoltre, possono essere mostrati annunci indesiderati.
- Essendo un servizio di blogging preconfigurato, lo sforzo iniziale è probabilmente minimo.
<Svantaggi dei siti a pagamento>
- Non consentono di acquisire le ultime tecnologie.
- Il problema è che costano denaro. C'è un'alta probabilità di abbandonare il progetto.
- Probabilmente richiedono il minor sforzo di gestione.
<Indipendente: WordPress + Server domestico + Cloudflare Tunnel>
- Solo Cloudflare Tunnel rappresenta una novità.
- Sostanzialmente gratuito, quindi è facile continuare.
- WordPress stesso è diventato molto complesso, il che tende a complicare la gestione e gli aggiornamenti degli articoli, comportando alcuni costi di apprendimento. *Entro limiti accettabili?
<Indipendente: JS Framework + GitHub + Headless CMS + Cloudflare Pages>
- Gestione dei contenuti tramite Headless CMS (una forma moderna di CMS) abbinato a un framework JS.
- Praticamente gratuito, quindi l'obiettivo è raggiunto.
- L'uso tramite SaaS è comodo, ma se il servizio chiude si è bloccati. Maggiori costi e sforzi di migrazione.
【Ambiente di sviluppo】
Pertanto, in base alle considerazioni di cui sopra e alle informazioni sui framework riportate di seguito, come parte dei miei studi per futuri progetti di sviluppo di app su larga scala, ho deciso di provare a costruire un sito blog con un framework frontend + headless CMS + Cloudflare Pages.
<Informazioni sull'editor>
Per scrivere codice, è comune installare un ambiente di sviluppo integrato (IDE) e aggiungere le estensioni adeguate. VS Code è ottimo, ma poiché il leggero e veloce editor Zed ha introdotto il supporto per Astro, utilizzerò quest'ultimo.
<Ambiente desktop per lo sviluppo>
Lo sviluppo del codice richiede l'integrazione con altri servizi cloud come npm (Node Package Manager) e GitHub. (Riferimento: npx sta per "Node Package Execute". A differenza di npm, è uno strumento da riga di comando per eseguire temporaneamente pacchetti Node.js senza installarli globalmente, evitando di sporcare l'ambiente di sviluppo.)
Tipo di OS | Caratteristiche |
Linux | Si dice che circa il 70% dei server web mondiali esegua Linux. Ha un'elevata quota di mercato nel settore server e offre la maggior parte degli strumenti di sviluppo. Tuttavia, l'interfaccia desktop (GUI) e il supporto per le applicazioni sono notevolmente inferiori rispetto a Mac o Windows, rendendolo meno adatto come computer di lavoro principale per uno sviluppatore. |
macOS | Sviluppato originariamente come sistema operativo Unix-like, ha un'ottima compatibilità con i comandi Linux e la maggior parte di essi può essere utilizzata direttamente. L'interfaccia desktop è eccellente ed è la scelta di molti sviluppatori. |
Windows | La quota di mercato per uso aziendale e generico è schiacciante e, essendo adatto anche al gaming, detiene la quota maggiore di computer desktop. Installando WSL (Windows Subsystem for Linux), è possibile eseguire un ambiente Linux su Windows. Esegue Linux come macchina virtuale condividendo i file, unendo il meglio dei due mondi. Dalla versione 2.0, moltissimi sviluppatori lo utilizzano. |
Un ambiente per un blog non richiede impostazioni di sviluppo avanzate, quindi Mac o Windows vanno benissimo. Tuttavia, per evitare la fatica di installare WSL, questa volta procederò con macOS.
【Dev Container】
Nello sviluppo in team, l'unificazione dell'ambiente tramite DevContainers is una pratica comune. Tuttavia, sinceramente, introdurre DevContainers in un progetto gestito da una sola persona come un blog sembra comportare più complicazioni di manutenzione che benefici, quindi per ora ho deciso di soprassedere.
【Caratteristiche dei framework frontend】
In genere, una raccolta di funzioni e librerie utili strutturate secondo una "filosofia di progettazione" per creare un sito è chiamata framework. Seguire questa filosofia durante la scrittura del codice rende lo sviluppo efficiente. Sebbene richieda la comprensione della filosofia e l'apprendimento delle sue caratteristiche, una volta imparato garantisce coerenza nel codice, rendendolo più leggibile e meno soggetto a bug, elemento essenziale per i siti di grandi dimensioni.
Nome del framework | Creatore | Caratteristiche |
React (Molti utenti) | Meta (Facebook) | L'interfaccia utente è gestita a componenti e il rendering è veloce perché aggiorna solo le differenze tramite il DOM virtuale. Più simile a una libreria UI che a un framework completo. *Personalmente non mi piace |
Vercel | Un framework full-stack basato su React. Mentre React opera solo sul client, Next.js include il lato server, consentendo rendering ottimali e tempi di caricamento più rapidi. *Attualmente deprecato! (Il CEO è pessimo, quindi non mi piace più) | |
Vue.js (Molti utenti) | Evan You | Semplice e con bassi costi di apprendimento per i singoli sviluppatori. Consente di fare molto tramite varie combinazioni. Basato su componenti. Facile da integrare con altre librerie. Moltissime risorse in rete. Personalmente mi piace. |
Alexandre Chopin, ecc. | Un framework full-stack basato su Vue.js. Particolarmente indicato per la creazione di siti come SPA (Single Page Application). | |
Astro Technology Company | Astro converte l'intera pagina in HTML statico ed elimina il JavaScript non necessario per prestazioni elevate. Progettato per consentire l'uso simultaneo di diversi framework UI como React o Vue. Più adatto per MPA che per SPA, la visualizzazione iniziale è velocissima. Il framework ideale per un blog. |
<Riferimento>
- Risultati della migrazione da Next.js ad Astro
- React ha derivati come React Native, che consentono di creare app mobili native per smartphone. Se si forniscono servizi su più piattaforme, il costo di apprendimento si riduce in proporzione.
- Tuttavia, per lo sviluppo multipiattaforma iOS e Android, Flutter di Google ha attualmente più slancio rispetto a React Native. L'interfaccia utente è condivisa, quindi l'esperienza d'uso non cambia a seconda del dispositivo, rendendolo molto comodo per le applicazioni aziendali. Pertanto, non vedo motivi per forzare l'adozione di React.
【Headless CMS Open Source (Gratuiti)】
Non esistono molti tipi di headless CMS open-source da installare su server propri. Come microCMS, molti sono offerti in modalità cloud SaaS. Tuttavia, l'open-source offre vantaggi significativi se si desidera mantenere la proprietà interna dei dati o per evitare costi legati alla scalabilità. In ogni caso, è richiesto un server di proprietà.
Nome | Caratteristiche |
Probabilmente il più famoso headless CMS open-source. Licenza MIT. Gratuito sia per uso personale che commerciale, ma offre versioni a pagamento con più funzionalità. *Il nucleo sembra basato su React. | |
Sanity | Il punto di forza è uno schema dati flessibile e la modifica collaborativa in tempo reale. Ottimo per la gestione di contenuti dinamici. Di tipo cloud (SaaS) con piano gratuito disponibile. |
Scritto in JavaScript, funziona su Node.js. Rilasciato sotto licenza MIT. Disponibile l'immagine ufficiale su Docker Hub. Un headless CMS specializzato per blog, con una struttura simile a WordPress. | |
Precedentemente noto come Netlify CMS. Rilasciato sotto licenza MIT. Pochi articoli online. CMS open-source basato su Git, si collega direttamente al repository di codice. | |
Molto diffuso nelle grandi aziende. Scritto in JavaScript, funziona su Node.js. Trasforma i database SQL esistenti in API velocissime in modo automatico. | |
Basato su Python. Utilizzato da NASA e Google. | |
Il database sembra limitato a MongoDB. Basato su JavaScript. | |
Utilizzato da Unity. Licenza Apache 2.0. | |
Sviluppo aziendale. | |
Licenza GPL 3.0. Salva i contenuti in file JSON senza bisogno di database. |
<Scelta dell'headless CMS>
Trattandosi di un blog personale che deve rimanere gratuito per essere sostenibile, la scelta si è ridotta ai sistemi open-source con licenza MIT come Strapi, Ghost e Directus. Tra questi, ho scelto Strapi perché lo ritengo più adatto a future espansioni e all'e-commerce.
【Conclusione】
Alla fine ho deciso di adottare Astro + Strapi + AlloyDB (PostgreSQL) + TailwindCSS + Cloudflare Pages + MacBook Pro + editor Zed come infrastruttura tecnologica per questo blog. La chiave di tutto sta nel flusso di build.
- Avviare il container di Strapi su Mac e redigere gli articoli.
- Nella fase di build del blog, estrarre le pagine statiche e le immagini da Strapi (nessun bisogno di mantenere Strapi attivo in produzione!).
- Caricare (effettuare il deploy) dei file statici generati dal build su Cloudflare Pages. Il sito web finale è puramente statico con pochissimo JavaScript. I tempi di caricamento sono rapidissimi.
Il punto di forza è che la produzione è **composta esclusivamente da dati statici**. È come se usassimo Strapi solo per la stesura degli articoli.