Korte handleiding voor het opzetten van een Hexo blog vanaf nul (editie 2024)

#Blog opzetten

Ben je de lelijke interfaces van veel blogwebsites zat? Heb je genoeg van de eindeloze meldingen? Wil je al heel lang je eigen blog opzetten, maar word je afgeschrikt door ingewikkelde handleidingen en hoofdpijnveroorzakende code? Dan heb ik goed nieuws voor je! Dit artikel leert je stap voor stap, op de meest eenvoudige manier, hoe je je eigen blog kunt bouwen. Het enige wat je nodig hebt, is een beetje geduld en de bereidheid om de stappen te volgen.

Hexo is een snel, eenvoudig en efficiënt blogframework, wat het een uitkomst maakt voor beginners. En met GitHub besparen we onszelf de moeite van het huren en configureren van een aparte server. Daarom zullen we in dit artikel Hexo en GitHub gebruiken om je blog op te zetten.

In 2018 schreef ik al een keer een korte handleiding voor het opzetten van een blog vanaf nul. Vanwege updates van plugins zijn er echter enkele details die gewijzigd moeten worden. Daarom lanceer ik nu deze bijgewerkte korte handleiding, de 2024-editie.

Voorbereiding

Hexo statische blog lokaal opzetten

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

Dat klopt, het grootste deel van je blog is nu al klaar! Laten we het resultaat bekijken. Voer uit:

$ hexo server

Open nu je browser en typ localhost:4000 om te zien hoe je blog er momenteel uitziet. Geniet even van dit moment, druk dan op Ctrl + C om verder te gaan met de volgende stappen.

Personalisatie (initieel)

Thema wijzigen

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

Siteconfiguratie

# Site
title: 未知的世界                //Blognaam
subtitle:
description:  Do something cool //Een motto
author: LulalaP                 //Auteur
language: zh-Hans               //Sitetaal
timezone:

Profielfoto zijbalk instellen

avatar: 
    url: /uploads/avatar.jpg

Blogpagina’s voltooien

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

Categorieën-pagina maken

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

Tagwolk-pagina maken

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

”Over mij”-pagina maken

$ 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

Blog koppelen aan 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

Open nu je browser en bezoek http://your-name.github.io. Gefeliciteerd, je blog is nu voltooid!

Domeinnaam koppelen

Tot zover is de blog volledig opgezet en toegankelijk via het GitHub-domein. Het zou helemaal perfect zijn om een kortere domeinnaam aan deze blog te koppelen.

Domein kopen

Domeinnaamresolutie

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Nadat je de domeinnaamresolutie hebt geconfigureerd, ga je naar de blogmap. Maak in de source map een nieuw bestand aan met de naam CNAME (let op: hoofdletters, geen extensie). Open het met Kladblok of een andere teksteditor en schrijf je gekochte domeinnaam erin, bijv. www.philoli.com.

hexo g
hexo d

Open nu je browser, typ je domeinnaam in en druk op Enter. Gefeliciteerd, je hebt nu een blog met een eigen, onafhankelijke domeinnaam!

Nieuw artikel publiceren

title Titel van het artikel
date Creatiedatum (aanmaakdatum van het bestand)
updated Wijzigingsdatum (datum van laatste wijziging van het bestand)
comments Reacties inschakelen true
tags Tags
categories Categorieën
permalink Naam in de URL (bestandsnaam)
hexo g
hexo d

Personalisatie (geavanceerd)

Hieronder volgen enkele geavanceerde instellingen voor het personaliseren van je blogstijl. Beginners kunnen deze sectie overslaan.

RSS toevoegen

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

Artikelafbreking op de homepage

    <!--more-->

Gecentreerde quote tekst in artikelen

{% centerquote %}
Quote tekst
{% endcenterquote %}

{% centerquote %} Quote tekst {% endcenterquote %}

Codeblokstijl aanpassen

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:

Site-aanmaakdatum instellen

since: 2024

Artikellinkstijl verbeteren

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

Achtergrondafbeelding toevoegen aan de blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Herhaling en herhalingswijze wanneer de afbeelding niet het hele oppervlak vult
    background-attachment:fixed;    //Schuift de afbeelding mee met de scrollbeweging
    background-size: cover;         //Bedekken
    background-position:50% 50%;    //Afbeeldingspositie
}

Bloginhoud achtergrond semi-transparant maken


//Bloginhoud transparant maken
//Transparantie-instellingen voor artikelinhoud
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;
  }
}


//Transparantie-instellingen voor de zijbalk
.sidebar {
  opacity: 0.9;
}

//Transparantie-instellingen voor de menubalk
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Transparantie-instellingen voor het zoekvak (local-search)
.popup {
  opacity: 0.9;
}

Inline codeblokstijl optimaliseren

// Verfraaiing van Code-tags
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Aantal bezoekers onderaan de website toevoegen

# Zoek de copyright-tagbalk en voeg de code binnen de tag toe.

<div class="copyright">
# ......Hier zijn al enkele configuraties
# Voeg hier nieuwe code toe
</div>

# Na toevoeging ziet het er zo uit:
<div class="copyright">
  # ......Hier zijn al enkele configuraties
  # Voeg hier nieuwe code toe
  {%- 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
# Publiceer zodra je zeker weet dat alles in orde is
hexo d

README.md-bestand toevoegen aan de repository

Elk project heeft meestal een README.md-bestand, maar wanneer je Hexo gebruikt om naar een repository te deployen, wordt het README.md-bestand in het project overschreven. Daarom moet je het configuratiebestand instellen om overschrijven te voorkomen.

Voeg een README.md-bestand toe in de source rootmap van je Hexo-directory en wijzig in het siteconfiguratiebestand _config.yml de waarde van de skip_render parameter naar:

skip_render: README.md

Opslaan en afsluiten volstaat. De volgende keer dat je de blog deployt met het hexo d-commando, zal het README.md-bestand niet langer gerenderd worden.

Enkele veelgebruikte plugins

Bronbestanden back-uppen

# Voeg het eerder ingestelde blog repository-adres toe
git remote add https://github.com/your-name/your-name.github.io.git

# Voeg de huidige wijzigingen toe, sla ze op en noteer een opmerking
git add .
git commit -m "Bronbestanden bijgewerkt"

# Maak een nieuwe branch aan en schakel ernaar over
git checkout -b source

# Push de volledige inhoud van de lokale source-branch naar de source-branch van de externe repository
git push origin source:source

Bloggen op verschillende computers

npm install -g hexo-cli
# Kloon de repository naar je lokale machine
git clone https://github.com/your-name/your-name.github.io.git

# Als de repository al lokaal is gekloond, moet je vóór elke blogupdate de nieuwste branchinhoud ophalen
git pull origin

# Schakel over naar de betreffende branch
git checkout source

# Nadat alle plugins onder de Hexo-configuratie zijn geïnstalleerd, kun je beginnen met het bijwerken en bewerken van de bloginhoud
npm install

# Vergeet niet om na het wijzigen van de inhoud onmiddellijk de volledige back-upprocedure te volgen
git add .
git commit -m "Blog bijgewerkt xxx"
git push origin source:source

# Publiceer en push de nieuwste bloginhoud naar de domeinwebsite
hexo clean
hexo g  # Genereer statische bestanden
hexo s  # Lokaal voorbeeld van blogeffect bekijken
hexo d  # Publiceer de nieuwste bloginhoud

Overzicht van veelgebruikte commando’s

hexo g
#of hexo generate, genereer statische webpagina's op basis van bronbestanden
hexo d
#of hexo deploy, publiceer en push naar GitHub Pages
hexo s
#of hexo server, lokaal deployen en testen
hexo clean
# Leeg de cache van statische webpagina's, en genereer daarna opnieuw met hexo d