Создание статического блога

Я уже давно хотел сделать свой блог и писать туда умные мысли, но всегда что-то останавливало. Как правило это было неприятие того способа, которым должен был создаваться блог. С одной стороны хотелось создать что-то свое с нуля, с другой же стороны не хотелось тратить на это много времени. Поэтому такие популярные блоговые движки как WordPress или Blogger не подходили по первой причине, а писать все с нуля на чем-нибудь типа Django не хотелось по второй причине.

И вот однажды в подкасте radio-t я услышал такое словосочетание как статический блог. Тогда один из ведущих, upmputun, рассказывал про его опыт использования Octopress – генератор статических блогов.

В отличие от динамических блогов, страницы которых создаются динамически по запросу, статические блоги представляют собой набор html-шаблонов, css и javascript, сгенерированных однажды и загруженных на сервер. У такого подхода можно выделить следующие плюсы:

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

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

Для генерации статических html-страниц существуют так называемые генераторы статических блогов (сайтов). Для генерации страниц они используют шаблоны - заготовки html-страниц со специальной разметкой для встраивания изменяющихся частей в одинаковый каркас. Также часто для разметки записей в блоге используется Markdown, который при генерации сайта транслируется в html. Это значительно упрощает написание статей, в то же время не загромождая текст разметочными html-конструкциями. Чаще всего такие генераторы распространяются со встроенным простеньким http-сервером, который позволяет на локальной машине запустить сгенерированный сайт и посмотреть как он будет выглядеть на сервере.

Один из таких генераторов уже упоминался выше (Octopress). Я пытался его установить и заставить работать, но т.к. он написан на Ruby, то я столкнулся с проблемой настройки окружения для этого языка. Частично из-за нехватки времени, а частично и из-за предвзятого отношения к этому языку программирования я не довел до конца попытку сделать блог с помощью этого генератора.

Спустя некоторое время я узнал что GitHub бесплатно предоставляет возможность создать персональный сайт любому пользователю разместив набор html-страниц в специально названном репозитории этого пользователя. Причем пользователю дается возможность воспользоваться встроенным генератором статических сайтов. Этот сервис они назвали GitHub Pages.

Один из основателей гитхаба, Tom Preston-Werner, написал генератор статических сайтов – Jekyll, который и используется для генерации статических страниц в сервисе GitHub Pages. В этот раз у меня получилось установить и настроить этот генератор, хотя он тоже написан на Ruby. Но оказалось, что он совсем не хочет работать с кирилицей. Разбираться в этом не хотелось, поэтому эта попытка тоже не удалась.

Исходя из того что я имею большой опыт программирования на Python я задался вопросом А нет ли какого-нибудь генератора статических сайтов, написанного на пайтоне?&. И такой генератор нашелся, им оказался Mynt. Так как он написан на пайтоне, то особых трудов его установить для меня не составило. Далее я опишу детальную процедуру установки и использования.

Установка Mynt

Т. к. на домашнем компьютере у меня установлена Windows 7, я буду описывать процедуру установки именно для этой операционной системы.

Установка пайтона

Для начала необходимо установить интерпретатор пайтона. Для Windows установочный файл можно скачать здесь. Установить можно в любую директорию, но я предпочел директорию по умолчанию, а именно C:\Python27\.

Установка distribute и pip

Затем необходимо установить установщик пакетов для пайтона. Для этого достаточно скачать файлик distribute_setup.py и выполнить следующие команды (из директории где установлен пайтон):

1
2

C:\Python27>python.exe distribute_setup.py
C:\Python27>Scripts\easy_install.exe pip

C:\Python27> не является частью команды, это приглашение командной строки.

После этого в директории C:\Python27\Scripts появляется установщик pip.exe, который можно использовать для установки нужных пакетов из репозитория PyPI.

Установка virtualenv

После установки pip можно создать отдельное окружение для использования mynt. Это делать в общем случае не обязательно, но рекомендуется для каждого проекта создавать отдельное виртуальное окружение для того, чтобы библиотеки одного проекта не влияли на другой. Кроме того такой подход позволяет для каждого отдельного проекта использовать различные версии одних и тех же библиотек.

Для создания виртуального окружения необходимо сначала установить пакет virtualenv с помощью pip:

1

C:\Python27>Scripts\pip.exe install virtualenv

После выполнения этой команды в директории C:\Python27\Scripts появится файл virtualenv.exe, который можно использовать для создания виртуальных окружений.

Создание виртуального окружения

Чтобы создать виртуальное окружение необходимо задать директорию, в которой будут находится пакеты для создаваемого виртуального окружения и выполнить следующую команду:

1

C:\Python27>Scripts\virtualenv.exe --distribute C:\Users\user\workspace\env_mynt

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

Активация виртуального окружения

После того как создано виртуальное окружение, необходимо его активировать. Для этого нужно запустить файл C:\Users\user\workspace\env_mynt\Scripts\activate, находящийся в директории, которая была указана в качестве директории созданного виртуального окружения.

1

C:\Users\user\workspace>env_mynt\Scripts\activate

После выполения этой команды приглашение командной строки изменится и вначале будет показано название текущего активного виртуального окружения:

1

(env_mynt) C:\Users\user\workspace>

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

Установка Mynt

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

1

(env_mynt) C:\Users\user\workspace>pip install mynt

pip скачает и установит все необходимые зависимости и, если нужно, даже скомпилирует их. mynt требует следующие зависимости:

• houdini.py
• Jinja2
• misaka
• Pygments
• PyYAML
• watchdog

Почти все они устанавливаются без проблем. Кроме misaka и houdini.py, которые необходимо компилировать из исходников (они написаны на С). Для этого нужно иметь установленную Visual Studio или другой компилятор (например MinGW). Т.к. сам пайтон скомпилирован с помощью VS 2008, то он пытается компилировать все библиотеки тоже с помощью VS 2008, но если у вас установлена более новая версия Visual Studio, то при попытке скомпилировать библиотеку misaka или houdini.py вы получите ошибку error: Unable to find vcvarsall.bat.

Для того, чтобы обойти эту ошибку, можно обмануть пайтон и заставить его использовать новую версию Visual Studio как описано на stackoverflow. У меня установлена Visual Studio 2010, поэтому мне подошло решение, описанное в этом вопросе. Достаточно выполнить следующую команду:

1

(env_mynt) C:\Users\user\workspace>SET VS90COMNTOOLS=%VS100COMNTOOLS%

После чего выполнить команду установки еще раз:

1

(env_mynt) C:\Users\user\workspace>pip install mynt

В этот раз все должно установиться без проблем.

Использование Mynt

Теперь, когда mynt установлен, можно перейти к его использованию. Краткое введение в mynt можно найти на официальном сайте. Здесь же я опишу основные моменты, которые понядобятся для создания простого блога, не вдаваясь в подробности.

Структура

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

1

(env_mynt) C:\Users\user\workspace>mynt init myblog

Эта команда создаст в текущей директории (C:\Users\user\workspace) папку myblog с базовой структурой блога.

Из этой структуры mynt генерирует html-страницы. Немного пояснений:

• _assets предназначена для хранения файлов css, javascript и картинок
• в _posts хранятся записи блога в формате markdown
• в _templates находятся шаблоны, использующиеся для генерации страниц сайта
• директория archives предназначена для записей блога, попавших в архив
• файл config.yml служит для настройки параметров генерации mynt
• файл feed.xml является вашим RSS-лентой
• index.html – главная страница сайта

Настройка

Для минимальной настройки достаточно отредактировать файл конфигурации config.yml, который использует yaml форматирование. Здесь можно указать авторство сайта, описание и название, которые будут использоваться в метатегах html. Для этого служат параметры author, description, title соответственно. Указать количество записей на главной странице можно с помощью параметра post_limit. Кроме того можно указать идентификаторы в различных социальных сетях, которые на сайте отобразятся в виде кликабельных картинок в верхней правой части экрана. Описание всех настроек можно найти в документации.

Создание постов

После задания нужных параметров, можно попробовать написать что-нибудь в блог. При создании структуры mynt добавил приветственный пост, который можно найти в директории _posts под названием 2012-04-12-Welcome-to-mynt.md. Цифры вначале означают дату создания поста, по умолчанию эти цифры и название файла после них используются в ссылке на этот пост.

Структура файла-поста должна быть следующей. Вначале идет yaml formatter блок, описывающий создаваемый пост и отделенный черточками от основного текста. Обычно такой блок может выглядеть так:

1
2
3
4
5

---
layout: post.html
title: Название поста
tags: [тег1, тег2, тег3]
---

Теги используются для категоризации записей в блоге для удобства.

После этого блока идет тело поста, в котором можно использовать язык разметки markdown. Описание этого языка можно найти на википедии.

Единственное, что может отличатся – это работа с картинками. Для того, чтобы вставить картинку в пост, необходимо поместить её в директорию _assets/images, после чего к ней можно получить доступ с помощью функции get_asset:

1

![описание картинки]({{ get_asset('images/my_image.jpg') }})

Генерация

После того, как пост(ы) написаны, нужно сгенерировать html. Для этого служит команда gen, в которую необходимо передать директорию с исходной структурой и директорию, в которую необходимо положить сгенерированные файлы.

1

(env_mynt) C:\Users\user\workspace>mynt gen -f myblog myblog_generated

Ключ -f нужен для того, чтобы очищать директорию перед генерацией

После выполнения этой команды в папке myblog_generated будет готовый сгенерированный сайт. Для того, чтобы посмотреть как выглядит сайт на домашней машине достаточно запустить встроенный http-сервер. Для этого используется команда serve, в которую нужно передать директорию с готовым сайтом:

1

(env_mynt) C:\Users\user\workspace>mynt serve myblog_generated

После чего сайт будет доступен по ссылке 127.0.0.1:8080.

Использование GitHub Pages

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

Создание репозитория

Для начала необходимо создать репозиторий и назвать его по схеме username.github.io, где username – ваш логин на гитхабе. После того, как создан репозиторий, нужно добавить в него сгенерированные html-файлы. С помощью приложения GitHub для windows это сделать очень просто. Чтобы скачать репозиторий с гитхаба, достаточно в списке репозиториев найти нужный и нажать clone. По умолчанию приложение хранит все репозитории в C:\Users\user\Documents\GitHub. После выполнения команды clone репозиторий должен появится в этой директории. В моем случае появилась папка C:\Users\user\Documents\GitHub\geerk.github.io. Изначально репозиторий пустой.

Заполнение репозитория

После того, как репозиторий настроен, туда можно направить генерацию html-файлов с помощью команды gen, например так:

1

(env_mynt) C:\Users\user\workspace>mynt gen -f myblog C:\Users\user\Documents\GitHub\geerk.github.io

После этого необходимо закоммитить и запушить. В настольном приложении GitHub есть возможность сделать это очень просто. Сначала нужно ввести commit message, затем нажать кнопку commit и после этого синхронизировать локальный репозиторий с удаленным, для этого служит кнопка sync.

Всё. Спустя не более десяти минут сайт станет доступным по адресу, совпадающиему с названием репозитория, а именно username.github.io, где username – ваш логин на гитхабе.

Хранение исходников

Теперь сгенерированный сайт будет хранится на гитхабе и если вдруг код с домашней машины пропадет, то всегда можно с легкостью склонировать репозиторий и получить копию html-страниц на локальной машине. Но что делать с исходными кодами в markdown? Для себя я решил этот вопрос с помощью сервиса dropbox, который предоставляет определенный размер жесткого диска в облаке. Таким образом мои файлы хранятся в специальной директории, которая постоянно синхронизируется с удаленным сервером dropbox. И в случае чего я всегда могу восстановить утерянные файлы.

Собственный домен

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

• настроить A-запись на ip-адрес гитхаба
• настроить CNAME-запись на поддомен по умолчанию

Минусом первого варианта является то, что в случае смены ip-адреса гитхаба, нужно будет вручную менять А-запись на новый адрес. Плюсом же первого варианта является возможность настроить домен второго уровня (например: example.com).

Минусом второго подхода можно назвать невозможность настройки домена второго уровня. Но плюс в том, что в случае смены ip-адреса гитхаба не нужно менять его в настройках DNS.

Я выбрал второй вариант. Для того, чтобы настроить поддомен по второму варианту, достаточно прописать CNAME-запись в настройках DNS на поддомен, выданный гитхабом, например у меня это выглядит так: blog.trukhanov.net CNAME geerk.github.io. После этого нужно добавить файл CNAME в репозиторий, а в файле записать поддомен, на который гитхаб будет делать автоматический редирект при попытке захода на поддомен по умолчанию. В моем случае это blog.trukhanov.net.

Единственное неудобство такого подхода заключается в том, что mynt не копирует файл CNAME при генерации. Поэтому можно написать небольшой скрипт для генерации сайта, он может выглядеть так:

1
2

C:\Users\user\workspace\envmynt\Scripts\mynt gen -f C:\Users\user\workspace\myblog C:\Users\user\Documents\GitHub\geerk.github.io
COPY C:\Users\user\workspace\myblog\CNAME C:\Users\user\Documents\GitHub\geerk.github.io\

Первая команда генерирует html, а вторая копирует CNAME-файл.

P.S.

Теперь мой блог можно найти по ссылке blog.trukhanov.net, а репозиторий, из которого он работает находится по адресу github.com/geerk/geerk.github.io.

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