Come costruire un semplice blog con il generatore di siti statico Hexo
Questo tutorial ti mostrerà come impostare un semplice blog utilizzando un generatore di siti statico che è molto veloce e facile da usare.
Cos'è un SSG?
SSG, o generatore di siti statico, è un'applicazione Web che converte il contenuto dinamico su una pagina Web in contenuti statici di solito archiviati a livello locale. I generatori di siti statici non richiedono database e backend, eliminando così la necessità di imparare a codificare. Si concentra principalmente sulla scrittura e sulla presentazione del contenuto.
SSG vs. CMS
Il modo più popolare 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 direttamente i contenuti 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 da contenuto dinamico. I sistemi CMS sono anche soggetti a vulnerabilità di sicurezza in quanto si basano su plugin esterni scritti da altri sviluppatori per aumentare la funzionalità.
D'altra parte, i generatori di siti statici funzionano creando medium offline di contenuti come gli editori di testo e rendono la visualizzazione della pagina finale al momento della pubblicazione. Poiché il contenuto è reso localmente, senza necessità di un database, la pagina rende più veloce e le velocità di caricamento sono incredibilmente veloci.
I generatori di siti statici sono realizzati in codice pre-compito che funge da motore per rendere il contenuto pubblicato.
Come costruire un blog statico con hexo
Una delle scelte popolari per la costruzione di 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 impostare un semplice sito statico con hexo.
Installazione di hexo
Prima di poter costruire un sito, dobbiamo impostare i requisiti HEXO e installarlo. Per questo, abbiamo bisogno di nodejs e git.
Inizia aggiornando il tuo sistema:
Sudo Apt-get Aggiornamento
SUDO APT-OPGRADO
Una volta aggiornato il sistema, installa git
sudo apt-get installa git
Successivamente, installa Nodejs da NodeSource usando il comando:
Curl -sl https: // deb.nodource.com/setup_14.x | Sudo -e Bash -
Apt -get Installa -y Nodejs
Una volta installato Nodejs, possiamo procedere all'installazione di hexo usando il comando:
NPM Installa -G hexo -cli
Lavorare con Hexo
Una volta installato hexo, puoi creare un sito e pubblicare contenuti. Vediamo come lavorare con hexo. Tieni presente che questa è una guida semplice e semplice. Fare riferimento alla documentazione per saperne di più.
Creazione di un sito
Per creare un nuovo sito Hexo, utilizzare il comando di seguito:
hexo init esosito
CD esosito
Installazione NPM
Comprensione della struttura della directory hexo
Una volta inizializzato un nuovo sito Hexo, otterrai una struttura di directory come quella sotto:
-RW-R-R-- 1 CS CS 0 febbraio 8 20:51 _Config.paesaggio.YML
-RW-R-R-- 1 CS CS 2439 feb 8 20:51 _Config.YML DRWXR-XR-X 1 CS CS 4096 feb 8 20:51 Node_modules
-RW-R-R-- 1 CS CS 615 8 febbraio 20:51.JSON
-RW-R-R-- 1 CS CS 56716 FEB 8 20:51 PACKE-LOCK.JSON DRWXR-XR-X 1 CS CS 4096 8 febbraio 20:51 Impolds DRWXR-XR-X 1 CS CS 4096 Feb 8 20:51 Fonte DRWXR-XR-X 1 CS CS 4096 Feb 8 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 file successivo è il pacchetto.File JSON che contiene i dati e le configurazioni dell'applicazione Nodejs. Qui troverai pacchetti installati e le loro versioni.
Puoi saperne di più sul pacchetto.JSON dalla pagina delle risorse qui sotto:
https: // docs.npmjs.com/cli/v6/configurazione npm/pacchetto-json
Creazione di un blog
Per creare un semplice blog in hexo, usa il comando:
Nuovo blog hexo "Hello World Blog"
Una volta creato, è possibile archiviare il file di markdown in /source /_posts directory. Dovrai utilizzare il linguaggio markup Markown per scrivere contenuti.
Creazione di una nuova pagina
Creare una pagina in Hexo è semplice; Usa il comando:
HEXO Nuova pagina "Pagina-2"
L'origine della pagina si trova in/sorgente/pagina 2/indice.MD
Generare e servire il contenuto
Una volta pubblicato i tuoi contenuti su Hexo, dovrai eseguire l'applicazione per generare il contenuto statico.
Usa i comandi di seguito:
$ hexo genera
Informazioni di convalida della configurazione
Informazioni Inizia a elaborare
File di informazioni caricati in 966 ms
Informazioni generate: archivi/indice.html
Informazioni generate: pagina-2/indice.html
Informazioni generate: archivi/2021/indice.html
Informazioni generate: indice.html
Informazioni generate: archivi/2021/02/indice.html
Informazioni generate: JS/Script.js
Informazioni generate: FancyBox/JQuery.FancyBox.min.CSS
Informazioni generate: 2021/02/08/Hello-World-Post/Index.html
Informazioni generate: CSS/stile.CSS
Informazioni generate: 2021/02/08/Hello-World/Index.html
Informazioni generate: CSS/FONTS/FONTAWESA.Otf
Informazioni generate: CSS/FONTS/FONTAWESA-WEBFONT.Woff
Informazioni generate: CSS/FONTS/FONTAWESA-WEBFONT.EOT
Informazioni generate: FancyBox/JQuery.FancyBox.min.js
Informazioni generate: CSS/FONTS/FONTAWESA-WEBFONT.Woff2
Informazioni generate: JS/JQuery-3.4.1.min.js
Informazioni generate: CSS/FONTS/FONTAWESA-WEBFONT.Ttf
Informazioni generate: CSS/Immagini/Banner.jpg
Informazioni generate: CSS/FONTS/FONTAWESA-WEBFONT.Svg
Info 19 file generati in 2.08 s
Per servire l'applicazione, eseguire il comando:
$ hexo Server Info Convalidamento Informazioni di configurazione Inizia Le informazioni di elaborazione hexo sono in esecuzione su http: // localhost: 4000 . Premere Ctrl+C per fermarsi.
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, fare riferimento alla documentazione principale fornita di seguito:
https: // hexo.IO/DOCS