Как создать блог на Github Pages

В этой статье рассказано, как просто и с нуля создать сайт и сделать его доступным по адресу sitename.github.io (бесплатный хостинг Github) и подключить к нему доменное имя.

Использовать будем HEXO.

Примерный план работы:

  • Зачем этот генератор статических сайтов?
  • Установка hexo на компьютер
  • Настройки сайта
  • Создание репозитория
  • Добавляем код в репозиторий
  • Настраиваем репозитория для публикации
  • Добавляем в репозиторий CNAME
  • Добавляем А-запись в DNS домена

Зачем этот генератор статических сайтов?

Зачем они нужны, эти генераторы? Ведь можно написать самому CSS- и html-код для каждой страницы своего сайта. Но при добавлении, например, записи в журнал каждый раз придётся переделывать страницу со списком записей, ссылки под статьёй (на следующую и предыдущую статью), добавлять новые категории и пр, вести учет тегов. А если это можно делать автоматически, зачем это делать ручками?

Пользуясь генератором, Вы создаёте обычные текстовые файлы для записей и страниц, html-кода в них нет (html-теги, разумеется, можно использовать при желании). Очень популярным форматом (но не единственным) является язык разметки Markdown. Генератор съедает ваши текстовые файлы и генерирует html-файлы, которые остаётся только выложить на сайт.

Так же вы не теряете производительность сервера (да и сервера у вас нет) на генерацию страниц. Любые бэкенд языки при наличии большого количества записей начинают “подтормаживать”, а кэширование - это по сути генерация статичных данных, которые будут подгружены на сайте. И зачем нам посредник?)

Установка hexo на компьютер

  1. Устанавливаем на компьютер Node.js и Git
  2. Устанавливаем hexo
1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

Nota bene! При установке на Windows(Мы говорим про PowerShell, не CMD) у меня возникла ошибка “Невозможно загрузить файл …, так как выполнение сценариев отключено в этой системе”. Подробнее можно почитать тут
Как решить - для тех, кому лень читать.
Вводим:

1
$ Get-ExecutionPolicy

Если получили:

1
$ Get-Restricted

Тогда разрешаем выполнение файлов

1
$ Set-ExecutionPolicy unrestricted

Настройки сайта
3. Забегаем на сайт hexo и из большого списка шаблонов выбираем тот, который нравится вам.
Nota bene! Перед глобальным выбором шаблонов и изучение их плюсов и минусов советую создать несколько страниц. Это позволит понять + и - данного шаблона.
Nota bene! Мой выбор остановился на prontera и сайт демо

  1. (Пропускаем, если выбираем другой шаблон) Из настроек шаблона видно, что еще установить hexo-renderer-jade и hexo-generator-feed:
    1
    2
    $ npm install hexo-renderer-jade --save
    $ npm install hexo-generator-feed --save
  2. Подключаем создание автоматической папки для ресурсов в source/_posts и имя поста. Для этого идем в файл _config.yml и меняем
    1
    post_asset_folder: true
  3. Создайте новый пост блога командой
    1
    $ hexo new "имя-нового-поста"
  4. Редактирование материала. В целом используется md разметка, но есть парочка важных элементов
  1. Чтобы посмотреть результат работы до деплоя на github - http://localhost:4000/. Если результат устраивает - деплоим.

Создание репозитория
9. Создаем репозиторий в гите с именем пользователя. В моем случае olegnizamov.github.io

Добавляем код в репозиторий
10. Для автоматического деплоя блога на GitHub установим hexo-deployer-git

1
$ npm install hexo-deployer-git --save
  1. и редактируем файл _config.yml
    1
    2
    3
    deploy:
    type: git
    repo: <repository url> # https://github.com/username/username.github.io
  2. и отправляем изменения на блог
    1
    $ hexo clean && hexo deploy

Настраиваем репозитория для публикации
Nota bene! Полную информацию можно почитать тут Managing a custom domain for your GitHub Pages site
13. Переходим в настройки проекта -> Страницы (Settings->Pages) указываем в поле Custom domain домен, который будет использоваться как зеркало.

Добавляем в репозиторий CNAME
14. Если мы настраивали зеркало через github настройки, то файл CNAME на сервере создается автоматически. Однако есть проблема, при деплои он каждый раз будет затираться.Создавать данный файл ручками (мы ленивые и за автоматизацию) - плохо. Чтобы создать файл CNAME с помощью Hexo, просто создайте ~/hexo/source/CNAME с необходимым содержанием.
При выполнении hexo deploy этот файл будет обновляться на Github Pages.

Добавляем А-запись в DNS домена
15. Ну и не забываем, добавить данные А записи к домену, чтобы все корректно настроилось.

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153