Как создать статический блог с коментариями на Hexo
кодинг2016 / 10 / 10

Как создать статический блог с коментариями на Hexo

Ave $USER!

Я уже писал о том как бесплатно захостить статический сайт на GitHub с Custom Domain и HTTPS.

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

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

Содержание:

  1. Почему статический сайт?
  2. Что же такое Hexo?
  3. Установка и настройка
  4. Первый пост

Почему статический сайт?

Здесь можно много спорить о статике и динамике, но существуют неоспоримые два преимущества статики перед динамикой:

  1. Скорость - даже кешированая динамическая страница грузится первый раз ( для кэша) медленнее. А закэшировав ее необходимо отслеживать ее консистентность, т.к. измененные данные, могут не отобразиться, т.к. не обновился кэш.
  2. Безопасность - для создания сайта используются различные готовые решения, такие как WordPress и зачастую содержат ошибки, которые открывают двери злоумышленникам. Не верите? Вбейте в гугл уязвимости wordpress. И это не говоря о уязвимостях самих языков программирования, таких как PHP, Ruby и прочие.

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

Что же такое Hexo?

Hexo - это фреймворк написанный на node js для генерации статических блогов, который поддерживает несколько языков разметки (в том числе Markdown), имеет множество плагинов и там оформления. Так же не составит труда создать свою тему с минимальными знаниями верстки. Всю информацию можно найти на официальном сайте HEXO

Установка и настройка

Для начала нам понадобится установить Node JS и npm, про установку, можно прочесть здесь Так же понадобиться аккаунт на Github с именем вашего блога, например my-cool-blog, в нем необходимо создать репозиторий my-cool-blog.github.io, где будет храниться наш сайт, подробнее можно прочесть здесь

После того как Node JS и npm установлены, необходимо установить HEXO, создадать проект и настроить его. Запускаем комндную строку и выполняем:

npm i -g hexo-cli
hexo init my-cool-blog
cd my-cool-blog
npm i

После недолгого ожидания у вас должна появится готовая директория с проектом.

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml - конфигурационный файл
  • scaffolds - директория с шаблонами страниц, поумолчанию используется post
  • source - исходные файлы вашего блога. Здесь можно хранить картинки, стили, скрипты. Файлы и директории начинающиеся с _ будут игнорироваться. В _posts будут лежать опубликованный контент, а в _drafts черновики
  • themes - темы оформления

Также в нее будет установлена тема оформлению поумолчанию landscape. Теперь добавим несколько очень нужных плагинов. Это sitemap.xml генератор, поддержка шаблонизатора jade (сейчас он называется pug) и препроцессор stylus:

npm i --save hexo-generator-seo-friendly-sitemap hexo-renderer-jade hexo-renderer-stylus

Все необходимые модули установлены, теперь приступим к конфигурации. Откроем _config.yml и добавим/изменим следующие строки:

sitemap:
    path: sitemap.xml # Путь к sitemap.xml

marked:
  gfm: true           # Поддержка markdown
  breaks: false       # Отключаем чувствительность к разрывам сстрок

skip_render:          # секция для игнорирования файлов в source директории
  - 'code/**/*'       # blob маска для игнорирования обработки файлов, я использую это для демок

new_post_name: :year/:month/:title.md   # каждый пост будет храниться по пути /год/месяц/название-поста.md

disqus_shortname: mycoolblog            # необходимо зарегистрироваться на disqus.com и получить свой ID

После открываем файл scaffolds/post.md и изменяем его содержимое на следующее

title: {{ title }}
description: {{ title }}
date: {{ date }}
keywords: []
categories: []
tags: []
comments: true

Первый пост

Теперь можно открыть окно командной строки и выполнить команду

hexo new my-first-cool-post

в результате выполнения будет сгенерирован файл поста и отображено сообщение

INFO  Created: d:\projects\my-cool-blog\source\_posts\year\month\my-first-cool-post.md

открываем файл в Markdown редакторе либо в онлайн редакторе вроде stackedit.io либо dillinger.io и редактируем

---
title: Мой первый мегапост
description: Это мой первый мегапост в моем статическом блоге на Hexo
date: 2016-10-10 20:22:45
keywords: [Блог]
categories: [Статья]
tags: [Блог, Hexo]
---

Всем привет!

Это мой первый пост в статическом блоге
<!-- More -->

Статика это круто!

Сохраняем наши изменения и выполняем команду

call hexo clean && call hexo server -l --config _config.yml

По умолчанию открыв адрес http://localhost:4000/ вы должны увидеть ваш первый пост