Алгоритм создания блога на GitHub Pages

Обучаясь в рамках бесплатного курса “Как вести блог и развивать личный бренд” Высшей Школы Программирования Сергея Бобровского я столкнулся с необходимостью описать алгоритм создания блога на github.io.

GitHub Pages отличная площадка, позволяющая разместить статический сайт с именем https://username.github.io прямо на GitHub. При этом не требуется организации хостинга, развертывания БД и т.д. Такой сайт может служить блогом о ваших проектах, любимых книгах, … да о чём угодно вашей душе.

Я решил использовать GitHub Pages для личного блога. Для этого потребуется выполнить следующие шаги:

  1. Создайте на GitHub открытый репозиторий (public repository) называющийся username.github.io, где username - это ваше имя пользователя на GitHub. Учтите, что если имя репозитория не будет в точности соответствовать username на GitHub, то сайт не заработает.

Для организации блога/сайта на GitHub Pages можно использовать различные инструменты (самый известный - Jekyll). Я остановил свой выбор на Hexo. Подкупила простота и возможность использовать Markdown при создании постов. Для установки 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

В Hexo существует порядка 336 шаблонов и я почти на день погрузился в их изучение.

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

  1. Отредактируйте файл _config.yml:

    1
    post_asset_folder: true

    Это позволит автоматически создавать папку для ресурсов в source/_posts с имененм нового поста.

  2. Создайте новый пост блога командой: 

    1
    $ hexo new "имя-нового-поста"

  3. Отредактируйте файл имя-нового-поста.md, расположенный в папке source/_posts. Для примера можно использовать hello-world.md файл, расположенный в той же папке. Изображения и другие ресурсы поместите в папку source/_posts/имя-нового-поста, созданную автоматически благодаря настройками из пункта 4. Размещение изображений в посте отличается от стандантного Markdown. Для того чтобы вставить изображение возпользуйтесь:

    1
    {% asset_img image.jpg My specific image title %}

    Hexo сам найдёт изображение image.jpg в папке source/_posts/имя-нового-поста и добавит его в пост.

  4. Откройте в браузере страницу с адресом Hexo сервера по умолчанию: http://localhost:4000/ и оцените результат. Если результат устраивает, переходите к пункту 8. Если нет, вернитесь к пункту 6.

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

    1
    $ npm install hexo-deployer-git --save

    и отредактируйте файл _config.yml:

    1
    2
    3
    deploy:
      type: git
      repo: <repository url> # https://github.com/username/username.github.io

  6. Выполните деплой блога командой:

    1
    $ hexo clean && hexo deploy

  7. Откройте в браузере страничку https://username.github.io и сделайте репост вашего шедевра для друзей.