newsmode
search
Меню
arrow_back Назад

Switching Blog from Wordpress to Jekyll

auto_awesomeКраткое саммари

Андрей Карпаты рассказывает, как он отказался от WordPress в пользу генератора статических сайтов Jekyll, вдохновившись постом Марка Рейда о переходе на Hakyll. WordPress он критикует как раздутую, медленную и уязвимую систему с динамическим рендерингом на PHP: его собственный блог был взломан, а посты заражены спамом, плюс контент застревает в SQL-базе и сам WordPress заблокирован в Китае. Jekyll, изначально написанный сооснователем GitHub Томом Престоном-Вернером, хранит все посты в виде Markdown-файлов в папке _posts, а команда jekyll build превращает их в статический HTML в папке _site. Вся кодовая база состоит примерно из 7 файлов, что упрощает правку CSS и шаблонов — например, добавление Google Analytics и комментариев Disqus. Jekyll тесно интегрирован с GitHub: репозиторий вида username.github.io автоматически собирается и хостится, а контент навсегда сохраняется в простом Markdown. Карпаты демонстрирует рабочий процесс публикации поста через git push и заключает, что не мог бы быть счастливее от этого решения.

Inspired by Mark Reid’s blog post Switching from Jekyll to Hakyll I decided to abandon Wordpress and give Jekyll a try (note, I currently do not yet feel pro enough to switch to Haskell-based Hakyll). I can confidently say that I could not be happier about this decision.

Вдохновлённый постом Марка Рейда Switching from Jekyll to Hakyll, я решил отказаться от Wordpress и попробовать Jekyll (замечу, что пока я не чувствую себя достаточно прокачанным, чтобы перейти на основанный на Haskell Hakyll). Могу уверенно сказать, что я не мог бы быть счастливее от этого решения.

Wordpress Monster

Монстр Wordpress

“So what’s wrong with Wordpress?” You may ask. Let’s see, everything:

«Так что же не так с Wordpress?» — спросите вы. Давайте посмотрим — всё:

  • Wordpress blogs are clunky, slow and bloated.
  • Wordpress is dynamically rendered with .php. There are really only few niche applications where this is necessary. Dynamic code execution exposes your blog to hackers and exploits: zero-day attacks, viruses, etc. My own blog was hacked ~2 months ago and all my posts had been infected with spammy content that kept re-inserting itself magically when I removed it.
  • Wordpress is popular among the masses of people who don’t know any better, and therefore attracts the largest amount of spammers.
  • Your posts are stuck forever in an ugly, Wordpress-specific SQL database (ew). You can’t easily import/export posts. You do not really own your content in raw and nimble form.
  • Wordpress is blocked in China.
  • Блоги на Wordpress неуклюжие, медленные и раздутые. Wordpress рендерится динамически с помощью .php. На самом деле есть лишь несколько нишевых применений, где это действительно необходимо. Динамическое выполнение кода делает ваш блог уязвимым для хакеров и эксплойтов: атаки нулевого дня, вирусы и так далее. Мой собственный блог был взломан примерно 2 месяца назад, и все мои посты оказались заражены спамным содержимым, которое волшебным образом снова и снова вставляло себя, когда я его удалял. Wordpress популярен среди масс людей, которые не разбираются в этом лучше, и поэтому привлекает наибольшее количество спамеров. Ваши посты навсегда застревают в уродливой, специфичной для Wordpress SQL-базе данных (фу). Их нельзя легко импортировать/экспортировать. Вы по-настоящему не владеете своим контентом в сыром и гибком виде. Wordpress заблокирован в Китае.

    Wordpress is a bloated, clunky, slow, vulnerable, closed mess.

    Wordpress — это раздутый, неуклюжий, медленный, уязвимый, закрытый бардак.

    Jekyll <3

    Jekyll <3

    Jekyll describes itself as a tool for building “Simple, blog-aware, static sites”, and was originally written by one of the Github co-founders, Tom Preston-Werner. It is flat and transparent: Your blog workspace is a single folder with a config file, and a few folders for CSS and HTML templates. All my content, for example, lives in two folders:

    Jekyll описывает себя как инструмент для создания «простых, ориентированных на блоги статических сайтов» и был изначально написан одним из сооснователей Github, Томом Престоном-Вернером. Он плоский и прозрачный: рабочее пространство вашего блога — это одна папка с конфигурационным файлом и несколькими папками для CSS и HTML-шаблонов. Весь мой контент, например, живёт в двух папках:

  • My blog posts are just files in a single folder _posts, written in Markdown. Including this post, of course.
  • My images are in a single folder assets.
  • Мои посты в блоге — это просто файлы в одной папке _posts, написанные на Markdown. Включая, конечно, и этот пост. Мои изображения лежат в одной папке assets.

    That’s it. You call $ jekyll build from command line and it will automatically render all posts it finds in your _posts folder from markdown to HTML, wraps it with header/footer templates, creates the parent index page that lists all your posts and outputs everything into a directory _site. The _site directory holds your entire webpage as static content. It can then be uploaded to a webserver wherever you like.

    Вот и всё. Вы вызываете из командной строки $ jekyll build, и он автоматически рендерит все посты, которые находит в папке _posts, из markdown в HTML, оборачивает их шаблонами заголовка/подвала, создаёт родительскую индексную страницу со списком всех ваших постов и выводит всё в директорию _site. Директория _site содержит всю вашу веб-страницу в виде статического контента. Затем её можно загрузить на любой веб-сервер по вашему усмотрению.

    The entire code base consists of like 7 files. It’s easy to see how the HTML templates get composed to your final site. It’s trivial to tweak the CSS or any of the HTML templates. For example, I added Google Analytics tracking code to all my pages by tweaking the html template, and also Disqus comments to all my posts by tweaking the posts template with the Disqus Javascript code.

    Вся кодовая база состоит примерно из 7 файлов. Легко увидеть, как HTML-шаблоны складываются в ваш итоговый сайт. Тривиально подправить CSS или любой из HTML-шаблонов. Например, я добавил код отслеживания Google Analytics на все свои страницы, подправив html-шаблон, а также комментарии Disqus ко всем своим постам, добавив Javascript-код Disqus в шаблон постов.

    Github integration

    Интеграция с Github

    Lastly, as you might expect Jekyll is tightly integrated with Github: create a repository that looks like username.github.io and add your files to the repo. Github will automatically compile your files with Jekyll and make the _site folder available. For example, mine lives on karpathy.github.io. Thus, Github makes sure that your blog is beautifully backed up forever in simple markdown, and also hosts your content!

    Наконец, как вы и могли ожидать, Jekyll тесно интегрирован с Github: создайте репозиторий с именем вида username.github.io и добавьте в него свои файлы. Github автоматически скомпилирует ваши файлы с помощью Jekyll и сделает доступной папку _site. Например, мой блог живёт на karpathy.github.io. Таким образом, Github гарантирует, что ваш блог прекрасно сохраняется навсегда в простом markdown, а также хостит ваш контент!

    Jekyll strikes the balance: It’s packed with just the right amount of features.

    Jekyll находит баланс: в нём ровно столько возможностей, сколько нужно.

    Example workflow

    Пример рабочего процесса

    To give a flavor for the workflow, to add a new blog post I proceed as follows:

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

    $ cd _posts $ vim 2014-07-02-example-page.markdown

    $ cd _posts $ vim 2014-07-02-example-page.markdown

    Now we write the blog post in markdown, here’s an example file:

    Теперь мы пишем пост в блог на markdown, вот пример файла:

    --- layout: post title: "Post title" excerpt: "A nice post" date: 2014-07-02 10:00:00 --- Hello world, this is **markdown**.

    --- layout: post title: "Post title" excerpt: "A nice post" date: 2014-07-02 10:00:00 --- Hello world, this is **markdown**.

    Lets pop back out to console now. I could preview the changes in a local webserver with $ jekyll serve --watch (the watch switch refreshes any updated files as you write them). Now let’s just push it live:

    Вернёмся теперь обратно в консоль. Я мог бы предпросмотреть изменения на локальном веб-сервере с помощью $ jekyll serve --watch (ключ watch обновляет любые изменённые файлы по мере того, как вы их пишете). А теперь просто опубликуем это вживую:

    $ cd .. $ git add . $ git commit -m "new blog post" $ git push

    $ cd .. $ git add . $ git commit -m "new blog post" $ git push

    After the last command, Github will see that my repo has changed and automatically refreshes karpathy.github.io to point to the newly generated _site. My post is live!

    После последней команды Github увидит, что мой репозиторий изменился, и автоматически обновит karpathy.github.io, чтобы он указывал на заново сгенерированный _site. Мой пост опубликован!

    Anyway, that’s just a brief taste. Check out Jekyll and get blogging in a sane way!

    В общем, это лишь краткая проба на вкус. Загляните в Jekyll и начните вести блог здравым способом!