En enkel guide för att bygga en Hexo-blogg från grunden (2024 års version)

#Bloggbyggande

Har du länge varit trött på de oestetiska gränssnitten på många bloggwebbplatser? Har du fått nog av oändliga webbplatsnotiser? Har du länge velat skapa en egen blogg men stoppats av komplicerade guider och en rad huvudvärkande koder? Då har du tur! Den här artikeln är utformad för att på ett så enkelt sätt som möjligt vägleda dig steg för steg till din egen blogg. Allt du behöver är lite tålamod och att följa instruktionerna.

Hexo är ett snabbt, rent och effektivt bloggramverk, en riktig välsignelse för nybörjare. GitHub i sin tur befriar oss från besväret med att hyra och driftsätta en egen server. Därför kommer den här guiden att visa hur man bygger en blogg med Hexo och GitHub.

Jag skrev en liknande guide redan 2018, En enkel guide för att bygga en blogg från grunden. På grund av uppdateringar av tillägg har vissa detaljer förändrats, så därför lanserar jag nu 2024 års version av den här enkla guiden.

Förberedelser

Bygg en lokal statisk Hexo-blogg

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

Japp, den huvudsakliga delen av bloggen är nu klar! Låt oss kolla resultatet. Kör:

$ hexo server

Öppna nu din webbläsare, skriv in localhost:4000 så kan du se hur bloggen ser ut just nu. Lite spännande, eller hur? Tryck sedan Ctrl + C för att fortsätta med nästa steg.

Anpassning (grundläggande)

Ändra 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 #eller hexo generate
hexo server

Webbplatskonfiguration

# Site
title: Okänd värld                // Bloggens namn
subtitle:
description:  Do something cool // En signatur
author: LulalaP                 // Författare
language: zh-Hans               // Webbplatsens språk
timezone:

Ställ in sidofältets avatar

avatar:
    url: /uploads/avatar.jpg

Förbättra bloggsidorna

Lägg till menyer

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

Skapa en kategorisida

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

Skapa en taggmoln-sida

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

Skapa en “Om mig”-sida

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

Ställ in sociala länkar i sidofältet

# 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

Koppla bloggen till 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

Öppna nu din webbläsare och besök http://your-name.github.io. Grattis, din blogg är nu färdig!

Koppla egen domän

Nu är bloggen helt uppbyggd och kan nås via GitHub-domänen. Att koppla en kortare domän till bloggen skulle göra det ännu bättre.

Köpa en domän

Domännamnspekning

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Efter att ha konfigurerat domännamnspekningen, gå till bloggkatalogen, skapa en fil med namnet CNAME (observera att det ska vara stora bokstäver och ingen filändelse) i source-katalogen. Öppna den med Anteckningar och skriv in din köpta domän, till exempel: www.philoli.com

hexo g
hexo d

Öppna nu din webbläsare, skriv in domännamnet och tryck enter. Grattis, du har nu en blogg med din egen domän!

Publicera nya inlägg

title Titel på artikeln
date Skapandedatum (filens skapandedatum)
updated Ändringsdatum (filens ändringsdatum)
comments Aktivera kommentarer true
tags Taggar
categories Kategorier
permalink Namn i URL (filnamn)
hexo g
hexo d

Anpassning (avancerad)

Nedan följer några avancerade inställningar för att anpassa bloggens utseende. Nybörjare kan hoppa över detta tills vidare.

Lägg till RSS

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

Korta ner artiklar på startsidan

    <!--more-->

Centrera citat i artiklar

{% centerquote %}
Citattext
{% endcenterquote %}

{% centerquote %} Citattext {% endcenterquote %}

Ändra stil på kodblock

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:

Ställ in webbplatsens skapandedatum

since: 2024

Förbättra artikelns länkstil

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

Lägg till bakgrundsbild till bloggen

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Om bilden inte täcker, hur den ska repeteras
    background-attachment:fixed;    //Om bilden ska följa med vid scrollning
    background-size: cover;         //Täck hela ytan
    background-position:50% 50%;    //Bildens position
}

Gör blogginnehållets bakgrund halvtransparent


// Blogginnehåll transparensinställningar
// Transparens för artikelinnehåll
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;
  }
}


// Transparens för sidofältet
.sidebar {
  opacity: 0.9;
}

// Transparens för menyfältet
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Transparens för sökfältet (local-search)
.popup {
  opacity: 0.9;
}

Optimera stilen för inline-kodblock

// Försköning av kodtaggar
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Lägg till besöksräknare i webbplatsens sidfot

# Hitta etiketten copyright och lägg till koden inuti etiketten

<div class="copyright">
# ......här finns redan lite konfiguration
# Lägg till ny kod här
</div>

# Efter tillägg ser det ut så här:
<div class="copyright">
  # ......här finns redan lite konfiguration
  # Lägg till ny kod här
  {%- 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
# Bekräfta att det ser bra ut och publicera sedan
hexo d

Lägg till en README.md-fil till lagringsplatsen

Varje projekt har vanligtvis en README.md-fil, men när Hexo distribueras till lagringsplatsen kommer README.md-filen att skrivas över. Därför måste du ställa in konfigurationsfilen för att undvika överskrivning.

Lägg till en README.md-fil i rotkatalogen source i Hexo-katalogen. Ändra webbplatsens konfigurationsfil _config.yml och ställ in värdet för parametern skip_render till:

skip_render: README.md

Spara och avsluta. Nästa gång du använder kommandot hexo d för att distribuera bloggen kommer README.md-filen inte att renderas.

Några användbara tillägg

Säkerhetskopiering av källfiler

# Lägg till den tidigare inställda bloggrepo-adressen
git remote add https://github.com/your-name/your-name.github.io.git

# Lägg till och spara aktuella ändringar, och notera en kommentar
git add .
git commit -m "Källfilsuppdatering"

# Skapa och byt till en ny gren
git checkout -b source

# Pusha allt innehåll från den lokala "source"-grenen till den fjärranslutna lagringsplatsens "source"-gren
git push origin source:source

Skriva bloggen från olika datorer

npm install -g hexo-cli
# Klona lagringsplatsen lokalt
git clone https://github.com/your-name/your-name.github.io.git

# Om den redan är klonad lokalt, måste du hämta det senaste greninnehållet före varje blogguppdatering
git pull origin

# Byt till motsvarande gren
git checkout source

# Efter att ha installerat alla Hexo-konfigurerade tillägg kan du börja uppdatera och redigera blogginnehållet
npm install

# Efter att ha ändrat innehållet, kom ihåg att säkerhetskopiera i ett svep
git add .
git commit -m "Blogguppdatering xxx"
git push origin source:source

# Publicera och pusha det senaste blogginnehållet till domänwebbplatsen
hexo clean
hexo g  # Generera statiska filer
hexo s  # Förhandsgranska bloggen lokalt
hexo d  # Publicera det senaste blogginnehållet

Sammanfattning av några användbara kommandon

hexo g
#eller hexo generate, genererar statiska webbsidor från källfilerna
hexo d
#eller hexo deploy, publicerar och pushar till GitHub Pages
hexo s
#eller hexo server, driftsätter och testar lokalt
hexo clean
# Rensa cache för statiska webbsidor, sedan hexo d för att återskapa