Категорії
Блоґерство

Створення сайту на платформі Hexo

Hexo — генератор статичних сайтів, написаний на JavaScript. Hexo дуже легко встановлюється й налаштовується і відзначається високою швидкістю генерації сторінок. Контент сайту створюється з використанням розмітки Markdown. Hexo зчитує інформацію з вихідних текстових файлів і створює на їхній основі готові HTML-сторінки.

Hexo підійде вам, якщо:

  • у вашого сайту не дуже багато сторінок,
  • ваш сайт не потребує частого оновлення,
  • вам подобається працювати з Markdown,
  • у вас немає потреби публікувати нові записи з різних комп’ютерів або зі смартфона,
  • вас не лякає робота з командним рядком (графічного інтерфейсу Hexo не має).

Статичні сайти менш вимогливі до параметрів хостингу, вони відрізняються високою швидкістю завантаження і високим ступенем безпеки. Мені працювати зі статичними сайтами подобається куди більше, ніж із сайтами на системах типу WordPress, які використовують бази даних. Свій блоґ я ще минулого року зробив статичним. Щоправда, для цього мені довелося написати свій генератор на PHP, оскільки інші генератори статичних сайтів мені з тих чи інших причин не підійшли, а Hexo, яким я користуюся зараз, я тоді чомусь пропустив.

Від власного генератора я відмовився з двох причин. По-перше, він працював не так швидко, як мені б хотілося, хоча сторінок у мого сайту не так уже багато. По-друге, його постійно треба було допрацьовувати: щось підправляти, додавати нові можливості, переробляти, аби працював саме так, як мені потрібно. Я, чесно кажучи, від цього втомився. Програмування — цікаве заняття, але це не для мене. Я краще зосереджуся на написанні нових текстів.

Отже, я вирішив використовувати готове рішення й зупинив свій вибір на Hexo. Hexo сподобався мені тим, що він дуже просто встановлюється та налаштовується, а також тим, що для для нього створено багато плагінів та тем оформлення. Також треба зазначити, що Hexo без проблем працює на Windows, на відміну від таких популярних генераторів, як Jekyll і Octopress, написаних на Ruby.

Встановлення

Hexo можна встановити на комп’ютер з операційною системою Windows, Linux або Mac OS. Для роботи Hexo потрібні:

Node.js
Git

В інсталяції цих компонентів немає нічого складного. Завантажте потрібні файли, запустіть їх і далі слідуйте підказкам.

Коли Node і Git інстальовані, можна приступати до встановлення Hexo. Для цього в командному рядку треба виконати такі команди:

$ hexo init /folder/
$ cd /folder/
$ npm install

де /folder/ — тека, у якій ви плануєте розмістити сайт.

Процес встановлення Hexo займає дві-три хвилини. Коли все готово, тека з Hexo буде мати такий вміст:

Призначення тек і файлів:

  • node_modules — тека з модулями Hexo,
  • public — тека для готових HTML-сторінок сайту,
  • source — вихідні файли сайту,
  • scaffolds — тека із шаблонами,
  • themes — тека для тем оформлення,
  • _config.yml — файл, у якому зберігаються налаштування сайту,
  • package.json — у цьому файлі зберігається інформація про встановлені плагіни та модулі.

Налаштування

Усі налаштування сайту зберігаються у файлі _config.yml. У ньому можна задати такі параметри, як заголовок сайту, коротке описання, вигляд постійних посилань, назву теми, параметри відображення сторінок архіву, рубрик та тегів, параметри RSS-стрічки, налаштування завантаження файлів на сервер та інші. Усі нюанси налаштування сайту детально описані в інструкції, я ж зупинюся на деяких основних моментах.

На сторінці Архів сайту можуть виводитися або всі записи (тільки посилання), або заголовки й короткі анонси із розбивкою по десять записів на сторінку. Для того, аби виводилися тільки посилання без анонсів, у файлі _config.yml треба вказати:

# Archives
archive: 1

Налаштування рубрик

Для того, щоби створити на сайті нову рубрику, до файлу _config.yml потрібно додати такі параметри: назву рубрики і URL. Наприклад, якщо ви хочете додати рубрику «Подорожі» з адресою /category/travel/, у _config.yml треба додати запис:

# Category & Tag
category_map:
 Подорожі: travel

Налаштування рубрик мого сайту має такий вигляд:

# Category & Tag
default_category: uncategorized
category_map:
 Книжки: books
 Мінімалізм: minimalism
 Творчість: creativity
 Інструменти: tools
 Фільми: films
 Музика: music
 Інтернет: internet

Теги задаються за тим самим принципом.

Якщо ви хочете додати одну публікацію до кількох рубрик, майте на увазі, що Hexo робить рубрики вкладеними. Тобто, якщо ви додасте публікацію, скажімо, до рубрик «Подорожі» і «Фото», ви вкажете такі параметри у вихідному файлі публікації:

categories: 
- Подорожі
- Фото

У файлі _config.yml параметри ваших рубрик матимуть такий вигляд:

# Category & Tag
category_map:
 Подорожі: travel
 Фото: photo

Але замість адрес /category/travel/ і /category/photo/, що було б логічним, Hexo створить /category/travel/ і /category/travel/photo/, тобто рубрика «Фото» стане підрубрикою рубрики «Подорожі».

Як додати RSS-стрічку

Для генерації RSS-стрічки Hexo потрібен плагін Feed generator. Щоби встановити його, потрібно виконати таку команду:

$ npm install hexo-generator-feed --save

Усі плагіни встановлюються до теки node_modules. У файлі _config.yml потрібно вказати налаштування стрічки (тип, шлях до файлу, кількість записів):

feed:
  type: atom
  path: atom.xml
  limit: 20

Створення сторінки «Помилка 404»

У теці source потрібно створити файл 404.md з таким вмістом:

Створення сторінки «Помилка 404»

Під час генерації сайту на основі цього файлу в теці public буде створена сторінка 404.html.

Теми

Дефолтною темою у Hexo є доволі примітивна light, яка навряд-чи когось задовольнить. Інші теми можна подивитися тут. Їх не дуже багато, але щось вибрати можна. Теку з новою темою треба помістити до теки themes, після чого у файлі _config.yml сайту вказати назву нової теми.

Тека з темою має свій файл _config.yml, у якому задаються налаштування теми. Кожна тема може мати свої власні параметри. Зазвичай у файлі _config.yml теми вказуються налаштування для виведення меню сайту, код Google Analytics, налаштування коментарів. Для додавання коментарів у Hexo використовується сервіс Disqus.

Якщо хочете, ви можете створити свою власну тему для Hexo. У документації детально описаний принцип роботи шаблонів, у якому не так уже і складно розібратися. Я для свого сайту не став створювати тему з нуля, а скористався темою Hyde для Jekyll, яку трохи змінив.

Створення нової публікації

Для створення нової публікації в командному рядку потрібно виконати команду:

$ hexo new post new-article

де new-article — URL нової публікації. У теці /source/_posts/ з’явиться файл new-article.md такого змісту:

Створення нової публікації

У цьому файлі треба вказати заголовок публікації, назву рубрики й додати сам текст у форматі Markdown. Заголовок краще вказувати в лапках, це допоможе уникнути помилок під час генерації сайту у разі, якщо в заголовку буде двокрапка.

Створення нової публікації

Для довгих записів до тексту можна додати тег <!-- more -->, тоді на головній сторінці буде виводитися не весь текст, а тільки заголовок і анонс.

Нову публікацію можна створити й без використання командного рядку. Для цього потрібно створити в текстовому редакторі файл із розміткою, як вказано вище, і зберегти його в папці /source/_posts/.

Ілюстрації

Ілюстрації в Hexo зберігаються в теці /source/images/ сайту. Щоби додати в текст ілюстрацію, у потрібному місці публікації потрібно вставити такий код:

![Це моє класнюче фото](/images/photo.jpg)

де у квадратних лапках вказано параметр alt, а photo.jpg — ім’я файлу, який додається.

Під час генерації сайту тека /images/ разом у всім її змістом буде скопійована до теки /public/.

У деяких темах Hexo є плагін Fancybox, який дає змогу створювати галереї зображень.

Вбудований сервер

Аби переглянути, який вигляд має сайт після додавання нового контенту, не обов’язково виконувати генерацію сторінок сайту. Для цього в Hexo є вбудований сервер, який запускається такою командою:

$ hexo server

Сайт буде доступний за адресою http://localhost:4000. Якщо потрібно, можна внести виправлення у вихідні файли сайту й перезавантажити сторінку в браузері, щоби переглянути зміни.

Якщо все влаштовує, можна переходити до генерації сторінок сайту.

Генерація

Генерація сайту виконується такою командою:

$ hexo generate

Після виконання команди в папці /public/ будуть створені всі потрібні файли сайту, які тепер можна завантажувати на сервер.

Завантаження файлів на сервер

Завантажити готові файли на сервер можна за допомогою командного рядку. Hexo має п’ять плагінів для різних типів завантаження: Git, Heroku, Rsync, OpenShift, FTPSync. Після встановлення й налаштування плагін запускається командою:

$ hexo deploy

Я встановлював плагін FTPSync, але мені поки ще не вдалося його правильно налаштувати. Під час спроби з’єднатися із сервером плагін видає повідомлення про помилку, причину якої я ще не з’ясував. Тому зараз для завантаження файлів свого блогу я використовую звичайний FTP-менеджер.

Мої враження від Hexo

Плагін FTPSync, який не працює як треба, — єдина проблема, з якою я зіткнувся під час використання Hexo. Можливо, проблема не в самому плагіні, а в тому, що я так і не розібрався до кінця, як його правильно налаштувати.

Сінтаксис у Hexo не дуже складний. Я без проблем переніс на Hexo тему Hyde, написану для Jekyll, і все налаштував потрібним чином.

З моєю кількістю сторінок сайт генерується майже миттєво й без помилок. Усі параметри сайту легко налаштовуються і змінюються за необхідності.

Тож поки що я цілком задоволений Hexo. Як на мене, це один із найзручніших у використанні генераторів статичних сайтів. Мені він здається більш гнучким, функціональним і простим у налаштуванні, ніж інші варіанти.