Ghid concis pentru crearea unui blog Hexo de la zero (Ediția 2024)

#Creare blog

Te-ai săturat de interfețele inestetice ale multor bloguri? Te-ai săturat de notificările și recomandările intruzive de pe site-uri? Ai visat dintotdeauna să-ți creezi propriul blog, dar te-au descurajat tutorialele complicate și codul care-ți dă bătăi de cap? Atunci, felicitări! Acest articol își propune să te ghideze pas cu pas, în cel mai simplu și accesibil mod, pentru a-ți construi propriul spațiu online. Nu ai nevoie decât de puțină răbdare și să urmezi instrucțiunile rând pe rând.

Hexo, un framework rapid, simplu și eficient pentru bloguri, este o adevărată mană cerească pentru începători, iar GitHub ne scutește de bătaia de cap de a închiria și configura un server. De aceea, în acest ghid, vom folosi Hexo și GitHub pentru a-ți crea blogul.

În 2018, am scris un ghid concis pentru crearea unui blog de la zero. Între timp, au apărut actualizări la pluginuri, iar unele detalii necesită modificări. De aceea, lansez acum versiunea 2024 a acestui ghid concis.

Pregătiri

Configurarea locală a blogului static Hexo

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

Exact, partea principală a blogului este gata! Haideți să vedem cum arată. Rulați:

$ hexo server

Acum, deschideți browserul, introduceți localhost:4000 și veți vedea cum arată blogul dumneavoastră. Bucurați-vă de moment, apoi apăsați Ctrl + C pentru a continua cu pașii următori.

Setări de personalizare (inițiale)

Schimbarea temei

$ 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 #sau hexo generate
hexo server

Configurarea site-ului

# Site
title: Lumea Necunoscută          //Numele blogului
subtitle:
description: Fă ceva grozav       //O semnătură
author: LulalaP                  //Autor
language: zh-Hans                //Limba site-ului
timezone:

Configurarea avatarului în bara laterală

avatar: 
    url: /uploads/avatar.jpg

Îmbunătățirea paginilor blogului

Adăugarea meniului

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

Crearea paginii de categorii

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

Crearea paginii cu nor de etichete

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

Crearea paginii „Despre mine”

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Configurarea linkurilor sociale în bara laterală

# 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

Asocierea blogului cu 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

Acum, deschideți browserul și accesați http://your-name.github.io. Felicitări, blogul dumneavoastră este gata!

Asocierea domeniului

Până acum, blogul este complet configurat și poate fi accesat prin domeniul GitHub. Ar fi și mai perfect să asociați acum un domeniu scurt acestui blog.

Achiziționarea domeniului

Configurarea DNS pentru domeniu

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

După configurarea rezoluției domeniului, intrați în directorul blogului, creați un fișier numit CNAME (atenție, trebuie să fie cu majuscule și fără extensie) în directorul source, deschideți-l cu un editor de text și introduceți domeniul achiziționat, de exemplu: www.philoli.com.

hexo g
hexo d

Acum, deschideți browserul, introduceți domeniul și apăsați Enter. Felicitări, aveți acum un blog cu propriul dumneavoastră domeniu independent!

Publicarea unui articol nou

title Titlul articolului
date Data creării (data creării fișierului)
updated Data modificării (data modificării fișierului)
comments Activare comentarii true
tags Etichete
categories Categorii
permalink Nume în URL (numele fișierului)
hexo g
hexo d

Setări de personalizare (avansate)

Mai jos sunt prezentate câteva setări avansate pentru stilizarea blogului. Începătorii pot sări peste această secțiune deocamdată.

Adăugarea RSS

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

Trunchierea articolelor pe pagina principală

    <!--more-->

Centrarea textului citat în articole

{% centerquote %}
Text citat
{% endcenterquote %}

{% centerquote %} Text citat {% endcenterquote %}

Modificarea stilului blocurilor de cod

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:

Setarea datei de creare a site-ului

since: 2024

Îmbunătățirea stilului linkurilor din articole

// 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;
  }
}

Adăugarea unei imagini de fundal blogului

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Dacă imaginea nu acoperă, se repetă și cum
    background-attachment:fixed;    //Dacă imaginea se derulează odată cu conținutul
    background-size: cover;         //Acoperire
    background-position:50% 50%;    //Poziția imaginii
}

Setarea transparenței fundalului conținutului blogului


//Transparența conținutului blogului
//Setarea transparenței conținutului articolului
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;
  }
}


//Setarea transparenței barei laterale
.sidebar {
  opacity: 0.9;
}

//Setarea transparenței barei de meniu
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Setarea transparenței casetei de căutare (local-search)
.popup {
  opacity: 0.9;
}

Optimizarea stilului blocurilor de cod inline

// Îmbunătățirea stilului pentru etichetele de cod `<code>`
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Adăugarea contorului de vizitatori în subsolul site-ului

# Găsiți bara de etichete `copyright` și adăugați codul în interiorul etichetei

<div class="copyright">
# ......Aici există deja câteva configurații
# Adăugați cod nou aici
</div>

# După adăugare, va arăta astfel:
<div class="copyright">
  # ......Aici există deja câteva configurații
  # Adăugați cod nou aici
  {%- 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
# Publicați după confirmare că totul este în regulă
hexo d

Adăugarea fișierului README.md în repository

De obicei, fiecare proiect are un fișier README.md, dar când Hexo este implementat în repository, fișierul README.md din proiect va fi suprascris. Prin urmare, este necesar să configurați fișierul de configurare pentru a preveni suprascrierea.

Adăugați un fișier README.md în directorul rădăcină source al directorului Hexo, modificați fișierul de configurare al site-ului _config.yml și setați valoarea parametrului skip_render la:

skip_render: README.md

Salvați și ieșiți. Când veți implementa blogul din nou folosind comanda hexo d, fișierul README.md nu va mai fi redat.

Câteva pluginuri utile

Backup-ul fișierelor sursă

# Adăugați adresa repository-ului blogului configurată anterior
git remote add https://github.com/your-name/your-name.github.io.git

# Adăugați și salvați modificările curente, apoi înregistrați un comentariu
git add .
git commit -m "Actualizare fișiere sursă"

# Creați și schimbați pe o ramură nouă
git checkout -b source

# Împingeți tot conținutul ramurii locale `source` către ramura `source` din repository-ul la distanță
git push origin source:source

Scrierea pe blog de pe diferite computere

npm install -g hexo-cli
# Clonați repository-ul local
git clone https://github.com/your-name/your-name.github.io.git

# Dacă repository-ul este deja clonat local, va trebui să extrageți (pull) cel mai recent conținut al ramurii înainte de fiecare actualizare a blogului
git pull origin

# Schimbați pe ramura corespunzătoare
git checkout source

# După instalarea tuturor pluginurilor din configurația Hexo, puteți începe să actualizați și să editați conținutul blogului
npm install

# După modificarea conținutului, nu uitați să faceți backup imediat, un proces complet
git add .
git commit -m "Actualizare blog xxx"
git push origin source:source

# Publicați și împingeți cel mai recent conținut al blogului către site-ul cu domeniu
hexo clean
hexo g  # Generează fișiere statice
hexo s  # Previzualizare locală a blogului
hexo d  # Publică cel mai recent conținut al blogului

Rezumarea câtorva comenzi utile

hexo g
#sau hexo generate, generează pagini web statice din fișierele sursă
hexo d
#sau hexo deploy, publică și împinge către GitHub Pages
hexo s
#sau hexo server, implementare și testare locală
hexo clean
# Golește cache-ul paginilor statice, apoi hexo d pentru regenerare