Phenquestions
Този урок ще ви покаже как можете да създадете прост блог, използвайки статичен генератор на сайтове, който е много бърз и лесен за използване.
Какво е SSG?
SSG или Static Site Generator е уеб приложение, което преобразува динамичното съдържание на уеб страница в статично съдържание, обикновено съхранявано локално. Статичните генератори на сайтове не изискват бази данни и бекендове, като по този начин елиминират необходимостта да се научат как да кодират. Основно се фокусира върху писането и представянето на съдържанието.
SSG срещу. CMS
Най-популярният начин за създаване на уебсайтове и управление на съдържание е използването на CMS или системи за управление на съдържанието като WordPress, Drupal, Joomla и др.
CMS системите работят чрез създаване и управление на съдържание директно с помощта на интерактивен интерфейс. Тъй като данните в CMS се извличат от базата данни, CMS са много бавни, тъй като съдържанието се извлича и обслужва като динамично съдържание. CMS системите също са склонни към уязвимости в сигурността, тъй като разчитат на външни приставки, написани от други разработчици, за да увеличат функционалността.
От друга страна, генераторите на статични сайтове работят чрез създаване на офлайн носители на съдържание, като текстови редактори и визуализират крайния изглед на страница при публикуване. Тъй като съдържанието се визуализира локално, без нужда от база данни, страницата се изобразява по-бързо и скоростите на зареждане са невероятно бързи.
Статичните генератори на сайтове са направени от предварително компилиран код, който действа като механизъм за изобразяване на публикуваното съдържание.
Как да изградим статичен блог с Hexo
Един от популярните избори за изграждане на статичен сайт е Hexo.
Hexo е просто, бързо и мощно SSG приложение, написано в NodeJS. Въпреки че има други възможности за изграждане на статичен сайт, Hexo ви позволява да персонализирате вашия сайт и да интегрирате различни инструменти.
Нека разгледаме как можем да създадем прост статичен сайт с Hexo.
Инсталиране на Hexo
Преди да можем да изградим сайт, трябва да зададем hexo изисквания и да го инсталираме. За това са ни необходими NodeJS и git.
Започнете с актуализиране на вашата система:
sudo apt-get updatesudo apt-get ъпгрейд
След като актуализирате системата си, инсталирайте git
sudo apt-get install gitСлед това инсталирайте nodejs от nodesource, като използвате командата:
curl -sL https: // deb.възлов източник.com / setup_14.x | sudo -E баш -apt-get install -y nodejs
След като инсталирате Nodejs, можем да продължим да инсталираме hexo с помощта на командата:
npm инсталирайте -g hexo-cliРабота с Hexo
След като инсталирате hexo, можете да създадете сайт и да публикувате съдържание. Нека разгледаме как да работим с Hexo. Имайте предвид, че това е бързо и просто ръководство. Вижте документацията, за да научите повече.
Създаване на сайт
За да създадете нов hexo сайт, използвайте командата по-долу:
hexo init HexoSitecd HexoSite
npm инсталиране
Разбиране на структурата на Hexo Directory
След като инициализирате нов 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 Проверка на конфигурацията
ИНФОРМАЦИЯ Започнете обработка
ИНФО Файлове, заредени за 966 ms
ИНФОРМИРАНО: архиви / индекс.html
ИНФОРМИРАНО: Страница-2 / индекс.html
ИНФОРМИРАНО: архиви / 2021 / индекс.html
ИНФОРМИРАНО: индекс.html
ИНФОРМИРАНО: архиви / 2021/02 / индекс.html
ИНФОРМИРАНО: js / скрипт.js
ИНФОРМИРАНО: fancybox / jquery.fancybox.мин.css
ИНФОРМИРАНО: 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.eot
ИНФОРМИРАНО: 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 сървър INFO Проверка на конфигурацията INFO Стартиране на обработката INFO Hexo работи на http: // localhost: 4000 . Натиснете Ctrl + C, за да спрете.Заключение
Това бързо и просто въведение ви показа как да използвате статичния сайт Hexo. Ако имате нужда от повече информация за това как да работите с Hexo, моля, вижте основната документация, предоставена по-долу:
https: // hexo.io / docs
