Блог Библиотека Кто и что здесь

"Про технологии" "Про хобби" tg-канал

Welcome to Jekyll!

Про Jekyll -- генератор статических сайтов и блогов.

howto work_related

30 Jun 2013


...

Что такое Jekyll

Jekyll – генератор статических сайтов и блогов. Написан на Ruby, используется в GithubPages.

Устанавливаем Jekyll на Ubuntu 12.04

Ставим через rubygems, потому что deb-пакета со свежим Jekyll нет.

> sudo apt-get install rubygems
> sudo gem install jekyll

Готово.

Скелет блога

Создаем каталог и говорим Джекилу инициализировать блог:

> mkdir my-blog
> cd $_
> jekyll new .

В текущем каталоге появляется файл _config.yaml, каталоги _posts, _layout, css. Более того, Jekyll уже написал для нас первый пост: “Welcome to Jekyll”.

“Компилируем” блог и смотрим, что получилось:

> jekyll serve
> firefox localhost:4000

Структуру каталогов можно подправить, например:

.
|-- _config.yml
|-- deploy
|-- plugins
`-- source
    |-- css
    |   |-- main.css
    |   `-- syntax.css
    |-- index.html
    |-- js
    |-- _layouts
    |   |-- default.html
    |   `-- post.html
    `-- _posts
        `-- 2013-06-30-welcome-to-jekyll.md

В каталог source/_posts будем помещать свои записи, в source/js – полезные js-скриты (генератор оглавлений и т.п.), в plugins – планины для Jekyll’а, а в deploy Jekyll будет записывать сгенерированный сайт.

Пример файла _config.yml:

name: My New Jekyll Blog
pygments: true
url: http://blog.liruoko.ru
permalink: /:categories/:year-:month/:title
plugins: plugins
source: source
destination: deploy
future: false

Осталось доставить сгенерированный сайт (каталог deploy) на сервер и настроить apache или любой другой веб-сервер. Благо, сайт у нас статический, и от веб-сервера требуется только отдавать файлы с диска.

Счетчики

Добавляем к своему сайту Яндекс.Метрику и Google Analytics.

Создаем файлы source/_includes/google-analytics и source/_includes/yandex-metrika, в каждый помещаем код соответствующего счетчика.

Добавляем счетчики на все страницы:

Index: source/_layouts/default.html
===================================================================
--- source/_layouts/default.html    (revision NNN)
+++ source/_layouts/default.html    (working copy)
@@ -16,8 +16,10 @@
        <!-- Custom CSS -->
        <link rel="stylesheet" href="/css/main.css">

+        { % include google-analytics % }
     </head>
     <body>
+        { % include yandex-metrika % }

         <div class="container">
           <div class="site">

Полезные ссылки