Phenquestions
Цей підручник покаже вам, як ви можете створити простий блог за допомогою статичного генератора веб-сайтів, який є дуже швидким і простим у використанні.
Що таке SSG?
SSG або Static Site Generator - це веб-програма, яка перетворює динамічний вміст на веб-сторінці в статичний вміст, який зазвичай зберігається локально. Статичні генератори веб-сайтів не вимагають баз даних і серверних систем, тим самим усуваючи необхідність навчитися кодувати. В основному він зосереджений на написанні та поданні змісту.
SSG проти. CMS
Найпопулярнішим способом створення веб-сайтів та управління вмістом є використання CMS або систем управління вмістом, таких як WordPress, Drupal, Joomla тощо.
Системи управління вмістом працюють шляхом створення та управління вмістом безпосередньо за допомогою інтерактивного інтерфейсу. Оскільки дані в CMS отримуються з бази даних, CMS працюють дуже повільно, оскільки вміст отримується та подається як динамічний вміст. Системи управління вмістом також схильні до вразливостей у системі безпеки, оскільки вони покладаються на зовнішні плагіни, написані іншими розробниками для збільшення функціональності.
З іншого боку, статичні генератори веб-сайтів працюють, створюючи вміст поза мережею, наприклад текстові редактори, і надає остаточний вигляд сторінки після публікації. Оскільки вміст здійснюється локально, без потреби в базі даних, сторінка відображається швидше, а швидкість завантаження неймовірно висока.
Статичні генератори веб-сайтів виготовляються із заздалегідь скомпільованого коду, який діє як механізм рендерингу опублікованого вмісту.
Як створити статичний блог за допомогою Hexo
Одним з популярних варіантів побудови статичного сайту є Hexo.
Hexo - це простий, швидкий і потужний додаток SSG, написаний на NodeJS. Незважаючи на те, що існують інші варіанти побудови статичного веб-сайту, Hexo дозволяє налаштувати ваш сайт та інтегрувати різні інструменти.
Давайте розглянемо, як ми можемо створити простий статичний сайт за допомогою Hexo.
Встановлення Hexo
Перш ніж ми зможемо створити сайт, нам потрібно встановити вимоги hexo та встановити його. Для цього нам потрібні NodeJS та git.
Почніть з оновлення системи:
sudo apt-get updatesudo apt-get upgrade
Після оновлення системи встановіть git
sudo apt-get install gitДалі встановіть nodejs з nodesource за допомогою команди:
curl -sL https: // deb.вузловий джерело.com / setup_14.х | судо -Е баш -apt-get install -y nodejs
Після встановлення Nodejs ми можемо перейти до встановлення hexo за допомогою команди:
npm встановити -g hexo-cliРобота з Hexo
Після встановлення hexo ви можете створити сайт та опублікувати вміст. Давайте розглянемо, як працювати з Hexo. Майте на увазі, що це швидкий, простий посібник. Щоб дізнатися більше, зверніться до документації.
Створення сайту
Щоб створити новий сайт hexo, використовуйте команду нижче:
hexo init HexoSitecd HexoSite
npm встановити
Розуміння структури каталогу Hexo
Після того, як ви ініціалізуєте новий сайт Hexo, ви отримаєте структуру каталогів, наприклад, наведену нижче:
-rw-r - r-- 1 cs cs 0 8 лютого 20:51 _config.краєвид.yml-rw-r - r-- 1 cs cs 2439 8 лютого 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 лютого 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8 лютого 20:51 пакет.json
-rw-r - r-- 1 cs cs 56716 8 лютого 20:51 пакет-замок.json drwxr-xr-x 1 cs cs 4096 8 лютого 20:51 ліси drwxr-xr-x 1 cs cs 4096 8 лютого 20:51 джерело drwxr-xr-x 1 cs cs 4096 8 лютого 20:51 теми
Перший файл - це _config.yml містить усі налаштування вашого сайту. Переконайтеся, що ви змінили його перед розгортанням вашого сайту, оскільки він буде містити значення за замовчуванням.
Наступний файл - пакет.json, що містить дані та конфігурації програми NodeJS. Тут ви знайдете встановлені пакети та їх версії.
Ви можете дізнатись більше про пакет.json зі сторінки ресурсу нижче:
https: // docs.npmjs.com / cli / v6 / configuring-npm / package-json
Створення блогу
Щоб створити простий блог у hexo, скористайтеся командою:
hexo новий щоденник “Hello World Blog”Після створення ви можете подати файл розмітки в каталог / source / _posts. Для написання вмісту вам потрібно буде використовувати мову розмітки Markdown.
Створення нової сторінки
Створити сторінку в Hexo просто; використовуйте команду:
hexo нова сторінка “Сторінка-2”Джерело сторінки знаходиться в / source / Page-2 / index.md
Генерування та обслуговування вмісту
Після того, як ви опублікуєте свій вміст на hexo, вам потрібно буде запустити програму для створення статичного вмісту.
Використовуйте наведені нижче команди:
$ hexo генеруватиINFO Перевірка конфігурації
ІНФОРМАЦІЯ Почати обробку
INFO Файли завантажені за 966 мс
Створено ІНФО: архіви / покажчик.html
Сформовано ІНФО: Сторінка-2 / індекс.html
INFO Створено: archives / 2021 / index.html
INFO Створено: індекс.html
INFO Створено: archives / 2021/02 / index.html
ІНФОРМАЦІЯ Створено: js / script.js
ІНФОРМАЦІЯ Створена: fancybox / jquery.fancybox.хв.css
INFO Створено: 2021/02/08 / Hello-World-Post / index.html
Сформовано ІНФО: css / style.css
ІНФОРМАЦІЯ Створена: 2021/02/08 / hello-world / index.html
ІНФОРМАЦІЯ Створена: css / fonts / FontAwesome.otf
ІНФОРМАЦІЯ Створена: css / fonts / fontawesome-webfont.woff
ІНФОРМАЦІЯ Створена: css / fonts / fontawesome-webfont.еот
ІНФОРМАЦІЯ Створена: fancybox / jquery.fancybox.хв.js
ІНФОРМАЦІЯ Створена: css / fonts / fontawesome-webfont.woff2
ІНФОРМАЦІЯ Створена: js / jquery-3.4.1.хв.js
ІНФОРМАЦІЯ Створена: css / fonts / fontawesome-webfont.ttf
Сформовано ІНФО: css / images / banner.jpg
ІНФОРМАЦІЯ Створена: css / fonts / fontawesome-webfont.svg
INFO 19 файлів, створених у 2.08 с
Для обслуговування програми виконайте команду:
$ hexo server INFO Перевірка конфігурації INFO Почати обробку INFO Hexo працює на http: // localhost: 4000 . Натисніть Ctrl + C, щоб зупинити.Висновок
Цей швидкий і простий вступ показав вам, як користуватися статичним сайтом Hexo. Якщо вам потрібна додаткова інформація про те, як працювати з Hexo, зверніться до основної документації, представленої нижче:
https: // hexo.io / docs
