Come installare e creare un blog con Hexo su Ubuntu 20.04
Su questa pagina
- Prerequisiti
- Configura firewall
- Installa Node.js
- Installa Hexo
- Configura Hexo
- Installazione di un tema
- Crea e pubblica un post
- Installazione di un plug-in
- Server di prova
- Genera file Hexo Static
- Installa e configura Nginx
- Installa SSL
- Aggiorna Hexo
- Distribuzione di Hexo
- Conclusione
Hexo è un framework di blogging statico basato su Node.js. Hexo ti consente di scrivere post in formato Markdown. Questi post del blog vengono elaborati e convertiti in file HTML statici utilizzando temi predefiniti.
È diverso dal solito software di blogging come WordPress in quanto genera file statici. WordPress carica il blog in modo dinamico eseguendo il codice PHP ogni volta che ricarichi il sito, il che lo rende suscettibile alle vulnerabilità.
In questo tutorial imparerai come installare Hexo e usarlo per creare un blog su un server basato su Ubuntu 20.04.
Prerequisiti
-
Ubuntu 20.04 based server with a non-root user with sudo privileges.
-
Git should be installed. If you don't have git installed, you can do it via following commands.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email ""
-
An account on Github.
Configura firewall
Ubuntu 20.04 viene fornito con Uncomplicated Firewall (UFW) per impostazione predefinita. In caso contrario, installalo prima.
$ sudo apt install ufw
Abilita la porta SSH.
$ sudo ufw allow "OpenSSH"
Abilita il firewall.
$ sudo ufw enable
Abilita la porta 4000 utilizzata dal server Hexo.
$ sudo ufw allow 4000
Inoltre, apri le porte HTTP e HTTPS di cui avremo bisogno in seguito.
$ sudo ufw allow http
$ sudo ufw allow https
Controlla lo stato del firewall.
$ sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
80/tcp ALLOW Anywhere
4000 ALLOW Anywhere
443/tcp ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
Installa Node.js
Poiché Hexo è basato su Node.js, devi prima installarlo.
Eseguire il comando seguente per aggiungere il repository Node.js.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Installa Node.js.
$ sudo apt-get install nodejs
Verificare se è installato correttamente.
$ node --version
v14.15.0
Installa Hexo
Eseguire il comando seguente per installare il pacchetto Hexo.
$ sudo npm install hexo-cli -g
Il parametro -g
installa globalmente il pacchetto hexo-cli
che ti permetterà di installare Hexo blog in qualsiasi directory di tua scelta.
Crea la directory in cui installare Hexo.
$ sudo mkdir -p /var/www/hexo
Imposta le autorizzazioni e la proprietà richieste.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
Successivamente, è necessario inizializzare e configurare i file necessari per il blog Hexo. Per farlo, passa alla directory che hai appena creato.
$ cd /var/www/hexo
Inizializza il blog Hexo.
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
INFO Start blogging with Hexo!
Installa Hexo.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for : wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 5 packages from 1 contributor and audited 191 packages in 1.567s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Ora puoi controllare la struttura della directory.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
Il file _config.yml
contiene la configurazione per il tuo blog Hexo. La maggior parte delle impostazioni del blog può essere modificata da qui.
La directory node_modules
contiene tutti i pacchetti di cui Hexo ha bisogno e quelli da cui dipende.
Il file package.json
contiene un elenco di tutti i pacchetti e dei relativi numeri di versione di cui Hexo ha bisogno.
Il file package-lock.json
viene generato automaticamente da npm
ogni volta che esegui un'installazione o una modifica al pacchetto Hexo. Contiene informazioni sui pacchetti e sulle versioni che sono state installate o modificate.
La directory scaffolds
contiene i modelli su cui si baseranno i post e le pagine del tuo blog.
La directory source
contiene il contenuto effettivo del sito in formato HTML/CSS che viene poi pubblicato sul web. Qualsiasi cartella o file con prefisso _
(underscores) viene ignorato da Hexo tranne la cartella _posts
. Per ora la directory è vuota perché non abbiamo scritto o pubblicato nulla.
La directory themes
contiene i temi del tuo blog.
Configura Hexo
Apri il file _config.yml
per la modifica.
$ nano _config.yml
Controlla la sezione del file intitolata Site
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
Le opzioni sono abbastanza autoesplicative. Cambia il nome del tuo sito, imposta un sottotitolo se lo desideri. Aggiungi una descrizione del tuo sito e alcune parole chiave per descriverlo. Cambia il nome dell'autore e il fuso orario del tuo sito.
Successivamente, controlla la sezione URL
del file.
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
Cambia l'URL del tuo sito con il tuo nome di dominio. Assicurati di utilizzare HTTPS nel tuo URL poiché installeremo SSL in un secondo momento.
Se non desideri che l'URL del tuo sito mostri index.htm
l alla fine di ogni pagina, puoi modificare entrambe le opzioni trailing_index
e trailing_html
a false
.
Ci sono alcune altre impostazioni che dovresti attivare.
Cambia il valore della variabile default_layout
da post
a draft
. Questo creerà nuovi post come bozze, quindi dovrai pubblicarli prima che appaiano sul blog.
Cambia il valore della variabile post_asset_folder
in true
. Ciò ti consentirà di avere cartelle di immagini individuali per ogni post invece di una singola cartella di immagini per tutti i post.
Salva il file premendo Ctrl+X e immettendo Y quando richiesto.
Installazione di un tema
Hexo viene fornito con un tema predefinito denominato Landscape. Puoi passare a un tema diverso installando un altro tema Hexo disponibile dalla sua pagina Temi.
Tutti i temi Hexo sono disponibili tramite Github, quindi è necessario clonare il repository Github dei temi.
Per il nostro tutorial, stiamo installando il tema Next. Passa alla directory Hexo e clona il repository Github dei temi nella directory themes
.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Cambia il file /var/www/hexo/_config.yml
per cambiare il tema da Landscape a Next.
$ nano _config.yml
Apporta la modifica alla variabile del tema per cambiare il tema.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Puoi cambiare le impostazioni del tema modificando il file /var/www/hexo/themes/next/_config.yml
.
Crea e pubblica un post
È ora di creare il nostro primo post.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
Apri il nuovo post per la modifica.
$ nano ./source/_drafts/first-post.md
Ogni post deve avere la sua front-matter
impostata. Il front-matter è un breve blocco di JSON o YAML che configura dettagli essenziali come il titolo del post, la data di pubblicazione, le categorie, i tag, ecc. Sostituisci i dati predefiniti con le opzioni corrette.
title: Howtoforge's First Post
tags:
- test
categories:
- Hexo
comments: true
date: 2020-11-14 00:00:00
---
## Markdown goes here.
**This is our first post!**
Se vuoi inserire un'immagine nel tuo post, aggiungi il seguente codice nel tuo post.
{% asset_img "example.jpg" "This is an example image" %}
Successivamente, copia il file example.jpg
nella directory \source\_posts\first-post
, da dove verranno recuperate tutte le immagini per il tuo primo post.
Salva il file premendo Ctrl+X e immettendo Y quando richiesto una volta terminato di scrivere il post.
Successivamente, pubblica il post.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
Questo post sarà visibile una volta che ospiteremo il blog.
Installazione di un plug-in
Hexo ha poche centinaia di plugin che puoi installare. Puoi installare uno o più plugin a seconda del tuo utilizzo.
Tutti i plugin Hexo sono pacchetti Node.js e sono ospitati su Github dove puoi trovare i loro dettagli di installazione e configurazione.
Per il nostro tutorial, installeremo il plugin hexo-filter-nofollow
.
Assicurati di essere prima nella directory hexo e poi installa il plugin.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
Apri il file di configurazione Hexo per la modifica.
$ sudo nano _config.yml
Incolla il seguente codice alla fine del file.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
L'opzione enable
abilita il plugin. L'opzione field
definisce l'ambito del plug-in in cui site
aggiunge l'attributo nofollow ai collegamenti esterni sull'intero sito e post
aggiunge l'attributo nofollow solo a i link nei post. L'opzione exclude
autorizza i domini su cui non verrà aggiunto l'attributo nofollow.
Server di prova
Hexo viene fornito con un server Web di base. Ora che il nostro post è stato pubblicato, è il momento di avviare il server di test Hexo.
$ hexo server
Ora puoi lanciare l'URL http://yourserverIP:4000
nel tuo browser e vedrai la seguente pagina.
Esci dal server premendo Ctrl + C sul terminale.
Genera file esadecimali statici
Il server di prova di Hexo può servire il blog in modo dinamico così come attraverso i file statici. Il comando precedente ha servito il blog in modo dinamico.
Esistono diversi modi per servire pubblicamente il blog Hexo. Per il nostro tutorial, serviremo i file statici Hexos utilizzando il server Nginx.
Eseguire il seguente comando per generare i file statici.
$ hexo generate
Il comando precedente genera file statici che vengono memorizzati nella cartella /var/www/hexo/public
. Useremo il server Nginx per servire i file da questa cartella.
Installa e configura Nginx
Installa il server Nginx.
$ sudo apt install nginx
Crea e apri il file di configurazione Hexo per Nginx.
$ sudo nano /etc/nginx/sites-available/hexo.conf
Incolla il seguente codice al suo interno.
server {
server_name hexo.example.com;
root /var/www/hexo/public;
index index.html index.htm;
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m; # about 40000 sessions
ssl_session_tickets off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25> ssl_prefer_server_ciphers off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
try_files $uri $uri/ =404;
}
}
server {
if ($host = hexo.example.com) {
return 301 https://$host$request_uri;
}
server_name hexo.example.com;
listen 80;
listen [::]:80;
return 404;
}
Salva il file premendo Ctrl+X e immettendo Y quando richiesto.
Attiva la configurazione.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Apri il file /etc/nginx/nginx.conf
per la modifica.
$ sudo nano /etc/nginx/nginx.conf
Incolla la riga seguente prima della riga include /etc/nginx/conf.d/*.conf
server_names_hash_bucket_size 64;
Cambia il valore della variabile types_hash_max_size
da 2048 a 4096.
types_hash_max_size 4096;
Premi Ctrl + X per chiudere l'editor e premi Y quando ti viene chiesto di salvare il file.
Prova per assicurarti che non ci siano errori di sintassi nella tua configurazione.
$ sudo nginx -t
Se non ci sono problemi, riavvia il server Nginx.
$ sudo systemctl restart nginx
Installa SSL
È ora di installare SSL utilizzando il servizio Lets Encrypt per il nostro blog hexo.
Per questo, installa Certbot.
$ sudo apt install certbot
Arresta Nginx perché interferirà con il processo Certbot.
$ sudo systemctl stop nginx
Genera il certificato. Abbiamo anche bisogno di creare un certificato DHParams.
$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m --keep-until-expiring
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
Dobbiamo anche impostare un cron job per il rinnovo automatico di SSL. Per aprire l'editor crontab, eseguire il seguente comando.
$ sudo crontab -e
no crontab for root - using an empty one
Select an editor. To change later, run 'select-editor'.
1. /bin/nano <---- easiest
2. /usr/bin/vim.basic
3. /usr/bin/vim.tiny
4. /bin/ed
Choose 1-4 [1]: 1
Il comando precedente apre l'editor Crontab. Se lo stai eseguendo per la prima volta, ti verrà chiesto di scegliere l'editor per modificare i lavori Cron. Scegli 1 per l'editor Nano.
Incolla la seguente riga in basso.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
Il lavoro cron di cui sopra eseguirà certbot alle 2:25 ogni giorno. Puoi cambiarlo in qualsiasi cosa tu voglia.
Salva il file premendo Ctrl + X e immettendo Y quando richiesto.
Aggiorna Hexo
Passa alla cartella Hexo.
$ cd /var/www/hexo
Se stai passando a una versione principale di Hexo, devi aggiornare il file package.json
. Aprilo per la modifica. Puoi saltare direttamente al comando di aggiornamento per l'aggiornamento alle versioni secondarie.
$ nano package.json
Modifica la seguente riga nella sezione dependencies
.
"hexo": "^5.0.0",
Cambia il valore 5.0.0
alla versione successiva ogni volta che verrà rilasciato in futuro. Ad esempio, se Hexo 6.0 è disponibile, cambialo in seguito.
"hexo": "^6.0.0",
Salva il file premendo Ctrl + X e immettendo Y quando richiesto.
Eseguire il seguente comando per aggiornare hexo.
$ npm update
Distribuzione di Hexo
Hexo non solo può essere ospitato direttamente sul tuo server, ma può anche essere distribuito direttamente su Git, Netlify, Vercel, Heroku, OpenShift e vari altri metodi.
La maggior parte dei plug-in di distribuzione richiede l'installazione di un plug-in. Per il nostro tutorial, configureremo la distribuzione di Hexos su Netlify. Se desideri eseguire la distribuzione su Netlify, non è necessario seguire i passaggi relativi a Nginx e SSL poiché Netlify viene fornito con SSL gratuito.
Un sito Netlifys viene solitamente distribuito da un repository Git. Ma per il nostro scopo, pubblicheremo direttamente il sito statico su Netlify utilizzando il suo strumento CLI.
Installa Netlify CLI.
$ sudo npm install netlify-cli -g
Puoi verificare se lo strumento CLI è stato installato.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Accedi a Netlify.
$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
Copia il login dal terminale nel tuo browser e accedi al tuo account Netlify per autenticarti.
Puoi controllare se sei loggato usando il seguente comando.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email:
Teams:
Your Team's team: Collaborator
Passa alla directory pubblica di Hexos.
$ cd /var/www/hexo/public
Distribuisci il sito su Netlify.
$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge
Site Created
Admin URL: https://app.netlify.com/sites/Howtoforge
URL: https://Howtoforge.netlify.app
Site ID: 986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!
Logs: https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
Scegli con i tasti freccia per creare un nuovo sito e inserisci un nome per il tuo sito. Immettere .
come directory da distribuire da cui fa riferimento alla directory corrente.
Ti verrà fornito un URL di bozza. Copia l'URL e caricalo in un browser. Se tutto sembra a posto, esegui il comando seguente per eseguire una distribuzione di produzione.
$ netlify deploy --prod
Ora il tuo sito dovrebbe essere attivo. Puoi aggiungere un dominio personalizzato nelle impostazioni di Netlify per indirizzarlo a un sito reale.
Ogni volta che pubblichi un nuovo post e generi nuovi file, esegui il seguente comando dalla directory principale di Hexos per distribuire le modifiche a Netlify.
$ netlify deploy --dir ./public --prod
Conclusione
Questo conclude il nostro tutorial per installare e creare un blog utilizzando il framework Hexo Blog su un server basato su Ubuntu 20.04. Se hai domande, pubblicale nei commenti qui sotto.