Короткий посібник зі створення блогу на Hexo з нуля (видання 2024 року)

#Блог, Налаштування

Вам вже давно набридли нецікаві інтерфейси більшості блогів, ви втомилися від нескінченних сповіщень та реклами, і мрієте про власний простір в інтернеті? Можливо, ви вже намагалися створити його, але складні інструкції та купа незрозумілого коду відлякували вас? Тоді вітаю! Ця стаття допоможе вам крок за кроком, у найдоступнішій формі, створити власний блог. Все, що вам потрібно, — це трохи терпіння та уважно слідувати інструкціям.

Hexo — це швидкий, простий та ефективний фреймворк для блогів, справжня знахідка для початківців! А завдяки GitHub нам не потрібно турбуватися про оренду та розгортання додаткових серверів. Саме тому в цьому посібнику ми будемо створювати блог за допомогою Hexo та GitHub.

У 2018 році я вже писав короткий посібник зі створення блогу з нуля. Однак через оновлення плагінів деякі деталі потребують змін, тому я вирішив оновити цей посібник до версії 2024 року.

Підготовка

Налаштування статичного блогу Hexo локально

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

Так, основна частина блогу вже готова! Давайте подивимося на результат. Виконайте:

$ hexo server

Тепер відкрийте браузер і введіть localhost:4000, щоб побачити, як виглядає ваш блог. Трохи порадійте, а потім натисніть Ctrl + C, щоб продовжити.

Персоналізація (початкова)

Зміна теми

$ 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 #або hexo generate
hexo server

Налаштування сайту

# Site
title: Невідомий світ                // Назва блогу
subtitle:
description:  Do something cool // Слоган або підпис
author: LulalaP                 // Автор
language: zh-Hans               // Мова сайту
timezone:

Налаштування аватара на бічній панелі

avatar:
    url: /uploads/avatar.jpg

Доопрацювання сторінок блогу

Додавання пунктів меню

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

Створення сторінки категорій

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

Створення сторінки з хмарою тегів

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

Створення сторінки “Про мене”

$ 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

Підключення блогу до 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

Тепер відкрийте браузер і перейдіть за адресою http://your-name.github.io. Вітаю, ваш блог повністю налаштований!

Прив’язка доменного імені

На цьому етапі блог повністю налаштований і доступний через домен GitHub. Однак, щоб зробити його ще кращим, можна прив’язати власне коротке доменне ім’я.

Купівля доменного імені

Налаштування DNS домену

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Після налаштування DNS перейдіть до директорії блогу, у папці source створіть новий файл з назвою CNAME (зверніть увагу на великі літери, без розширення). Відкрийте його у текстовому редакторі та впишіть придбане доменне ім’я, наприклад: www.philoli.com.

hexo g
hexo d

Тепер відкрийте браузер, введіть своє доменне ім’я та натисніть Enter. Вітаю, ви щойно отримали власний блог з незалежним доменом!

Публікація нових статей

title Заголовок статті
date Дата створення (дата створення файлу)
updated Дата оновлення (дата останньої зміни файлу)
comments Чи дозволені коментарі true
tags Теги
categories Категорії
permalink Ім'я в URL (ім'я файлу)
hexo g
hexo d

Персоналізація (розширена)

Нижче наведено кілька розширених налаштувань стилю блогу. Новачки можуть пропустити цей розділ.

Додавання RSS

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

Обрізання статей на головній сторінці

    <!--more-->

Вирівнювання цитат по центру в статтях

{% centerquote %}
Текст цитати
{% endcenterquote %}

{% centerquote %} Текст цитати {% endcenterquote %}

Зміна стилю блоків коду

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:

Встановлення дати створення сайту

since: 2024

Покращення стилю посилань у статтях

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

Додавання фонового зображення до блогу

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Чи повторювати зображення, якщо воно не заповнює весь екран, і як саме
    background-attachment:fixed;    // Чи прокручувати зображення разом зі сторінкою
    background-size: cover;         // Покриття
    background-position:50% 50%;    // Позиція зображення
}

Налаштування напівпрозорого фону для вмісту блогу


// Налаштування прозорості вмісту статті
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;
  }
}


// Налаштування прозорості бічної панелі
.sidebar {
  opacity: 0.9;
}

// Налаштування прозорості меню
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Налаштування прозорості вікна пошуку (local-search)
.popup {
  opacity: 0.9;
}

Оптимізація стилю вбудованих блоків коду

// Покращення вигляду тегу `<code>` для коду
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Додавання лічильника відвідувачів у нижній частині сайту

# Знайдіть тег copyright і додайте код всередину нього

<div class="copyright">
# ......тут вже є деякі налаштування
# Додайте новий код тут
</div>

# Після додавання виглядатиме так:
<div class="copyright">
  # ......тут вже є деякі налаштування
  # Додайте новий код тут
  {%- 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
# Опублікувати після підтвердження
hexo d

Додавання файлу README.md до репозиторію

Зазвичай кожен проєкт має файл README.md. Однак, коли ви розгортаєте блог за допомогою Hexo, файл README.md у репозиторії може бути перезаписаний. Тому потрібно налаштувати конфігурацію, щоб уникнути цього.

У кореневій директорії source вашого проєкту Hexo додайте файл README.md. Відредагуйте конфігураційний файл сайту _config.yml і встановіть значення параметра skip_render на:

skip_render: README.md

Збережіть та вийдіть. Наступного разу, коли ви розгорнете блог за допомогою команди hexo d, файл README.md не буде рендеритися.

Кілька корисних плагінів

Резервне копіювання вихідних файлів

# Додайте адресу репозиторію блогу, яку ви налаштували раніше
git remote add origin https://github.com/your-name/your-name.github.io.git

# Додайте та збережіть поточні зміни, а також додайте коментар
git add .
git commit -m "Оновлення вихідних файлів"

# Створіть та переключіться на нову гілку
git checkout -b source

# Завантажте весь вміст локальної гілки `source` у гілку `source` віддаленого репозиторію
git push origin source:source

Написання блогів з різних комп’ютерів

npm install -g hexo-cli
# Клонуйте репозиторій на локальний комп'ютер
git clone https://github.com/your-name/your-name.github.io.git

# Якщо репозиторій вже клоновано локально, перед кожним оновленням блогу потрібно завантажувати найновіший вміст гілки
git pull origin

# Переключіться на відповідну гілку
git checkout source

# Після встановлення всіх плагінів, налаштованих у Hexo, можна починати оновлювати та редагувати вміст блогу.
npm install

# Після внесення змін не забувайте своєчасно робити повне резервне копіювання
git add .
git commit -m "Оновлення блогу xxx"
git push origin source:source

# Публікація та завантаження найновішого вмісту блогу на доменний сайт
hexo clean
hexo g  # Генерує статичні файли
hexo s  # Локальне розгортання та тестування
hexo d  # Публікує найновіший вміст блогу

Зведення основних команд

hexo g
# або hexo generate, генерує статичні веб-сторінки з вихідних файлів
hexo d
# або hexo deploy, публікує та завантажує на GitHub Pages
hexo s
# або hexo server, локальне розгортання та тестування
hexo clean
# очищує кеш статичних сторінок, а потім hexo d для повторної генерації