Как создать блог на GitHub?
Вообще я больше Windows программист и в мир веба захожу редко. И каждый раз клянусь, что больше туда ни ногой. Но вот я открыл для себя GitHub и понеслось… Четыре дня мучений, ночь без сна. Итог вы видите (если сайт не упал) сейчас. Даже как-то работает.
Итак, представляю вам подробную пошаговую инструкцию как поднять блог на GitHub Pages (ориентированно на таких же нубов как я).
#0 Немного мат. части.
GitHub Pages – это бесплатный хостинг от GitHub. На этом хостинге нет сервера, на котором вы бы могли реализовать бекэнд. Т.е. вы не сможете сделать что-то с ASP.NET или PHP. Вы можете только хранить статические сайты.
Jekyll – это генератор статических сайтов. Он автоматически собирает html страничку из различных файлов, «заменяет» админку. Ну все хватит теории!
#1 Установка ПО.
Если вы Windows user (как и я) то для вас установка окажется чуть длиннее чем для UNIX пользователей.
Для начала надо поставить ruby gems. Идем на офф сайт. Качаем от туда установщик, соблюдая разрядность ОС. Инсталлим. При выборе пути при установке надо поставить все галки.
Кидаем файл сертификата в папку с ruby.
Запускаем CMD от администратора и проверяем все ли встало: ruby -v и gem -v. Ставим наш сертификат: set SSL_CERT_FILE=C:\Пуиь-До-Папки-С-Ruby\cacert.pem. Под UNIX обычно все идет из коробки и ставить сертификат ruby не надо.
Если все встало, то вводим команды:
gem install jekyll
jekyll -v
gem install bundlerЗакрываем CMD.
#2 Создание проекта.
Создаем каталог Site где душа пожелает. Заходим в него и запускаем CMD (вводим заветные 3 буквы в адресной строке проводника, чтобы сразу перейти в наш каталог).
jekyll new blogName
jekyll build
jekyll sВсе блог собран и запущен на сервере! Он доступен по ссылке localhost:4000. Чтобы остановить сервер жмем CTRL+C в консоли.
Если вы работаете под Windows, то вам пройдите в папку C:\Пуиь-До-Папки-С-Ruby\lib\ruby\gems\2.3.0\gems\jekyll-3.3.0\lib\jekyll\commands\build.rb и в файле build.rb открываем его note++ и в строке 74(75) меняем if на unless (конечно сервер при этом должен быть остановлен). Теперь вам не придется перезапускать сервер чтобы увидеть изменения. (в командной строке при запуске сервера может появиться предупреждение. Забейте на него! Это заговор Unix систем. Все врут)))
#3 Размещение постов.
Все посты блога берутся из *.md или *.markdown файлов из папки _posts.
Имя файла задается в формате ггг-мм-дд-имя-поста.md.
А вот формат заголовка:
---
layout: post
title: "Как создать блог на GitHub?" //заголовок
date: 2017-01-28 //датта
image: githubBlog.jpg //фото (опционально)
categories: blog github //jekyll тэги
---Чтобы опубликовать пост вам достаточно добавить md файл в папку. Jekyll сам соберет все что нужно. Оформлять посты не сложно, тем более Jekyll понимает синтаксис html в md файлах.
#4 Kастомизация и настройка.
Если вас устраивают default настройки, то этот пункт можно не читать.
Вводим в консоль команду bundle show minima и идем по появившемуся в консоли пути. Копируем все файлы в папку вашего блога. Теперь можно изменять.
Вот описание структуры каталогов:
myblog
├── _config.yml (конфигурационный файл)
├── _drafts (черновики постов)
| └── test_post.md
├── _includes («включаемые» части шаблона)
| ├── footer.html
| └── header.html
├── _layouts (шаблоны страниц)
| ├── default.html
| └── post.html
├── _posts (готовые к публикации посты)
| └── 2016-09-26-my_first_post.md
├── _site (сгенерированные страницы сайта)
├── about.md (статическая страница)
└── index.html (главная страница)Для Jekyll существует много готовых тем и шаблонов. Вы можете выбрать любой и изменить его. Но не любой можно залить на GitHub и даже собрать у себя на компьютере(!). При попытке собрать шаблон вы наверняка столкнетесь ошибками. Я рекомендую брать за основу легкие шаблоны и изменять их.
Одним из таких шаблонов является Clean blog. Именно он и был взят за основу. Вы также можете взять мой шаблон и изменить его.
Чтобы собрать шаблон вам нужно распаковать его, запустить консоль из папки с шаблоном и вбить знакомое jekyll build. Если шаблон собрался с первого раза – вам повезло. В противном случае вылетит ошибка.
Тогда стоит рыть в Gemfile и смотреть какие плагины там прописаны, на что он ругается. Сравните с gem файлов от оригинального шаблона. Гугл тут не всегда поможет. Если не знакомы с ruby поспрашивайте тех кто знаком с ним (я например сутки пытался скомпилировать шаблон пока знакомый не подсказал мне что нужно в gem файл посмотреть). Если в папке со скаченный темой есть файл Gemfile.lock то удалите его. Это файл соответствия версий репозиториев (или что то в этом роде) а у вас могут стоять пакеты новых версий. Да ruby не может в обратную совместимость и мои Windows и ассемблерные мозги отказываются его понимать.
На пример для работы Clear blog мне пришлось до установить jekyll-paginate командой `gem install jekyll-paginate
Далее изменяйте тему по своему усмотрению. Говорить про это я не буду. Там и так все понятно (даже мне, далекому от веба). Верстайте и дизигнете!
Стоит только упомянуть файл конфигурации _config.yml. Вот его структура:
# тайтл, описание блога
title: "Jekyll"
description: "Blog about jekyll and ruby"
# базовый url сайта
# меняется, если страницы лежат не в корне
# например, /blog
baseurl: ""
# домен сайта
# для разработки включите localhost, для деплоя укажите свой домен
url: "http://localhost:4000"
# путь к статье в формате /категория/название_статьи
permalink: /:categories/:title/
# При выводе всех постов на одной странице
# используем постраничный вывод
paginate: 6
paginate_path: 'page:num'
# не публиковать посты, указанное время которых
# позднее времени момента публикации
future: false
# Настройки сборки (могут отличаться)
markdown: kramdown # используемый генератор markdown
timezone: Europe/Moscow # временная зона
destination: _site # директория с собранной статикой
relative_permalinks: false # использовать ли относительные путиПосле любого изменения в нем надо пересобрать блог.
#5 Размещение на GitHub.
Если вы не зарегистрированы, то самое время сделать это! После регистрации и настройки профиля вам необходимо создать репозиторий (‘+’ в верхнем углу) с именем ВашЛогин.github.io.
Далее вбиваем в яндекс GitHub Desktop, переходим по первой ссылке и качаем ПО (Unix пользователям придется использовать консоль. Ищите мануалы в сети).
После установки и настройки программы надо клонировать созданный репозиторий (тык по названию репозитория => clone). Откройте его в проводнике и скопируйте туда все файлы вашего блога, кроме папки _site и файла Gemfile.lock. Перейдите в программу и сделайте commit с названием Initial commit чтобы применить изменения. (чтобы подробнее узнать про коммиты почитайте мануалы в сети). Жмякаем кнопочку sync в верхнем углу. Ждем. Заходим на сайт GitHub и открываем свой репозиторий. Изменения должны вступить в силу.
Ну и наконец переходим по ссылке https://ВашЛогин.github.io все должно запуститься через минут 5-6 (у меня запустилось сразу)!!!
В GitHub по умолчанию встроен Jekyll который сам соберет ваш блог (или не соберет, тогда попробуйте более легкую тему).
P.s.
При каких-либо изменениях советую сначала собирать и тестировать все на локалхост, а потом уже изменять что-то в репозитории, ибо много частых и мелких изменений и коммитов могут поломать блог и все будет работать криво. Я так сломал свой блог и мне пришлось удалять все файлы из репозитория и снова все заливать. Тут действует известное правило: «не трогай то, что работает». После размещения очередного поста изменения возможно вступят в силу не сразу, а через несколько минут (возможно у меня это происходит так как я один раз поломал блог, не знаю). Да, у меня еще шрифты живут своей жизнью (сами слетают и восстанавливаются). Для моей темы это не критично, ибо шрифты очень похожи. Не могу найти этому какое-либо объяснение, я даже выкачал их и изменил @import в css файле. Если вы узнаете решение – пожалуйста напишите мне что можно исправить.
Все хватит про веб. Пора садиться за свой любимый C# и WPF!
Дополнительная литература.
- Документация по jekyll
- Годная статья на харбе
- Про всякие вкусности
- Удобное ведение постов
- Ютуб канал с мануалом по jekyll