Phenquestions
Из этого туториала Вы узнаете, как создать простой блог с помощью генератора статических сайтов, который очень быстр и прост в использовании.
Что такое SSG?
SSG или Static Site Generator - это веб-приложение, которое преобразует динамический контент на веб-странице в статический контент, который обычно хранится локально. Генераторам статических сайтов не требуются базы данных и серверные части, что избавляет от необходимости учиться программировать. В основном он фокусируется на написании и представлении контента.
SSG против. CMS
Самый популярный способ создания веб-сайтов и управления контентом - использование CMS или систем управления контентом, таких как WordPress, Drupal, Joomla и т. Д.
Системы CMS работают, создавая контент и управляя им напрямую с помощью интерактивного интерфейса. Поскольку данные в CMS извлекаются из базы данных, CMS работают очень медленно, поскольку контент извлекается и обслуживается как динамический контент. Системы CMS также подвержены уязвимостям безопасности, поскольку они полагаются на внешние плагины, написанные другими разработчиками, для увеличения функциональности.
С другой стороны, генераторы статических сайтов работают, создавая автономные носители контента, такие как текстовые редакторы, и визуализируют окончательный вид страницы после публикации. Поскольку контент отображается локально, без необходимости в базе данных, страница отображается быстрее, а скорость загрузки невероятно высока.
Генераторы статических сайтов состоят из предварительно скомпилированного кода, который действует как движок для рендеринга опубликованного контента.
Как создать статический блог с помощью Hexo
Один из популярных вариантов создания статического сайта - Hexo.
Hexo - это простое, быстрое и мощное приложение SSG, написанное на NodeJS. Хотя есть и другие варианты создания статического сайта, Hexo позволяет настраивать ваш сайт и интегрировать различные инструменты.
Давайте посмотрим, как мы можем создать простой статический сайт с помощью Hexo.
Установка Hexo
Прежде чем мы сможем создать сайт, нам нужно настроить шестнадцатеричные требования и установить его. Для этого нам потребуются NodeJS и git.
Начните с обновления вашей системы:
sudo apt-get updatesudo apt-get upgrade
Как только ваша система обновится, установите git
sudo apt-get install gitЗатем установите nodejs из nodeource с помощью команды:
завиток -sL https: // deb.Узелисточник.ru / setup_14.х | sudo -E bash -apt-get install -y nodejs
После того, как вы установили Nodejs, мы можем приступить к установке hexo с помощью команды:
npm install -g hexo-cliРабота с Hexo
После того, как вы установили hexo, вы можете создать сайт и публиковать контент. Давайте посмотрим, как работать с Hexo. Имейте в виду, что это быстрое и простое руководство. Обратитесь к документации, чтобы узнать больше.
Создание сайта
Чтобы создать новый шестнадцатеричный сайт, используйте команду ниже:
hexo init HexoSitecd HexoSite
npm install
Понимание структуры 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: // документы.npmjs.com / cli / v6 / настройка-нпм / пакет-json
Создание блога
Чтобы создать простой блог в hexo, используйте команду:
новый блог hexo «Hello World Blog»После создания вы можете сохранить файл уценки в каталоге / source / _posts. Вам нужно будет использовать язык разметки Markdown для написания контента.
Создание новой страницы
Создать страницу в Hexo просто; используйте команду:
hexo новая страница «Страница-2»Источник страницы находится в / source / Page-2 / index.мкр
Создание и обслуживание контента
Как только вы опубликуете свой контент в hexo, вам нужно будет запустить приложение для генерации статического контента.
Используйте команды ниже:
$ hexo генерироватьИНФОРМАЦИЯ Проверка конфигурации
ИНФОРМАЦИЯ Начать обработку
INFO Файлы загружаются за 966 мс
ИНФОРМАЦИЯ Сгенерирована: архивы / индекс.html
ИНФОРМАЦИЯ Сгенерирована: Страница-2 / индекс.html
ИНФОРМАЦИЯ Сгенерирована: архивы / 2021 / index.html
ИНФОРМАЦИЯ Сгенерирована: индекс.html
ИНФОРМАЦИЯ Сгенерирована: архивы / 2021/02 / index.html
ИНФОРМАЦИЯ Сгенерирована: js / script.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
ИНФОРМАЦИЯ 19 файлов, созданных за 2.08 с
Для обслуживания приложения выполните команду:
$ hexo server INFO Проверка конфигурации INFO Начать обработку INFO Hexo работает по адресу http: // localhost: 4000 . Нажмите Ctrl + C, чтобы остановить.Заключение
Это быстрое и простое введение показало вам, как пользоваться статическим сайтом Hexo. Если вам нужна дополнительная информация о том, как работать с Hexo, обратитесь к основной документации, представленной ниже:
https: // гексо.io / docs
