Сайт для программиста. Часть 2. Публикация

  • Tutorial

В первой части я рассказал, как программисту относительно просто запустить с нуля свой личный сайт с использованием Github, Heroku и Twitter Bootstrap.

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

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


База данных — github


СУБД мы использовать не будем. Контент сайта будет хранится в файлах, которые, в свою очередь, будут храниться на github.

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

Чтобы добавить на сайт страницу или опубликовать статью, вам достаточно будет просто создать файл и сохранить его в репозитории. Проще некуда.

Если вы читали первую часть статьи, то у вас уже есть репозиторий на github и больше пока делать ничего не нужно.

Система публикации — docpad


Писать блог в html-формате не самое большое удовольствие. К тому же, каждой странице и статье нужно как минимум задать URL и обернуть в общий шаблон.

К счастью, есть волшебная библиотека docpad, которая возьмёт все эти скучные задачи на себя. Я не буду подробно описывать, что она умеет, проще перейти по ссылке и прочитать там.

Те, кто знает про jekyll или другие генераторы статических сайтов, могут спросить, почему docpad? Я выбрал его, потому что:

  • Он не навязывает способ своего использования. Его можно использовать как генератор сайта, как движок, как часть движка, как шаблонизатор в конце концов. У него удобное API, позволяющее брать вам именно те функции, которых вам не хватает, при необходимости реализуя остальные самостоятельно.
  • Он позволяет создавать динамические страницы, а не только статически их генерировать.
  • Контент сайта организуется в удобную in-memory базу данных, с которой можно делать что захочется.

Если хотите обсудить плюсы и минусы — добро пожаловать в комментарии.

А пока попробуем всё это в деле.

Запускаем каркас сайта


В первой части статьи я уже описывал, как клонировать репозиторий на github и выкладывать его на heroku, не буду повторяться. В этот раз код лежит здесь: http://github.com/daeq/docpad-sample. Форкайте, клонируйте, выкладывайте на Heroku.

Для ленивых простейший набор команд, при условии уже установленного heroku-toolbelt.

git clone git@github.com:daeq/docpad-sample
cd docpad-sample
heroku apps:create docpad-sample
git push heroku master

После запуска этого кода, вы увидите такой сайт: http://blog.programmer-site.tk.

Публикуем


Обратите внимание на три папки:

  • src/layouts — здесь лежат шаблоны страниц. Они могут наследоваться друг от друга (см. шаблоны index и post)
  • src/public — здесь лежат файлы, которые будут доступны из корня вашего сайта (т.е. файл src/public/favicon.ico будет доступен по адресу http://<ваш домен>/favicon.ico)
  • src/documents — здесь лежат собственно страницы и тексты.

Любую папку можно сконфигурировать. Конфигурация находится в файле app.js.

Страницы и тексты docpad организует в удобные коллекции. Как работать с коллекцией, можно посмотреть в src/documents/posts.html.eco.

Чтобы добавить новый пост в блог, достаточно создать новый файл в папке src/documents/posts. В зависимости от расширения файла, он будет по-разному обработан. .html — для html-файлов, .md — для markdown-разметки. Поддерживаются и другие форматы. Если вам их не хватит — можно написать свой плагин.

Я лично предпочитаю писать в формате Markdown. В нём легко писать, легко читать, его легко преобразовывать в другие форматы, для работы с ним есть куча инструментов.

Теперь добавьте новый файл в папку src/documents/posts, перезалейте/перезапустите приложение, и увидите, как в списке постов появился новый.

Вы могли заметить в начале файла блок, ограниченный символами ---. Это метаданные документа. Обычно у документа есть как минимум одно поле метаданных — layout. Вы можете добавлять свои произвольные поля, которые потом использовать везде, где имеете дело с этим документом. Например:

  • Переопределить поле date и сортировать посты в блоге по нему (а не по дате создания файла, как делается по умолчанию)
  • Добавить поле tags, выводить теги в лейауте поста и сделать фильтрацию страниц/постов по тегам.
  • Добавить поле series и в каждом из постов серии (например, как эта серия из двух постов про сайт прораммиста) выводить ссылки на остальные посты серии.

Комментарии


Мы не будем писать свою реализацию комментариев. Всё давно сделали за нас. Краткий список сервисов, которые позволят добавить комментарии на ваш сайт:


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

Выглядит это так:

Hypercoments widget

Шаринг


Наверное, вы хотите, чтобы люди рассказывали друг другу о вашем сайте. Сервисов, которые позволяют вам добавить виджет шаринга, ещё больше, чем сервисов комментариев. Я выбрал http://addthis.com. Простой, красивый, и с неплохой аналитикой.

Виджет выглядит так:

Addthis widget

Коллаборация


На вашем сайте наверняка будут ошибки и неточности. К тому же, информация со временем устаревает. Очень удобно было бы дать вашим читателям возможность исправить что-то в ваших текстах.

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

Это механизм pull request-ов. Воспользоваться им можно прямо из веб-интерфейса.

Можете попробовать предложить изменения к этой статье



Похоже, теперь у нас есть минимальный набор функций для публикации на нашем сайте. Его можно дополнять и затачивать под ваши потребности. Удачи!
Share post

Similar posts

Comments 18

    +1
    Намного лучше чем первая статья.
    Но можно было совсем немного доделать и что бы не перегружать сервер руками, использовать fs.watch, и при обновлении автоматически генерировать статику. Или автоматизировать другим путем, что бы достаточно было запушить на гитхаб.
      0
      Спасибо.

      docpad поддерживат watch. Достаточно дописать «watch» в строку кода, где уже есть «server» и «generate».
      Просто пример для heroku, а там при деплое всё равно перезагружается приложение.
    • UFO just landed and posted this here
        +1
        Для того, что в одном только «ставишь веб-сервер» заключено больше действий, чем описано в этой статье :)
          +2
          Да ладно.
            +1
            sudo apt-get install tasksel && sudo taskel
              –1
              heroku apps:create docpad-sample

              На одну команду меньше. Я победил.
                0
                $ heroku apps:create docpad-sample
                heroku: команда не найдена

                Ага, щас, победил :)
                  –3
                  apt-get install tasksel
                  -bash: apt-get: command not found
                  

                  Согласен на ничью :)
                    0
                    Не согласен :)

                    Руби у вас откуда взялся? По воздуху прилетел? Его ведь тоже ставили? Пакетным менеджером? Вот тем же пакетным менеджером и поставьте tasksel и всё, Дополнительного шага в виде установки heroku уже не нужно.
                  0
                  Забыли :)
                  sudo gem install heroku && heroku login etc

                  А если ещё руби не установлен… Так что для каждого метод свой
                    –1
                    А в предыдущем комментарии забыли арендовать/купить сервер и установить на него убунту :)

                    Да, мой комментарий именно про то, что «поднять сервер» можно очень по-разному, в зависимости от начальных условий.
            +1
            Благодарю вас за продолжение первой статьи.
              –4
              А будет топик «Сайт для программиста. Часть N. Первая строчка кода»? И каким будет N?

              Пока что в сайте для программиста ни слова ни о программировании вообще, ни о NodeJS в частности.

              Ну и очень интересует зачем это надо? Just for fun? Так где здесь fun? Как профиль с резюме/портфолио — так чем вас linkedin или так любимый русскими hr-ами «мой круг» не устраивает?
                –1
                Даешь 100500 копирочных сайтов программистов. С другой стороны, hrам проще — узнаваемый интерфейс после нескольких резюме. Вообще спасибо — отстал от трендов, теперь буду в курсе.
                  +3
                  СУБД мы использовать не будем. Контент сайта будет хранится в файлах, которые, в свою очередь, будут храниться на github.

                  (facepalm)
                    +1
                    Мне кажется, что первая и вторая часть статьи не должна стать массовым руководством к действию, а не то мы увидим очередной акт трагедии общественных благ.

                    Если GitHub и Heroku вместо средства разработки и запуска приложений с открытым исходным кодом станут использоваться всего лишь в качестве бесплатного хостинга сайтов, то тогда GitHub и Heroku очень скоро перестанут существовать в нынешнем их виде — либо тупо разорятся, либо огородятся неприемлемыми ограничениями, либо откажутся от оказания бесплатных услуг.
                      0
                      Мне представляется, что heroku для того и держит бесплатный тариф, чтобы люди использовали его как бесплатный хостинг, а потом, когда им понадобится запустить что-то посерьёзнее — покупали дополнительные услуги.

                      Иначе бы они сделали как Amazon — бесплатный хостинг, ограниченный по времени.

                    Only users with full accounts can post comments. Log in, please.