Развёртывание статичного блога с использованием hexo

2018-04-30

Собственно, нашел прекрасную библиотеку для простой генерации и развёртывания статического сайта. Имя этой библиотеки hexo. Без лишних слов опишу процесс создания блога с её использованием.

Небольшое предисловие.

Все действия производил на windows 10 с использованием git bash заместо powershell, но на linux это всё заведётся ещё быстрее. Так же все действия свободно можно автоматизировать с использованием docker.

А что же нужно?

Немного. Нужна машина с git на борту и возможностью использовать npm. Нужна консоль, куда без неё. Нужен аккаунт на github или bitbucket Ну и знание языка разметки markdown.
На самом деле, последнее даже не обязательно, так как есть всякие wysiwyg-редакторы (например stackedit).

Шаг 1 установка nodejs и npm

Без них окружение javascript уже не живёт ни в каком виде. Не буду развивать тему про установку, просто скажу, что брать версию приложений лучше поновее, а необходимую инфу можно найти здесь.

Шаг 2 установка hexo-cli

Здесь два варианта действий:

установить глобально и не запариваться
1
npm install -g hexo-cli
Заморочится и, взяв за основу package.json из официальной документации, “курить маны” и самостоятельно набрасывать каркас приложения.
Я пошёл по пути наименьшего сопротивления, чего и всем желаю (наверное).

Шаг 3 инициализация проекта

Вся необходимая структура проекта создаётся командой

1	hexo init my_awesome_blog

После нужно подтянуть зависимости

1	npm install

Ну и наконец запустим локальный сервер, чтобы убедиться, что всё установилось без проблем.

1	hexo server

В консоли будет следующий вывод

1 2	INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Всё просто и понятно, сайт будет доступен по адресу http://localhost:4000/

Шаг 5 настройка проекта

Шаг 5.1 создание репозитория для сайта

Блог будет крутиться на github pages или bitbucket pages, поэтому необходимо создать пустой проект с названием <username>.github.io или <username>.bitbucket.io. Насколько я понимаю, выбор зависит только от религиозных предпочтений ~~а ещё на bitbucket бесплатные приватные репозитории~~

Шаг 5.2 добавление deploy-библиотеки

Прямо из коробки hexo не умеет выкладывать посты через git. Научим его этому:

1	npm install --save hexo-deployer-git

Шаг 5.3 изменение файла конфигурации

Настройка производится путём редактирования файла my_awesome_blog/_config.yml. Почти все возможные настройки уже прописаны в файле, остаётся только изменить их под свои нужды. Что стоит поменять:

Весь блок Site, ибо там находится основная информация о сайте и авторе.
Значение url заменяем на https://<username>.bitbucket.io
В new_post_name хранится путь до постов с использованием переменных. Синтаксис здесь достаточно ограничен, но можно использовать путь с субдирикториями (например :year/:month/:title.md)
theme - название темы оформления. Hexo будет искать папку с указанным названием в my_awesome_blog/themes. Темы можно найти на github или выбрать из официального списка

Блок Deployment настраиваем следующим образом:

_config.yml

deploy:
  type: git
  repo: git@bitbucket.org:<username>/<username>.bitbucket.io.git

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

Шаг 6 создание нового поста

Опять же, есть два ~~стула~~ пути:

С помощью команды hexo:
1
hexo new post <title>
Руками создать пост по пути, который описан в _config.yml в ключе new_post_name

Сам пост может быть как чистым markdown, так и использовать переменные hexo, например заголовок поста:

new_post.md

---
title: Some title
date: YYYY-mm-dd HH:ii:ss
categories:
  - category 1
  - category 2
tags:
  - tag 1
  - tag 2
---

После создания первого поста можно удалить дефолтный my_awesome_blog/source/_post/hello-world.md

Шаг 7 deploy

Проще не бывает:

1 2	hexo clean hexo deploy

После этого заходим в репозиторий и видим там собственно сайт. Ну и в течение некоторого времени (возможно, даже сразу после развёртывания) блог станет доступен по адресу https://<username>.bitbucket.io.

Вуаля, вы прекрастны и неотразимы и у вас есть свой блог на https без лишних растройств и вложений.

Функционал блога можно расширять с помощью плагинов, а некоторые темы уже несут в себе множество дополнительных функций. Более подробнее можно прочитать в официальной документации.

SAO-blog