Как поднять блог на Github Pages

04 Jan 2015

• github
• github-pages
• jekyll

Первый пост блога, инструкция.

Содержание

• Лирика
• Установка и настройка окружения
• Кастомизация
• Итоги
• Ссылки

Лирика

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

Останавливало два фактора: лень и незнание веб-технологий(и отсутсвие большого желания изучать их). Использовать же современные готовые движки типа WordPress, Blogger или LiveJournal и иже с ними не хотелось из-за их перегруженности, “вебдванольности”, не подконтрольности мне. Да и большинство функционала, который предлагают современные блоги/дневники, мне не нужно.

И вот тут в очередной раз гуляя по Github я наталкиваюсь на Github Pages. Полчаса чтения и я понимаю — это то что нужно. Суть в чем? Сервис предлагает пользователям Github бесплатный хостинг статических html-страниц для специально созданного репозитория. Простые страницы все же не блог — так какой же от сервиса толк? Там есть генератор удобный, который из пачки шаблонов и простого текста сгенерирует сайт пользователю на радость командой одной — git push — прелесть какая.

Если коротко, то вот что меня привлекло завести блог на Github Pages:

• отсутствие желания заниматься самому настройкой сервера, следить за обновлениями, безопасностью и все такое. На Github Pages это происходит без моего участия;
• набор статических html-страниц, а значит быстро будет отображаться в браузере;
• есть генератор этих самых статических страниц — Jekyll, а значит не надо будет самому заниматься версткой постов;
• раз статические страницы, то не надо никаких баз данных, php и тому подобных вещей;
• посты пишутся в простом markdown-формате, а значит подойдет тем кто не хочет вообще заморачиваться с html;
• git; это значит многое: версионность, локальное хранение, безопасность(шифрованные данные же пересылаем ) и еще очень много хорошего;
• возможность привязать к своему домену блог;
• возможность кастомизации по самое не хочу … для тех кто хочет.

Установка и настройка окружения

Вместо чтения кучи документации по Jekyll, я нашел крутую репу poole. Как пишет ее автор:

Т.е. минимально необходимый набор для запуска блога: форкнул, поменял настройки под себя и пользуешься на здоровье. Правило “Все уже написано до нас!” работает безотказно 🙂 .

demo.getpoole.com — рабочее демо блога:

Приступим к созданию своего блога:

• устанавливаем Ruby;
• устанавливаем Ruby DevKit;
• устанавливаем Jekyll. Я сначала установил генератор так: gem install jekyll. И это правильно в общем случае. Но не в случае с Github. Сайт использует не последнюю версию. И возможна такая ситуация, когда вы случайно задействуете новую фичу, которая не поддерживается той версией Jekyll, которая установлена на Github. Узнать текущую версию можно здесь. Установить требуемую версию Jekyll можно так: gem install jekyll -v x.y.z. Но гораздо проще воспользоваться готовым пакетом от самых ребят с Github: gem install github-pages, он разворачивает текущее окружение, используемое Github, у вас на компьютере;
• клонируем репозиторий poole;
• запускаем локально сайт, для этого в консоли переходим в папку с poole и вводим jekyll serve. После того как Jekyll запуститься, мы сможем узреть сайт по адресу http://localhost:4000. Когда вы запускаете Jekyll, он создает папку _site, в которую записывает сгенерированный блог. Каждый файл в репозитории будет скопирован внутрь папки, за исключением тех файлов/папок, которые начинаются с подчеркивания. Markdown-файлы будут автоматически конвертированы в соотв. страницы. В папке _posts должны находится посты в markdown-формате. При чем имя файла должно быть вида год-месяц-день-название_поста.md. Иначе для него не сгенерируется соответствующая html-страница. _config.yml — конфигурационный файл Jekyll, меняем его под свои надобности, подробно почитать о настройке здесь. Важное примечание: по умолчанию Jekyll при любом изменении файлов перезапишет сайт, но если вы поменяли что-то в _config.yml, то надо перезапустить Jekyll;
• добавляем посты, меняем шаблоны и вообще делаем что желаем;
• создаем на Github новый репозиторий с именем вида github_username.github.io;
• заливаем/пушим в него наш блог;
• спустя небольшое время(до получаса) блог становиться доступен по адресу http://github_username.github.io
• если есть свой домен, то Github легко позволяет привязать его к блогу. Руководство от Github, больше инфы для тех у кого регистратор домена Namecheap.

Кастомизация

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

Дефолтная тема poole мне подошла практически идеально. Но захотелось изменить еще некоторые вещи.

Добавил три ссылки вверху:

• О блоге
• Архив записей — динамически формирующийся список записей, для быстрой навигации;
• Лента — для желающих подписаться на обновления блога.

Для этого я добавил в _config.yml:

pages_list:
  О блоге: '/about'
  Архив записей: '/archive'
  Лента: '/atom.xml'

И модифицировал шаблон _layouts/default.html:

<h3 class="masthead-title">
    <a href="/" title="Home">{{ site.title }}</a>

    {% for page in site.pages_list %}
      &nbsp;&nbsp;&nbsp;
      <small><a href="{{ page[1]  }}">{{ page[0] }}</a></small>
    {% endfor %}

    <p> <small>{{ site.tagline }}</small> </p></h3>

Еще оказалось что с нуля нет поддержки тегов, что есть не классно. Для Jekyll есть отдельный плагин, который реализует теги, но в нашем случае это не подходит, так как тот Jekyll, который крутится на серверах Github, нельзя кастомизировать плагинами. Памятуя о правиле “Все написано до нас”, я полез в Google и спустя 5-ть минут решение найдено. Расписывать много не хочется, решение полностью скопировано, для наглядности будет удобно посмотреть diff. А именно файлы poole.css, index.html, post.html и tags.html.

Честно говоря я ни грамма не понял, что я за магию сделал, для того что бы теги заработали(что взять с С++ разработчика?), но все получилось и работает так как мне нужно. Вот, что крест животворящий свободный софт делает!

Итоги

Я получил личный блог/сайт, не особо окунаясь в мир веба, могу писать разной степени полезности посты и продолжать программировать на своих любимых С/С++.

Ссылки

• официальный сайт Jekyll с очень хорошей документацией;
• документация Github Pages;
• poole репозиторий.
• руководство по markdown;
• пост чувака, на который я ориентировался при настройке блога;
• пост чувака для настройки мультилингвальности блога;
• настройка DNS для Namecheap домена для блога на Github;
• пост чувака, который рассказывает как добавить поддержку тегов без плагина Jekyll;
• репозиторий моего блога.