Guida rapida per creare un blog Hexo da zero (edizione 2024)

#Creazione blog

Sei stanco delle interfacce anonime e poco curate dei siti di blog? Sei inondato da notifiche e pubblicità infinite? Hai sempre desiderato creare un blog tutto tuo, ma ti sei fermato di fronte a tutorial complessi e a una serie di codici che ti fanno venire il mal di testa? Allora congratulazioni, questo articolo è qui per guidarti passo dopo passo, nel modo più semplice possibile, nella creazione del tuo blog personale. Ti servirà solo un po’ di pazienza per seguire ogni istruzione.

Hexo, un framework per blog veloce, pulito ed efficiente, è una manna dal cielo per i principianti. E la bellezza di GitHub è che ci evita il fastidio di noleggiare e configurare un server a parte. Per questo, in questa guida, useremo Hexo e GitHub per costruire il tuo blog.

Nel 2018 avevo già scritto una guida rapida per creare un blog da zero. Dato che alcuni plugin sono stati aggiornati e ci sono dettagli da modificare, ho deciso di rilanciare la versione 2024 di questa guida.

Preparazione

Configurazione locale del blog statico Hexo

$ npm install -g hexo-cli
$ hexo init
$ npm install

Esatto, il cuore del tuo blog è già pronto! Vediamo che aspetto ha. Esegui:

$ hexo server

Ora apri il browser, digita localhost:4000 e potrai vedere il tuo blog in anteprima. Fai un piccolo festeggiamento, poi premi Ctrl + C per continuare con i passaggi successivi.

Personalizzazione (iniziale)

Cambiare tema

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g # o hexo generate
hexo server

Configurazione del sito

# Site
title: Il mio mondo sconosciuto // Nome del blog
subtitle:
description:  Do something cool // Una firma/slogan
author: LulalaP                 // Autore
language: zh-Hans               // Lingua del sito
timezone:

Impostare l’avatar nella barra laterale

avatar:
    url: /uploads/avatar.jpg

Migliorare le pagine del blog

Aggiungere menu

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Creare la pagina delle categorie

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Creare l’interfaccia della nuvola di tag

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Creare la pagina “Chi sono”

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---
# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Collegare il blog a GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

A questo punto, apri il browser e visita http://your-name.github.io. Congratulazioni, il tuo blog è finalmente online!

Collegare un dominio personalizzato

A questo punto il blog è completamente configurato e accessibile tramite il dominio di GitHub. Rendere il tutto ancora più perfetto sarebbe associare un dominio più breve e personalizzato.

Acquisto del dominio

Risoluzione del dominio

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Dopo aver configurato la risoluzione del dominio, entra nella directory del blog, crea un nuovo file chiamato CNAME (attenzione, deve essere maiuscolo e senza estensione) nella directory source. Aprilo con un editor di testo e scrivi il dominio che hai acquistato, ad esempio: www.philoli.com

hexo g
hexo d

Ora apri il browser, digita il tuo dominio e premi Invio. Congratulazioni, hai finalmente un blog con il tuo dominio personale!

Pubblicare un nuovo articolo

title Titolo dell'articolo
date Data di creazione (data di creazione del file)
updated Data di modifica (data di modifica del file)
comments Abilita commenti true
tags Tag
categories Categorie
permalink Nome nell'URL (nome del file)
hexo g
hexo d

Personalizzazione (avanzata)

Qui di seguito trovi alcune impostazioni avanzate per personalizzare lo stile del tuo blog. I principianti possono saltare questa sezione per ora.

Aggiungere RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Troncare gli articoli nella homepage

    <!--more-->

Centrare il testo citato negli articoli

{% centerquote %}
Testo citato
{% endcenterquote %}

{% centerquote %} Testo citato {% endcenterquote %}

Modificare lo stile dei blocchi di codice

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Impostare la data di creazione del sito

since: 2024
// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Aggiungere un’immagine di sfondo al blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Se l'immagine non copre, come deve ripetersi
    background-attachment:fixed;    // Se l'immagine deve scorrere con la pagina
    background-size: cover;         // Copre l'intera area
    background-position:50% 50%;    // Posizione dell'immagine
}

Impostare lo sfondo del contenuto del blog come semitrasparente


// Trasparenza del contenuto del blog
// Impostazione della trasparenza per il contenuto degli articoli
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Impostazione della trasparenza per la barra laterale
.sidebar {
  opacity: 0.9;
}

// Impostazione della trasparenza per la barra del menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Impostazione della trasparenza per la barra di ricerca (local-search)
.popup {
  opacity: 0.9;
}

Ottimizzare lo stile dei blocchi di codice inline

// Abbellimento per i tag di codice inline
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}
# Trova la sezione del tag copyright e aggiungi il codice al suo interno.

<div class="copyright">
# ......Qui ci sono già alcune configurazioni
# Aggiungi qui il nuovo codice
</div>

# Dopo l'aggiunta, dovrebbe apparire così:
<div class="copyright">
  # ......Qui ci sono già alcune configurazioni
  # Aggiungi qui il nuovo codice
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Dopo aver confermato che non ci sono problemi, pubblica
hexo d

Aggiungere il file README.md al repository

Normalmente, ogni progetto include un file README.md. Tuttavia, quando si distribuisce con Hexo a un repository, il file README.md del progetto viene sovrascritto. Per evitarlo, è necessario configurare il file di configurazione.

Nella directory source della cartella radice di Hexo, aggiungi un file README.md. Modifica il file di configurazione del sito _config.yml, impostando il valore del parametro skip_render su:

skip_render: README.md

Salva ed esci. La prossima volta che userai il comando hexo d per distribuire il blog, il file README.md non verrà renderizzato.

Alcuni plugin utili

Backup dei file sorgente

# Aggiungi l'indirizzo del repository del blog configurato in precedenza
git remote add origin https://github.com/your-name/your-name.github.io.git

# Aggiungi e salva le modifiche attuali, con un messaggio di commit
git add .
git commit -m "Aggiornamento file sorgente"

# Crea e passa a un nuovo branch
git checkout -b source

# Invia tutto il contenuto del branch 'source' locale al branch 'source' del repository remoto
git push origin source:source

Scrivere il blog su computer diversi

npm install -g hexo-cli
# Clona il repository in locale
git clone https://github.com/your-name/your-name.github.io.git

# Se il repository è già stato clonato in locale, ogni volta che aggiorni il blog dovrai recuperare i contenuti più recenti del branch.
git pull origin

# Passa al branch corrispondente
git checkout source

# Dopo aver installato tutti i plugin configurati in Hexo, puoi iniziare ad aggiornare e modificare il contenuto del blog.
npm install

# Dopo aver modificato il contenuto, ricordati di fare subito un backup completo.
git add .
git commit -m "Aggiornamento blog xxx"
git push origin source:source

# Pubblica e invia il contenuto più recente del blog al sito con dominio.
hexo clean
hexo g  # Genera pagine web statiche
hexo s  # Visualizza l'anteprima del blog in locale
hexo d  # Pubblica il contenuto più recente del blog

Riepilogo dei comandi comuni

hexo g
# o hexo generate, genera pagine web statiche dai file sorgente
hexo d
# o hexo deploy, pubblica e invia a GitHub Pages
hexo s
# o hexo server, distribuisci e testa in locale
hexo clean
# svuota la cache delle pagine web statiche, quindi rigenera con hexo d