Создание личного блога на Hexo + GitHub в Windows

Подготовка локального окружения

Git

Скачать с официального сайта: Git Release

После установки выполните в терминале Git / cmd следующую команду, чтобы проверить, что всё установилось:

git --version

Если выводится номер версии, установка прошла успешно.

Node.js

Официальный сайт (английский): Download Node.js®

Официальный сайт (китайский): Node.Js 中文网

После установки выполните в терминале Git / cmd следующие команды, чтобы проверить установку:

node -v

npm -v

Если выводятся номера версий, установка прошла успешно.

Рабочая папка Hexo и развёртывание

Hexo — это готовый фреймворк для блога на основе Node.js. Взяв его шаблон и изменив лишь часть кода, можно развернуть собственный личный блог и публиковать статьи.

Шаг 1. Выберите удобное место на диске и создайте пустую папку с именем MyBlog.

Шаг 2. Щёлкните правой кнопкой мыши внутри этой папки и выберите «Open Git Bash here», чтобы открыть терминал Git в рабочей папке.

Шаг 3. Установите Hexo следующей командой:

npm install -g hexo-cli

Затем выполните в терминале hexo v, чтобы проверить, что Hexo установлен, и узнать его версию:

hexo v

Далее инициализируйте каркас проекта Hexo в рабочей папке:

hexo init

Затем сгенерируйте проект:

hexo generate

Выполните в терминале hexo s / hexo server, чтобы запустить локальный сервер и убедиться, что стандартный блог Hexo работает. Щёлкните по ссылке с нажатой клавишей Ctrl, чтобы открыть её в браузере по умолчанию. Обычно локальный блог доступен по адресу http://localhost:4000/

Подготовка статического сервера на GitHub (GitHub Pages)

Создание репозитория GitHub Pages

GitHub — это платформа для хранения кода. Она позволяет создать репозиторий, который будет служить личным сайтом GitHub Pages, а серверы для него предоставляет сам GitHub.

Создайте на GitHub новый репозиторий и назовите его в таком формате:

ИмяПользователяGitHub.github.io

Например, моё имя пользователя на GitHub — GarGarfie, поэтому репозиторий для GitHub Pages должен называться: GarGarfie.github.io

Настройка локального Git и подключение к репозиторию GitHub Pages

Сначала задайте имя пользователя в терминале Git / cmd командой git config --global user.name "имя". Желательно, чтобы имя и почта в локальном Git совпадали с данными на GitHub.

Почту задайте командой git config --global user.email "почта".

Проверить настройки можно командами git config --global user.name и git config --global user.email:

git config --global user.name  "yourname"

git config --global user.email  "youremail"

git config --global user.name

git config --global user.email

После настройки локального Git подключите его к репозиторию GitHub Pages по SSH.

В терминале Git / cmd установите плагин Hexo для развёртывания на GitHub (без него отправка на GitHub завершится ошибкой):

npm install hexo-deployer-git --save

После установки сгенерируйте в терминале Git ключ и скопируйте его.

Сгенерируйте ключ командой ниже. Замените youremail на почту, указанную при настройке Git, и следуйте подсказкам (если не уверены, просто нажимайте Enter):

ssh-keygen -t rsa -C "youremail"

Когда ключ создан, выведите его в Git Bash следующей командой и скопируйте:

cat ~/.ssh/id_rsa.pub

Создайте SSH-ключ на GitHub и вставьте в него содержимое ключа:

Откройте главную страницу GitHub, нажмите на аватар → Settings → SSH and GPG keys → New SSH key → вставьте содержимое id_rsa.pub (только что скопированный ключ) → сохраните.

Затем проверьте SSH-подключение в Git Bash командой ниже. Если появилось ваше имя пользователя, подключение работает:

ssh -T git@github.com

Настройка проекта Hexo

Изменение файла _config.yml

После инициализации проекта файл _config.yml в папке MyBlog — это основной конфигурационный файл фреймворка Hexo. Его обязательно нужно настроить перед развёртыванием в репозиторий GitHub Pages. См. официальную документацию по настройке.

Особое внимание обратите на следующие параметры:

# Параметры в блоке Site:
description: 		# Описание сайта, в основном для SEO. Кратко сообщает поисковикам, о чём сайт; желательно включить ключевые слова.
language: zh		# Язык сайта. В зависимости от темы для упрощённого китайского могут понадобиться значения zh-Hans или zh-CN.
timezone: 'Asia/Hong_Kong'		# Часовой пояс сайта. По умолчанию Hexo берёт часовой пояс компьютера. См. список часовых поясов, например America/New_York, Japan, UTC. Для материкового Китая обычно Asia/Shanghai.

# Параметры в блоке URL:
url: https://username.github.io/
# При использовании GitHub Pages здесь обязательно указывается адрес сайта GitHub Pages (а не адрес репозитория), иначе будет 404.

# Блок Deployment:
# Измените и дополните блок Deployment, чтобы локальный Git мог отправлять сайт в репозиторий GitHub Pages.
deploy:
  type: 'git'
  repository: 'адрес репозитория'
  branch: main

Добавление файла для собственного домена

Чтобы привязать блог к собственному домену, создайте в папке MyBlog/source/ файл с именем CNAME (без расширения) и запишите в него доменное имя.

Написание статей и развёртывание проекта

Порядок публикации в Hexo

Статьи в Hexo пишутся на Markdown. Если в папке \MyBlog\source_posts\ нет ни одной статьи, то после развёртывания на GitHub Pages блог будет показывать ошибку 404.

Основные команды Hexo:

hexo clean		# Удалить ранее сгенерированные файлы; помогает избавиться от старых ошибок
hexo new post  "имя_файла"		# Создать статью "имя_файла" в виде .md в /MyBlog/source/_posts/
hexo generate		# Сгенерировать сайт локально; сокращённо: hexo g
hexo deploy		# Развернуть сайт на GitHub; сокращённо: hexo d

Обычный порядок работы с Hexo:

Написать .md-файл → положить его в \MyBlog\source_posts\ → выполнить hexo g для генерации сайта → выполнить hexo d для развёртывания на GitHub

Редактирование Markdown-файлов

Если вы не знакомы с Markdown, попробуйте визуальный редактор (WYSIWYG). Рекомендую два редактора:

Vditor

Typora

Когда на странице репозитория GitHub появится отметка о завершении развёртывания, блог будет доступен по адресу вашего сайта (вида GarGarfie.github.io).

Дополнительно

Маскот Live2D

Полезные ссылки (на китайском):

Добавление анимированного маскота Live2D в Hexo

Маскот Live2D и предпросмотр моделей в Hexo

Live2D-widget-models