Всички статични генератори на страници имат една и на пръв поглед ясна задача: да създадат статичен HTML файл и всички негови активи.

Има много очевидни предимства при обслужването на статичен HTML файл, като по-лесно кеширане, по-бързо време за зареждане и по-сигурна среда като цяло. Всеки генератор на статични страници произвежда HTML изхода по различен начин.

Целта на тази публикация обаче не е да се потопите и обсъдите тънкостите на техния механизъм, а да сравните набора от функции, който всяка рамка предлага, и да подчертае уникалните аспекти и характеристики на всяка рамка.

Преглед на популярните рамки за статични страници

В тази публикация ще разгледаме по-отблизо следните статични рамки на страницата: Джекил , Middleman , Хюго , и Хексо . Това в никакъв случай не са единствените генератори там, но те са най-често използваните, подкрепени от големи общности и много полезни ресурси.

Нека да разгледаме по-отблизо всеки от тях и да сравним основните им характеристики:

• Джекил
  • написано на Руби,
  • поддържа механизма за шаблони Liquid извън кутията;
• Middleman
  • написано на Руби,
  • поддържа ERB и шаблонни двигатели на Haml от кутията;
• Хюго
  • написано в Go,
  • поддържа Go шаблонния механизъм от кутията;
• Хексо
  • написано на JavaScript,
  • поддържа EJS и Pug от кутията.

Свързани: Обратният край: Използване на Gatsby.js и Node.js за статични актуализации на сайта

Забележка: Струва си да се отбележи, че всеки от тези генератори на статични страници може да бъде персонализиран и разширен с помощта на приставки и разширения, което ви позволява да покриете повечето или всичките си нужди.

Настройване на генератори на статични сайтове

Документацията за всяка от тези рамки е изчерпателна и не по-малка от отлична и можете да я вземете тук:

Документация на Jekyll

Документация на Middleman

Документация на Hugo

Документация на Hexo

Ако просто следвате ръководствата за инсталиране, трябва да подготвите средата за разработка в рамките на няколко минути. Веднъж инсталиран, можете да стартирате нов проект, като стартирате команди от терминала.

Например, по този начин стартирате нов проект в различни рамки:

asp net web api урок

Джекил

jekyll new my_website

Middleman

middleman init my_website

Хюго

hugo new my_website

Хексо

hexo init my_website

Конфигурация

Конфигурацията обикновено се съхранява в един файл. Всеки статичен генератор на уебсайтове има своите специфики, но много настройки са еднакви и за четирите.

Можете да посочите къде се съхраняват изходните файлове или къде да се извеждат вградени източници. Винаги е полезно да пропуснете данни, които няма да бъдат използвани в процеса на изграждане, като зададете изключване или skip_render опция. Можете също да използвате конфигурационния файл за съхраняване на глобални настройки като заглавие на проекта или автора.

Мигриране към статичен генератор

Ако вече имате Проект на Wordpress готов за работа, можете да го мигрирате към статичен генератор на страници с относителна лекота.

За Джекил бихте могли Износител на Jekyll плъгин. За Middleman можете да използвате инструмента за команден ред, наречен wp2middleman . Можеш да използваш Wordpress към Hugo Exporter за миграцията на Hugo и за Hexo можете да прочетете нашата ръководство за мигриране от Wordpress към Hexo че написах миналата година.

Принципът е почти идентичен и съвсем ясен - първо експортирайте цялото съдържание в подходящ формат и след това го включете в правилната папка.

Съдържание

Използване на статични генератори на страници Маркдаун за основното съдържание. Markdown е мощен и човек може да го научи бързо. Писането на съдържание в Markdown се чувства естествено поради простия си синтаксис. Документът изглежда изчистен и организиран.

Трябва да поставите статии в папка, посочена в глобалния конфигурационен файл. Имената на статиите трябва да следват конвенцията, посочена от генератора.

В Jekyll трябва да поставите статия в _posts директория. Името на статията трябва да има следния формат: ГОД-МЕСЕЦ-ДЕН-заглавие. Други генератори имат подобни правила и те предоставят команда за създаване на нова статия.

Ето командите за създаване на нова статия в Middleman, Hugo и Hexo:

Middleman

middleman article my_article

Хюго

hugo new posts/my_article.md

Хексо

hexo new post my_article

В Markdown вие сте ограничени до определен набор от синтаксис. За наш късмет всички генератори могат да обработват и суров HTML. Например, ако искате да добавите котва с определен клас, можете да го добавите както в обикновен HTML файл:

This is a text with a link .

Предна материя

Лицевата част е блок с данни върху файла Markdown. Можете да зададете персонализирани променливи, за да съхранявате данните, които са ви необходими, за да създадете по-добро съдържание. Вместо да пишете HTML в Markdown, което може да доведе до претрупана и грозна структура на документа, можете да дефинирате променлива в предната част.

Например, по този начин можете да добавите тагове към статията си.

tags: - web - dev - featured

Шаблони в генератори на статични страници

Статичните генератори на страници използват език за шаблони за обработка на шаблони. За да вмъкнете данни в шаблон, трябва да използвате тагове. Например, за да покажете заглавието на страницата в Jekyll, можете да напишете:

{{ page.title }}

Нека се опитаме да покажем списък с маркери от предната тема в нашата публикация в Джекил. Трябва да проверите дали е налична променлива. След това трябва да прегледате етикетите и да ги покажете в неподреден списък.

{%- if page.tags -%}

{%- for tag in page.tags -%}
• {{ tag }}
{%- endfor -%}

{%- endif -%}

Middleman:

Хюго:

{{ if .Params.Tags }}

{{ range .Params.Tags }}
• {{ . }}
{{ end }}

{{ end }}

Hexo:

Забележка: Добра практика е да проверите дали съществува променлива, за да предотвратите неуспех на процеса на компилация. Това може да ви спести часове за отстраняване на грешки и тестване.

Използване на променливи

Статичният генератор на страници предоставя глобални променливи, налични за предаване на шаблони. Различният тип променлива съдържа различна информация. Например глобален променлив сайт в Hexo съдържа информация за публикации, страници, категории и тагове на даден сайт.

Познаването на наличните променливи и как да ги използвате може да улесни живота на програмиста. Hugo използва библиотеките с шаблони на Go за шаблониране. Работата с променливи в Hugo може да представлява проблем, ако не сте запознати контекстът или „точката“, както го наричат.

Middleman няма глобални променливи. Можете обаче да включите посредник-блог разширение, което би ви позволило да получите достъп до някои променливи, като списък със статии. Ако искате да добавите глобални променливи, можете да направите това, като извлечете данни във файлове с данни.

Файлове с данни

Когато искате да съхранявате данни, които не са налични във файловете Markdown, трябва да използвате файлове с данни. Например, ако трябва да запазите списъка с вашите социални връзки, които искате да покажете в долния колонтитул на вашия сайт. Всички статични генератори на страници поддържат YAML и JSON файлове. Освен това Jekyll поддържа CSV файлове, а Hugo поддържа TOML файлове.

Нека съхраним тези социални връзки в нашия файл с данни. Тъй като всички генератори поддържат YAML формат, нека запазим данните във файла social.yml:

- name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll съхранява файлове с данни в _data директория по подразбиране. Middleman и Hugo използват директория с данни, а Hexo използва source/_data directory.

За да изведете данните, можете да използвате следния код:

Джекил

{%- if site.data.social -%}

{% for social in site.data.social %}
• {{ social.name }}
{%- endfor -%}

{%- endif -%}

Middleman

Хюго

{{ if $.Site.Data.social }}

{{ range $.Site.Data.social }}
• {{ .name }}
{{ end }}

{{ end }}

Хексо

Помощници

Шаблоните често поддържат филтриране на данни. Например, ако искате да направите заглавната буква главна, можете да го направите по следния начин:

{ page.title }

Middleman има подобен синтаксис:

Hugo използва следната команда:

{ upper }

Hexo има различен синтаксис, но резултатът е един и същ.

Как генераторите на статични страници боравят с активи

Управлението на активи се обработва по различен начин в статичните генератори на страници. Jekyll компилира файлове с активи, където и да са поставени. Middleman обработва само активи, съхранени в папката източник. Местоположението по подразбиране за активи в Hugo е директория за активи. Hexo предлага да се поставят активи в глобалната директория на източници.

SASS

Jekyll поддържа Sass извън кутията, но трябва да следвате някои правила . Middleman също поддържа Сас извън кутията. Уго компилира Сас Hugo Pipes за Sass . Hexo го прави чрез плъгин .

ES6

Ако искате да използвате съвременни JavaScript функции на es6, трябва да инсталирате приставка. Възможно е да има повече от една версия на подобна приставка, така че може да искате да проверите кода или да видите отворени проблеми или последен ангажимент за намиране на най-добрия.

Изображения

Оптимизацията на изображението също не се поддържа по подразбиране. Също така, подобно на приставки es6, има повече от един плъгин за оптимизиране на изображения. Направете домашното си и се опитайте да намерите най-добрия плъгин за работата. Като алтернатива можете да използвате решение на трета страна. В моето Блог това е компилация с Hexo, използвам облачен безплатен план. Разработих a облачен маркер и предоставям отзивчиви и оптимизирани изображения чрез облачни трансформации.

Приставки, разширения

Статичните генератори на страници имат мощни библиотеки, които ви позволяват да персонализирате уебсайта си. Всеки плъгин има различна цел. Можете да намерите широка гама от приставки, от LiveReload за по-добра среда за разработка до генериране на Sitemap или RSS емисия.

Можете да напишете нов плъгин или разширение. Преди да го направите, проверете дали съществува подобен плъгин. Вижте Списък с приставки на Jekyll , Разширения на Middleman , и Hexo плъгини . Hugo няма приставки или разширения. Той обаче поддържа потребителски шорткодове.

Шорткодове в Markdown

Шорткодовете са кодови фрагменти, които можете да поставите в документите Markdown. Тези фрагменти извеждат HTML код. Hugo и Hexo поддържат шорткодове. Има вградени къси кодове, като фигурата в Hugo:

{{}}

Hexo youtube шорткод:

{% youtube video_id %}

Ако не можете да намерите подходящ шорткод, можете да създадете нов. Например, Hexo не поддържа вграждане на CanIUse и аз разработих нов таг който поддържа вграждане на CanIUse. Не забравяйте да публикувате приставката си в npm или на официалния сайт на генератор. Общността ще бъде благодарна, ако го направите.

CMS

Статичните генератори на страници могат да бъдат режийни за нетехническо лице. Да се ​​научиш как да използваш команди или Markdown не е нещо, което е лесно за всички. В този случай потребителят може да се възползва от Система за управление на съдържанието за сайтове JAMstack . В този списък можете да намерите система, която най-добре отговаря на вашите нужди. Знайте, че отнема известно време за конфигуриране на CMS, но дългосрочно вие и други потребители биха могли да се възползват от публикуването на съдържание по-ефективно.

Бонус: JAMstack шаблони

Ако не искате да отделяте твърде много време за конфигуриране на вашия проект, можете да се възползвате JAMstack шаблони . Някои от тези шаблони вече са предварително конфигурирани с CMS, което може да ви спести много време.

Можете също така да научите много, като разгледате кода. Опитайте се да инсталирате шаблон, сравнете го с други и изберете най-добрия за вас.

Обобщавайки

Статичните генератори на страници са бърз и надежден начин за изграждане на уебсайт. В днешно време можете дори да създавате нетривиални и силно персонализирани уебсайтове с генератор.

Например, Smashing Magazine миналата година се преместиха в JAMstack и те успяха да ускорят значително сайта си. Има и други успешни примери за статични уебсайтове и всички те споделят един и същ принцип - да създават статични ресурси и да ги доставят през мрежи за доставка на съдържание за по-бързо зареждане и превъзходно потребителско изживяване.

Има много повече неща, които можете да направите със статичния си уебсайт: от използване на Wordpress REST API като бекенд до използване на Lambda функции. Има отлични решения дори за прости уебсайтове, като например използването HTTPS от кутията или обработка на подадени формуляри .

Надявам се този преглед на статичните рамки на страници да ви е помогнал да реализирате техния потенциал и да обмислите използването им следващия път, когато мислите за нов проект.

Свързани: Клиентска срещу сървърна срещу Представяне за уеб приложения

Разбиране на основите

Какво е статична уеб страница?

Статичната уеб страница се състои от фиксирано съдържание, кодирано в HTML. Той доставя абсолютно същия HTML на всеки потребител. Това отсъствие на автоматизирано генериране прави статичните страници изключително бързи.

Какво е динамична уеб страница?

Динамичната уеб страница разчита на сървъри за динамично изграждане на всяка страница, когато потребителят поиска достъп до нея. Това позволява на страницата да показва различно съдържание при всяко гледане.

Каква е разликата между статичните и динамичните уебсайтове?

За разлика от статичната уеб страница, динамичната страница разчита на скриптове от страна на сървъра. Това позволява по-голяма степен на гъвкавост и по-лесно управление на съдържанието. Статичните страници са по-бързи, по-надеждни и изискват много по-малко ресурси.

Какво е статичен генератор на сайтове?

Статичният генератор на сайтове (понякога съкратен SSG) създава статична HTML страница, използвайки изходни файлове, като по този начин позволява хибриден подход. На теория това означава, че можете да се възползвате от някои предимства на статичните страници, без да се отказвате от практичността на CMS.