Jednoduchý průvodce vytvořením blogu Hexo od nuly (verze 2024)

#Tvorba blogu

Už vás unavují neatraktivní rozhraní blogovacích platforem, nekonečné notifikace a toužíte po vlastním blogu, ale odrazují vás složité návody a spousta matoucího kódu? Gratuluji! Tento článek vás krok za krokem, co nejjednodušším způsobem, naučí, jak si vytvořit vlastní blog. Stačí jen trocha trpělivosti a řídit se pokyny.

Hexo je rychlý, čistý a efektivní blogovací framework, což z něj dělá požehnání pro začátečníky. GitHub nám navíc ušetří starosti s pronájmem a nasazováním vlastního serveru. Tento článek se proto zaměří na vytvoření blogu pomocí Hexo a GitHubu.

V roce 2018 jsem napsal jednoduchého průvodce vytvořením blogu od nuly. Kvůli aktualizacím pluginů je však potřeba upravit některé detaily, a proto nyní přináším aktualizovanou verzi pro rok 2024.

Příprava

Lokální nastavení statického blogu Hexo

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

Správně, hlavní část blogu je hotová! Pojďme se podívat na výsledek. Spusťte:

$ hexo server

Nyní otevřete prohlížeč a zadejte localhost:4000. Uvidíte aktuální podobu vašeho blogu. Chvíli se radujte, a pak stiskněte Ctrl + C pro pokračování.

Přizpůsobení (základní)

Změna tématu

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

Konfigurace webu

# Site
title: Neznámý svět                // Název blogu
subtitle:
description:  Do something cool // Podpis/motto
author: LulalaP                 // Autor
language: zh-Hans               // Jazyk webu
timezone:

Nastavení avataru v postranním panelu

avatar: 
    url: /uploads/avatar.jpg

Vylepšení stránek blogu

Přidání 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

Vytvoření stránky kategorií

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

Vytvoření stránky s tagy (štítky)

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

Vytvoření stránky “O mně”

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

Nastavení sociálních odkazů v postranním panelu

# 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

Propojení blogu s GitHubem

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

Nyní otevřete prohlížeč a navštivte http://your-name.github.io. Gratulujeme, váš blog je tímto hotov!

Připojení domény

Váš blog je nyní kompletně nastaven a dostupný přes doménu GitHubu. Bylo by však ještě lepší, kdybychom k němu připojili vlastní, kratší doménu.

Koupě domény

DNS záznamy domény

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Po nakonfigurování DNS záznamů přejděte do adresáře blogu a v adresáři source vytvořte nový soubor s názvem CNAME (dbejte na to, že musí být velkými písmeny a bez přípony). Otevřete jej v Poznámkovém bloku a zapište do něj zakoupenou doménu, například: www.philoli.com.

hexo g
hexo d

Nyní otevřete prohlížeč, zadejte doménu, stiskněte Enter a gratulujeme, máte svůj vlastní blog s nezávislou doménou.

Publikování nového článku

title Název článku
date Datum vytvoření (datum vytvoření souboru)
updated Datum poslední úpravy (datum úpravy souboru)
comments Povolit komentáře true
tags Tagy
categories Kategorie
permalink Název v URL (název souboru)
hexo g
hexo d

Přizpůsobení (pokročilé)

Níže uvádíme některá pokročilá nastavení pro přizpůsobení stylu blogu. Začátečníci mohou prozatím přeskočit.

Přidání RSS

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

Zkrácení článků na úvodní stránce

    <!--more-->

Zarovnání citovaného textu ve článku na střed

{% centerquote %}
Citovaný text
{% endcenterquote %}

{% centerquote %} Citovaný text {% endcenterquote %}

Úprava stylu bloků 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:

Nastavení data založení webu

since: 2024

Vylepšení stylu odkazů v článcích

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

Přidání obrázku na pozadí blogu

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Zda opakovat a jak, pokud se obrázek nemůže roztáhnout
    background-attachment:fixed;    // Zda se obrázek posouvá s obsahem
    background-size: cover;         // Pokrýt
    background-position:50% 50%;    // Pozice obrázku
}

Nastavení poloprůhledného pozadí obsahu blogu


// Transparentní obsah blogu
// Nastavení průhlednosti 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;
  }
}


// Nastavení průhlednosti postranního panelu
.sidebar {
  opacity: 0.9;
}

// Nastavení průhlednosti menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Nastavení průhlednosti vyhledávacího pole (local-search)
.popup {
  opacity: 0.9;
}

Optimalizace stylu inline bloků kódu

// Zkrášlení tagu <code>
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Přidání počtu návštěvníků do zápatí webu

# Najděte sekci s tagem copyright a dovnitř tagu přidejte kód

<div class="copyright">
# ......zde již existují nějaká nastavení
# Zde přidejte nový kód
</div>

# Po přidání to vypadá takto:
<div class="copyright">
  # ......zde již existují nějaká nastavení
  # Zde přidejte 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 ověření, že je vše v pořádku, publikujte
hexo d

Přidání souboru README.md do repozitáře

Každý projekt obvykle obsahuje soubor README.md. Pokud však blog nasadíte do repozitáře pomocí Hexo, soubor README.md v projektu bude přepsán. Proto je nutné nastavit konfiguraci tak, aby k přepsání nedošlo.

Přidejte soubor README.md do kořenového adresáře source v adresáři Hexo. Upravte konfigurační soubor webu _config.yml a nastavte hodnotu parametru skip_render na:

skip_render: README.md

Uložte a ukončete. Až příště nasadíte blog pomocí příkazu hexo d, soubor README.md již nebude renderován.

Několik užitečných pluginů

Záloha zdrojových souborů

# Přidat dříve nastavenou adresu repozitáře blogu
git remote add https://github.com/your-name/your-name.github.io.git

# Přidat a uložit aktuální změny a zaznamenat poznámku
git add .
git commit -m "Aktualizace zdrojových souborů"

# Vytvořit a přepnout na novou větev
git checkout -b source

# Odeslat veškerý obsah lokální větve "source" do větve "source" ve vzdáleném repozitáři
git push origin source:source

Psaní blogu z různých počítačů

npm install -g hexo-cli
# Naklonovat repozitář lokálně
git clone https://github.com/your-name/your-name.github.io.git

# Pokud je repozitář již naklonován lokálně, je nutné před každou aktualizací blogu stáhnout nejnovější obsah větve.
git pull origin

# Přepnout na odpovídající větev
git checkout source

# Po instalaci všech pluginů v konfiguraci Hexo můžete začít aktualizovat a upravovat obsah blogu.
npm install

# Po úpravě obsahu nezapomeňte ihned provést kompletní zálohu.
git add .
git commit -m "Aktualizace blogu xxx"
git push origin source:source

# Publikovat a odeslat nejnovější obsah blogu na doménu
hexo clean
hexo g  # Vygenerovat statické soubory
hexo s  # Zobrazit náhled blogu lokálně
hexo d  # Publikovat nejnovější obsah blogu

Přehled často používaných příkazů

hexo g
# nebo hexo generate, generuje statické stránky ze zdrojových souborů
hexo d
# nebo hexo deploy, publikuje a nahrává na GitHub Pages
hexo s
# nebo hexo server, lokálně nasadí pro testování
hexo clean
# Vyčistí cache statických stránek a poté hexo d znovu vygeneruje