En enkel guide til å sette opp en Hexo-blogg fra bunnen av (2024-utgaven)

#Bloggbygging

Har du lenge vært lei av de kjedelige grensesnittene på mange bloggnettsteder? Er du lei av endeløse varsler og reklame? Har du drømt om å lage din egen blogg, men blitt stoppet av kompliserte guider og hodebry med kode? Da er du heldig! Denne artikkelen er skrevet for å veilede deg trinn for trinn på den enklest mulige måten, slik at du kan sette opp din egen blogg. Alt du trenger er litt tålmodighet og å følge instruksjonene nøye.

Hexo er et raskt, rent og effektivt bloggrammeverk, en sann gavepakke for nybegynnere. Og med GitHub slipper vi bryet med å leie og sette opp en egen server. Derfor vil denne guiden vise deg hvordan du bygger en blogg ved hjelp av Hexo og GitHub.

Jeg skrev en gang en lignende guide, En enkel guide til å bygge en blogg fra bunnen av, tilbake i 2018. På grunn av oppdateringer i diverse plugins er det imidlertid en del detaljer som har endret seg. Derfor lanserer jeg nå 2024-utgaven av denne enkle guiden.

Forberedelser

Sette opp Hexo statisk blogg lokalt

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

Stemmer! Hoveddelen av bloggen din er nå klar. La oss ta en titt på resultatet. Kjør:

$ hexo server

Nå kan du åpne nettleseren din, skrive inn localhost:4000, og se hvordan bloggen din ser ut! Ta deg et lite øyeblikk til å glede deg, og trykk deretter Ctrl + C for å fortsette med de neste stegene.

Grunnleggende tilpasninger

Bytte 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

Nettstedskonfigurasjon

# Site
title: Ukjent verden                // Bloggnavn
subtitle:
description:  Do something cool // En signatur/slogan
author: LulalaP                 // Forfatter
language: zh-Hans               // Nettstedets språk
timezone:

Legge til profilbilde i sidefeltet

avatar: 
    url: /uploads/avatar.jpg

Forbedre bloggsidene

Legge til menyelementer

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

Opprette kategoriside

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

Opprette taggesky-side

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

Opprette en «Om meg»-side

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

Legge til sosiale lenker i sidefeltet

# 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

Koble bloggen til 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

Nå, åpne nettleseren din og besøk http://your-name.github.io. Gratulerer, bloggen din er nå satt opp!

Knytte til domene

Bloggen er nå fullstendig satt opp og kan nås via GitHub-domenet. For å gjøre det enda bedre, kan du nå knytte et eget, kortere domene til den.

Kjøpe domene

Domenenavnsoppløsning (DNS)

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Etter å ha konfigurert domenenavnsoppløsningen, gå til bloggens rotmappe. Opprett en ny fil kalt CNAME (merk at det skal være store bokstaver og ingen filendelse) i source-katalogen. Åpne den med en teksteditor og skriv inn domenenavnet du har kjøpt, for eksempel: www.philoli.com

hexo g
hexo d

Åpne nå nettleseren din, skriv inn domenet og trykk Enter. Gratulerer, du har nå en blogg med ditt eget uavhengige domenenavn!

Publisere en ny artikkel

title Tittel på artikkelen
date Opprettelsesdato (filens opprettelsesdato)
updated Endringsdato (filens endringsdato)
comments Aktiver kommentarer true
tags Tagger
categories Kategorier
permalink Navn i URL (filnavn)
hexo g
hexo d

Avanserte tilpasninger

Nedenfor finner du noen avanserte innstillinger for bloggens utseende. Nybegynnere kan hoppe over dette for nå.

Legge til RSS

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

Korte ned artikler på forsiden

    <!--more-->

Midtstille sitert tekst i artikler

{% centerquote %}
Sitert tekst
{% endcenterquote %}

{% centerquote %} Sitert tekst {% endcenterquote %}

Endre stil på kodeblokker

codeblock:
  # Tema for kodeutheving
  # Tilgjengelige verdier: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # Se: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Legg til kopier-knapp på kodeblokk
  copy_button:
    enable: true
    # Vis resultat av tekstkopiering.
    show_result: true
    # Tilgjengelige verdier: default | flat | mac
    style:

Angi opprettelsestidspunkt for nettstedet

since: 2024

Forbedre lenkestilen i artikler

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

Legge til bakgrunnsbilde på bloggen

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Hvorvidt bildet skal gjentas og hvordan, hvis det ikke fyller hele området
    background-attachment:fixed;    // Om bildet skal rulle med siden
    background-size: cover;         // Dekk
    background-position:50% 50%;    // Bildeposisjon
}

Gjøre blogginnholdets bakgrunn delvis gjennomsiktig


// Gjør blogginnholdet gjennomsiktig
// Angi gjennomsiktighet for artikkelinnhold
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;
  }
}


// Angi gjennomsiktighet for sidefelt
.sidebar {
  opacity: 0.9;
}

// Angi gjennomsiktighet for menyfelt
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Angi gjennomsiktighet for søkefelt (local-search)
.popup {
  opacity: 0.9;
}

Optimalisere stilen for inline kodeblokker

// Forbedring av stil for `code`-taggen
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Legge til besøksteller nederst på nettsiden

# Finn copyright-taggen, og legg deretter til koden inne i taggen

<div class="copyright">
# ......Her er det allerede noen konfigurasjoner
# Legg til ny kode her
</div>

# Etter å ha lagt til, ser det slik ut:
<div class="copyright">
  # ......Her er det allerede noen konfigurasjoner
  # Legg til ny kode her
  {%- 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
# Publiser når du har bekreftet at alt er i orden
hexo d

Legge til README.md-fil i depotet

Hvert prosjekt har vanligvis en README.md-fil, men når du distribuerer med Hexo til et depot, vil README.md-filen i prosjektet bli overskrevet. Du må derfor konfigurere dette for å unngå overskriving.

Legg til en README.md-fil i source-rotmappen under Hexo-katalogen. Endre nettstedets konfigurasjonsfil _config.yml og sett verdien for skip_render-parameteren til:

skip_render: README.md

Lagre og avslutt. Neste gang du bruker hexo d-kommandoen for å distribuere bloggen, vil ikke README.md-filen bli gjengitt.

Noen nyttige plugins

Sikkerhetskopiering av kildekode

# Legg til bloggdepotets adresse som ble satt opp tidligere
git remote add https://github.com/your-name/your-name.github.io.git

# Legg til og lagre gjeldende endringer, og legg til en kommentar
git add .
git commit -m "Kildekode oppdatert"

# Opprett og bytt til en ny gren
git checkout -b source

# Push alt innhold fra den lokale 'source'-grenen til 'source'-grenen i det eksterne depotet
git push origin source:source

Skrive blogg fra forskjellige datamaskiner

npm install -g hexo-cli
# Klon depotet til lokal maskin
git clone https://github.com/your-name/your-name.github.io.git

# Hvis du allerede har klonet lokalt, må du hente det nyeste greninnholdet før hver bloggoppdatering
git pull origin

# Bytt til riktig gren
git checkout source

# Etter å ha installert alle plugins under Hexo-konfigurasjonen, kan du begynne å oppdatere og redigere blogginnholdet
npm install

# Etter å ha endret innholdet, husk å sikkerhetskopiere hele pakka med en gang
git add .
git commit -m "Bloggoppdatering xxx"
git push origin source:source

# Publiser og push det nyeste blogginnholdet til domenets nettsted
hexo clean
hexo g  # Generer statiske filer
hexo s  # Forhåndsvis bloggen lokalt
hexo d  # Publiser det nyeste blogginnholdet

Oversikt over vanlige kommandoer

hexo g
# eller hexo generate, genererer statiske nettsider basert på kildefilene
hexo d
# eller hexo deploy, publiserer og pusher til GitHub Pages
hexo s
# eller hexo server, for lokal testing
hexo clean
# Tømmer cache for statiske nettsider, deretter genererer hexo d på nytt