Краткое руководство по созданию блога 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: ru                    // Язык сайта (изменил на ru для русского блога)
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: [Тег1, Тег2]
categories: [Категория1, Категория2]
permalink: Имя в URL (имя файла)
hexo g
hexo d

Расширенные настройки персонализации

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

Добавление RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generator-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 {
  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 в репозитории этот файл перезаписывается. Поэтому необходимо настроить конфигурацию, чтобы избежать перезаписи.

В корневой директории 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 генерирует заново