Prosty poradnik budowy bloga Hexo od zera (edycja 2024)

#Budowanie bloga

Czy masz już dość bezdusznych interfejsów tych wszystkich serwisów blogowych? Czy zmęczyły cię niekończące się powiadomienia i od dawna marzysz o własnym blogu, ale powstrzymywały cię skomplikowane poradniki i kody, od których boli głowa? Jeśli tak, to gratuluję! Ten artykuł ma za zadanie w najprostszy możliwy sposób, krok po kroku, nauczyć cię, jak zbudować własnego bloga. Wystarczy trochę cierpliwości i podążanie za instrukcjami.

Hexo, jako szybki, minimalistyczny i wydajny framework blogowy, to prawdziwe zbawienie dla początkujących, a GitHub oszczędza nam kłopotów z wynajmowaniem i konfigurowaniem dodatkowego serwera. Dlatego w tym artykule pokażę, jak zbudować bloga, korzystając z Hexo i GitHub.

W 2018 roku napisałem już podobny poradnik: Prosty poradnik budowy bloga od zera. Jednak ze względu na aktualizacje wtyczek, pewne szczegóły wymagały zmian. Dlatego przedstawiam zaktualizowaną, uproszczoną wersję poradnika na rok 2024.

Przygotowania

Tworzenie statycznego bloga Hexo lokalnie

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

Tak jest, główna część bloga została już ukończona! Czas zobaczyć efekty. Uruchom:

$ hexo server

Teraz otwórz przeglądarkę i wpisz localhost:4000, aby zobaczyć, jak wygląda Twój blog. Poczuj dreszczyk emocji, a następnie naciśnij Ctrl + C, aby kontynuować dalsze kroki.

Personalizacja (podstawowa)

Zmiana motywu

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

Konfiguracja strony

# Site
title: Nieznany Świat                // Nazwa bloga
subtitle:
description:  Do something cool // Krótki opis/slogan
author: LulalaP                 // Autor
language: zh-Hans               // Język strony
timezone:

Ustawianie awatara w pasku bocznym

avatar:
    url: /uploads/avatar.jpg

Uzupełnianie stron bloga

Dodawanie 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

Tworzenie strony kategorii

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

Tworzenie strony chmury tagów

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

Tworzenie strony „O mnie”

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

Konfiguracja linków do mediów społecznościowych w pasku bocznym

# 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

Łączenie bloga z 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

W tym momencie otwórz przeglądarkę i wejdź na adres http://your-name.github.io. Gratulacje, Twój blog został już skonfigurowany!

Podłączanie własnej domeny

Do tej pory blog został w pełni skonfigurowany i jest dostępny pod domeną GitHub. Teraz idealnie byłoby podłączyć do niego krótką, własną domenę.

Zakup domeny

Konfiguracja DNS domeny

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Po skonfigurowaniu DNS domeny, wejdź do katalogu bloga, a następnie do folderu source. Utwórz nowy plik o nazwie CNAME (pamiętaj, że nazwa musi być pisana wielkimi literami i bez rozszerzenia). Otwórz go w Notatniku i wpisz zakupioną domenę, np. www.philoli.com.

hexo g
hexo d

Teraz otwórz przeglądarkę, wpisz nazwę domeny i naciśnij Enter. Gratulacje, masz już własny blog z niezależną domeną!

Publikowanie nowych artykułów

title Tytuł artykułu
date Data utworzenia (data utworzenia pliku)
updated Data modyfikacji (data modyfikacji pliku)
comments Czy włączyć komentarze true
tags Tagi
categories Kategorie
permalink Nazwa w URL (nazwa pliku)
hexo g
hexo d

Personalizacja (zaawansowana)

Poniżej przedstawiam kilka zaawansowanych ustawień stylu bloga. Początkujący mogą na razie pominąć ten krok.

Dodawanie kanału RSS

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

Skracanie artykułów na stronie głównej

    <!--more-->

Wyśrodkowanie cytatów w artykułach

{% centerquote %}
Treść cytatu
{% endcenterquote %}

{% centerquote %} Treść cytatu {% endcenterquote %}

Zmiana stylu bloków kodu

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:

Ustawienie daty utworzenia strony

since: 2024

Ulepszenie stylu linków w artykułach

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

Dodawanie obrazu tła do bloga

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Czy powtarzać obraz, jeśli nie wypełnia całości
    background-attachment:fixed;    // Czy obraz ma przewijać się wraz ze stroną
    background-size: cover;         // Pokrycie
    background-position:50% 50%;    // Położenie obrazu
}

Ustawienie półprzezroczystego tła dla treści bloga


// Przezroczystość treści bloga
// Ustawienie przezroczystości dla zawartości artykułów
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;
  }
}


// Ustawienie przezroczystości paska bocznego
.sidebar {
  opacity: 0.9;
}

// Ustawienie przezroczystości paska menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Ustawienie przezroczystości pola wyszukiwania (local-search)
.popup {
  opacity: 0.9;
}

Optymalizacja stylu wbudowanych bloków kodu

// Upiększanie tagów kodu
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Dodawanie licznika odwiedzin na dole strony

# Znajdź sekcję copyright, a następnie dodaj kod wewnątrz tagu

<div class="copyright">
# ......tutaj znajdują się już pewne konfiguracje
# Tutaj dodaj nowy kod
</div>

# Po dodaniu powinno to wyglądać tak:
<div class="copyright">
  # ......tutaj znajdują się już pewne konfiguracje
  # Tutaj dodaj nowy kod
  {%- 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 upewnieniu się, że wszystko jest w porządku, opublikuj
hexo d

Dodawanie pliku README.md do repozytorium

Każdy projekt zazwyczaj zawiera plik README.md. Jednak po wdrożeniu Hexo do repozytorium, plik README.md w projekcie zostanie nadpisany. Dlatego należy skonfigurować plik konfiguracyjny, aby tego uniknąć.

W katalogu głównym source w folderze Hexo dodaj plik README.md. Zmodyfikuj plik konfiguracyjny strony _config.yml, ustawiając wartość parametru skip_render na:

skip_render: README.md

Zapisz i wyjdź. Następnym razem, gdy użyjesz komendy hexo d do wdrożenia bloga, plik README.md nie będzie renderowany.

Kilka przydatnych wtyczek

Tworzenie kopii zapasowej plików źródłowych

# Dodaj wcześniej skonfigurowany adres repozytorium bloga
git remote add https://github.com/your-name/your-name.github.io.git

# Dodaj i zapisz bieżące zmiany, dodając komentarz
git add .
git commit -m "Aktualizacja plików źródłowych"

# Utwórz i przełącz się na nową gałąź
git checkout -b source

# Wypchnij całą zawartość lokalnej gałęzi source do gałęzi source zdalnego repozytorium
git push origin source:source

Pisanie bloga na różnych komputerach

npm install -g hexo-cli
# Sklonuj repozytorium lokalnie
git clone https://github.com/your-name/your-name.github.io.git

# Jeśli repozytorium zostało już sklonowane lokalnie, przed każdą aktualizacją bloga należy pobrać najnowszą zawartość gałęzi
git pull origin

# Przełącz się na odpowiednią gałąź
git checkout source

# Po zainstalowaniu wszystkich wtyczek skonfigurowanych w Hexo możesz rozpocząć aktualizowanie i edytowanie treści bloga
npm install

# Po wprowadzeniu zmian pamiętaj o natychmiastowym wykonaniu pełnej kopii zapasowej
git add .
git commit -m "Aktualizacja bloga xxx"
git push origin source:source

# Opublikuj i wypchnij najnowszą zawartość bloga na stronę z domeną
hexo clean
hexo g  # Generuje statyczne pliki
hexo s  # Lokalny podgląd bloga
hexo d  # Publikuje najnowszą zawartość bloga

Podsumowanie często używanych komend

hexo g
# lub hexo generate, generuje statyczne strony internetowe na podstawie plików źródłowych
hexo d
# lub hexo deploy, publikuje i wypycha na GitHub Pages
hexo s
# lub hexo server, lokalne wdrożenie do testowania
hexo clean
# czyści pamięć podręczną statycznych stron internetowych, a następnie hexo d generuje je ponownie