Phenquestions
Questo tutorial ti mostrerà come puoi creare un semplice blog usando un generatore di siti statici che è molto veloce e facile da usare.
Che cos'è un SSG?
SSG, o Static Site Generator, è un'applicazione web che converte il contenuto dinamico di una pagina web in contenuto statico solitamente archiviato localmente. I generatori di siti statici non richiedono database e backend, eliminando così la necessità di imparare a programmare. Si concentra principalmente sulla scrittura e sulla presentazione del contenuto.
SSG contro. CMS
Il modo più diffuso per creare siti Web e gestire i contenuti è utilizzare CMS o sistemi di gestione dei contenuti come WordPress, Drupal, Joomla, ecc.
I sistemi CMS funzionano creando e gestendo i contenuti direttamente utilizzando un'interfaccia interattiva. Poiché i dati in un CMS vengono recuperati dal database, i CMS sono molto lenti poiché il contenuto viene recuperato e servito come contenuto dinamico. I sistemi CMS sono anche soggetti a vulnerabilità di sicurezza poiché si basano su plug-in esterni scritti da altri sviluppatori per aumentare le funzionalità.
D'altra parte, i generatori di siti statici funzionano creando mezzi di contenuto offline come editor di testo e visualizzano la visualizzazione della pagina finale al momento della pubblicazione. Poiché il contenuto è reso localmente, senza bisogno di un database, la pagina viene visualizzata più velocemente e le velocità di caricamento sono incredibilmente elevate.
I generatori di siti statici sono costituiti da codice precompilato che funge da motore per il rendering del contenuto pubblicato.
Come costruire un blog statico con Hexo
Una delle scelte popolari per costruire un sito statico è Hexo.
Hexo è un'applicazione SSG semplice, veloce e potente scritta in NodeJS. Sebbene ci siano altre scelte per costruire un sito statico, Hexo ti consente di personalizzare il tuo sito e integrare vari strumenti.
Diamo un'occhiata a come possiamo creare un semplice sito statico con Hexo.
Installazione di Hexo
Prima di poter costruire un sito, dobbiamo impostare i requisiti esadecimali e installarlo. Per questo, richiediamo NodeJS e git.
Inizia aggiornando il tuo sistema:
sudo apt-get updatesudo apt-get upgrade
Una volta aggiornato il sistema, installa git
sudo apt-get install gitQuindi, installa nodejs da nodesource usando il comando:
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -apt-get install -y nodejs
Una volta installato Nodejs, possiamo procedere all'installazione di hexo utilizzando il comando:
npm install -g hexo-cliLavorare con Hexo
Una volta installato hexo, puoi creare un sito e pubblicare contenuti. Vediamo come lavorare con Hexo. Tieni presente che questa è una guida rapida e semplice. Fare riferimento alla documentazione per saperne di più.
Creare un sito
Per creare un nuovo sito hexo, usa il comando seguente:
hexo init HexoSitecd HexoSite
installazione npm
Comprensione della struttura della directory Hexo
Una volta inizializzato un nuovo sito Hexo, otterrai una struttura di directory come quella qui sotto:
-rw-r--r-- 1 cs cs 0 8 feb 20:51 _config.paesaggio.yml-rw-r--r-- 1 cs cs 2439 8 feb 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 feb 20:51 node_modules
-rw-r--r-- 1 cs cs 615 8 feb 20:51 pacchetto.json
-rw-r--r-- 1 cs cs 56716 8 feb 20:51 pacchetto-lock.json drwxr-xr-x 1 cs cs 4096 8 feb 20:51 scaffolds drwxr-xr-x 1 cs cs 4096 8 feb 20:51 source drwxr-xr-x 1 cs cs 4096 8 feb 20:51 temi
Il primo file è _config.yml contiene tutte le impostazioni per il tuo sito. Assicurati di modificarlo prima di distribuire il tuo sito perché conterrà valori predefiniti.
Il prossimo file è il pacchetto.json che contiene i dati e le configurazioni dell'applicazione NodeJS. Qui troverai i pacchetti installati e le loro versioni.
Puoi saperne di più sul pacchetto.json dalla pagina delle risorse di seguito:
https://docs.npmjs.com/cli/v6/configuring-npm/package-json
Creare un blog
Per creare un semplice blog in hexo, usa il comando:
hexo nuovo blog “Hello World Blog”Una volta creato, puoi archiviare il file markdown nella directory /source/_posts. Dovrai utilizzare il linguaggio di markup Markdown per scrivere contenuti.
Creare una nuova pagina
Creare una pagina in Hexo è semplice; usa il comando:
hexo nuova pagina “Pagina-2”L'origine della pagina si trova in /source/Page-2/index.md
Generazione e pubblicazione di contenuti
Dopo aver pubblicato i tuoi contenuti su hexo, dovrai eseguire l'applicazione per generare il contenuto statico.
Usa i comandi qui sotto:
$ hexo generaINFO Convalida della configurazione
INFO Inizia elaborazione
INFO File caricati in 966 ms
INFO generate: archivi/indice.html
INFO generate: Pagina-2/indice.html
INFO Generato: archivi/2021/indice.html
INFO Generato: indice.html
INFO Generate: archivi/2021/02/index.html
INFO generate: js/script.js
INFO Generato: fancybox/jquery.fantasiabox.min.css
INFO Generato: 2021/02/08/Hello-World-Post/indice.html
INFO generato: css/stile.css
INFO Generato: 2021/02/08/hello-world/index.html
INFO generate: css/fonts/FontAwesome.off
INFO generate: css/fonts/fontawesome-webfont.woff
INFO generate: css/fonts/fontawesome-webfont.eot
INFO Generato: fancybox/jquery.fantasiabox.min.js
INFO generate: css/fonts/fontawesome-webfont.woff2
INFO Generato: js/jquery-3.4.1.min.js
INFO generate: css/fonts/fontawesome-webfont.ttf
INFO generate: css/images/banner.jpg
INFO generate: css/fonts/fontawesome-webfont.svg
INFO 19 file generati in 2.08 s
Per servire l'applicazione, esegui il comando:
$ hexo server INFO Convalida configurazione INFO Avvia elaborazione INFO Hexo è in esecuzione su http://localhost:4000 . Premi Ctrl+C per interrompere.Conclusione
Questa introduzione rapida e semplice ti ha mostrato come utilizzare il sito statico Hexo. Se hai bisogno di maggiori informazioni su come lavorare con Hexo, fai riferimento alla documentazione principale fornita di seguito:
https://hexo.io/docs
