Ricerca nel sito web

Come installare e creare un blog con Hexo su Ubuntu 20.04


Su questa pagina

  1. Prerequisiti
  2. Configura firewall
  3. Installa Node.js
  4. Installa Hexo
  5. Configura Hexo
  6. Installazione di un tema
  7. Crea e pubblica un post
  8. Installazione di un plug-in
  9. Server di prova
  10. Genera file Hexo Static
  11. Installa e configura Nginx
  12. Installa SSL
  13. Aggiorna Hexo
  14. Distribuzione di Hexo
  15. 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

  1. Ubuntu 20.04 based server with a non-root user with sudo privileges.

  2. 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 ""
    
  3. 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.html 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.