Jednoduchý návod na vytvorenie blogu Hexo od začiatku (verzia 2024)

#Tvorba blogu

Už vás unavujú nevkusné rozhrania blogovacích platforiem? Máte dosť nekonečných notifikácií a reklám? Dlho ste túžili po vlastnom blogu, ale odradili vás zložité návody a kopa otravného kódu? Ak áno, potom gratulujem! Tento článok vás krok za krokom, tým najjednoduchším spôsobom, naučí, ako si postaviť vlastný blog. Potrebujete len trochu trpezlivosti a riadiť sa pokynmi.

Hexo je rýchly, prehľadný a efektívny blogovací framework, doslova dar z nebies pre začiatočníkov. A GitHub nás zbavuje starostí s dodatočným prenájmom a nasadzovaním servera. Preto sa v tomto článku naučíme, ako si blog postaviť s pomocou Hexo a GitHubu.

Už v roku 2018 som napísal článok Jednoduchý návod na vytvorenie blogu od začiatku. Pretože sa medzitým aktualizovali pluginy a niektoré detaily bolo potrebné zmeniť, prinášam vám teraz novú, zjednodušenú verziu návodu pre rok 2024.

Prípravné práce

Lokálne nastavenie statického blogu Hexo

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

Presne tak, hlavná časť blogu je hotová! Pozrime sa na výsledok. Spustite:

$ hexo server

Teraz otvorte prehliadač, zadajte localhost:4000 a uvidíte, ako váš blog momentálne vyzerá. Trochu sa potešte a potom stlačte Ctrl + C, aby ste mohli pokračovať v ďalších krokoch.

Prispôsobenie (úvodné)

Zmena témy

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

Konfigurácia stránky

# Site
title: Neznámy svet                //Názov blogu
subtitle:
description:  Do something cool //Slogan
author: LulalaP                 //Autor
language: zh-Hans               //Jazyk webstránky
timezone:

Nastavenie avatara v bočnom paneli

avatar: 
    url: /uploads/avatar.jpg

Dokončenie stránok blogu

Pridanie 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

Vytvorenie stránky kategórií

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

Vytvorenie stránky s tag cloudom

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

Vytvorenie stránky “O mne”

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

Nastavenie sociálnych odkazov v bočnom paneli

# 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

Prepojenie blogu s GitHubom

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

Teraz otvorte prehliadač, prejdite na http://your-name.github.io a gratulujem – váš blog je týmto úspešne dokončený!

Priradenie domény

Doteraz je blog plne nastavený a dostupný cez doménu GitHub. Bolo by to ešte dokonalejšie, keby ste k nemu priradili krátku vlastnú doménu.

Kúpa domény

Nastavenie DNS domény

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Po dokončení konfigurácie DNS domény prejdite do adresára blogu. V priečinku source vytvorte nový súbor s názvom CNAME (upozornenie: názov musí byť veľkými písmenami a bez prípony). Otvorte ho v textovom editore a vpíšte doň zakúpenú doménu, napríklad: www.philoli.com.

hexo g
hexo d

Teraz otvorte prehliadač, zadajte doménu, stlačte Enter a gratulujem – už máte blog s vlastnou nezávislou doménou!

Publikovanie nového článku

title Názov článku
date Dátum vytvorenia (dátum vytvorenia súboru)
updated Dátum úpravy (dátum úpravy súboru)
comments Povoliť komentáre true
tags Tagy
categories Kategórie
permalink Názov v URL (názov súboru)
hexo g
hexo d

Prispôsobenie (pokročilé)

Nižšie nájdete niekoľko pokročilých nastavení štýlu blogu. Začiatočníci môžu túto časť zatiaľ preskočiť.

Pridanie RSS

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

Skrátenie článkov na domovskej stránke

    <!--more-->

Zarovnanie citovaného textu v článkoch na stred

{% centerquote %}
Text citátu
{% endcenterquote %}

{% centerquote %} Text citátu {% endcenterquote %}

Úprava štýlu blokov kódu

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:

Nastavenie dátumu založenia stránky

since: 2024

Vylepšenie štýlu odkazov v článkoch

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

Pridanie obrázka pozadia do blogu

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //či sa obrázok opakuje a ako, ak nie je dostatočne veľký
    background-attachment:fixed;    //či sa obrázok posúva s obsahom
    background-size: cover;         //pokryť
    background-position:50% 50%;    //pozícia obrázka
}

Nastavenie polopriehľadného pozadia obsahu blogu


//Nastavenie priehľadnosti obsahu článku
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;
  }
}


//Nastavenie priehľadnosti bočného panela
.sidebar {
  opacity: 0.9;
}

//Nastavenie priehľadnosti menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Nastavenie priehľadnosti vyhľadávacieho poľa (local-search)
.popup {
  opacity: 0.9;
}

Optimalizácia štýlu vložených blokov kódu

// Vylepšenie štítku kódu
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Pridanie počtu návštevníkov do pätičky webstránky

# Nájdite blok s názvom copyright a do jeho vnútra pridajte kód.

<div class="copyright">
# ......Tu už sú nejaké nastavenia
# Sem pridajte nový kód
</div>

# Po pridaní to bude vyzerať takto:
<div class="copyright">
  # ......Tu už sú nejaké nastavenia
  # Sem pridajte nový kód
  {%- 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
# Po potvrdení, že je všetko v poriadku, blog zverejnite
hexo d

Pridanie súboru README.md do repozitára

Každý projekt zvyčajne obsahuje súbor README.md. Keď však použijete Hexo na nasadenie do repozitára, súbor README.md v projekte sa prepíše. Preto je potrebné v konfiguračnom súbore nastaviť, aby sa prepísaniu zabránilo.

V koreňovom priečinku source v adresári Hexo pridajte súbor README.md. Upravte konfiguračný súbor stránky _config.yml a nastavte hodnotu parametra skip_render na:

skip_render: README.md

Stačí uložiť a ukončiť. Pri ďalšom nasadení blogu pomocou príkazu hexo d sa súbor README.md už nebude renderovať.

Niekoľko užitočných pluginov

Záloha zdrojových súborov

# Pridajte adresu repozitára blogu, ktorú ste predtým nastavili
git remote add https://github.com/your-name/your-name.github.io.git

# Pridajte a uložte aktuálne zmeny a pridajte poznámku
git add .
git commit -m "Aktualizácia zdrojových súborov"

# Vytvorte a prepnite na novú vetvu
git checkout -b source

# Nahrajte celý obsah lokálnej vetvy 'source' do vzdialenej vetvy 'source' v repozitári
git push origin source:source

Písanie blogu na rôznych počítačoch

npm install -g hexo-cli
# Naklonujte repozitár lokálne
git clone https://github.com/your-name/your-name.github.io.git

# Ak už máte lokálnu kópiu, pred každou aktualizáciou blogu musíte stiahnuť najnovší obsah vetvy
git pull origin

# Prepnite na príslušnú vetvu
git checkout source

# Po inštalácii všetkých pluginov v konfigurácii Hexo môžete začať s aktualizáciou a úpravou obsahu blogu
npm install

# Po úprave obsahu nezabudnite včas zálohovať kompletným procesom
git add .
git commit -m "Aktualizácia blogu xxx"
git push origin source:source

# Publikujte a nahrajte najnovší obsah blogu na doménu
hexo clean
hexo g  # Vygeneruje statické súbory
hexo s  # Lokálny náhľad blogu
hexo d  # Publikuje najnovší obsah blogu

Zhrnutie najpoužívanejších príkazov

hexo g
# alebo hexo generate, generuje statické webové stránky zo zdrojových súborov
hexo d
# alebo hexo deploy, publikuje a nahráva na GitHub Pages
hexo s
# alebo hexo server, lokálne nasadenie pre testovanie
hexo clean
# vymaže cache statických webových stránok, potom hexo d znovu vygeneruje