10 най-добри генератора на статични сайтове
Повечето сайтове, които посещавате в мрежата, вероятно се генерират динамично. Тоест, вместо цялото им съдържание да се кодира в HTML, съхранявано на сървъра, те извличат съдържание от база данни и конструират страници, които да ви се предоставят в движение.
Много от тях също осигуряват потребителска интерактивност чрез входни данни, формуляри и т.н. Помислете за Facebook за пример и за двете неща. За да изградите сами този тип функционалност, можете да се обърнете към CMS като WordPress.
За някои случаи на употреба обаче това е прекалено много. Простите страници, като личен профил, информация за бизнес или дори блог, наистина не се нуждаят от този вид режийни или сложност. Можете, разбира се, просто да изградите статичен HTML сами в a текстов редактор . И наистина преди много години така се изграждаха всички сайтове, но това бързо става тромаво за поддържане, когато искате да увеличите или промените. Статичните генератори на сайтове предлагат решение на това, като ви позволяват да изграждате статични HTML страници с помощта на шаблони.
По същество генераторите на статични сайтове са инструменти на командния ред, които изместват създаването на крайната HTML страница напред от точката, която потребителят я изисква, до точката, в която пишете съдържанието. Когато правите актуализация, изграждате новата страница, която след това може да бъде предоставена както е на всеки потребител, който я поиска.
Това предлага няколко предимства. Ефективността ще бъде значително подобрена в сравнение с динамичния сайт, тъй като обслужването на статични HTML и CSS има много нисък отпечатък. Настройката ви от страна на сървъра ще бъде много по-опростена, което също означава по-малко грижи за сигурността. И обратно, обаче ще загубите възможността да предоставяте съдържание в реално време или да получавате потребителски данни.
Статичните генератори на сайтове нараснаха популярността си през последните години, така че навигацията в широкия избор може да бъде трудна. Тук разгледахме някои от най-добрите варианти, които трябва да обмислите.
01. Джекил
Пуснат за първи път през 2008 г. от Том Престън-Вернер, съосновател на GitHub, Jekyll може би популяризира концепцията за статични сайтове и остава вероятно най-широко използваният генератор на статични сайтове. С Jekyll обикновено ще работите със съдържание в Markdown, лек език за маркиране, предназначен за форматиране на текст.
Двигателят за шаблони Liquid се използва за поставяне на това съдържание на Markdown в HTML шаблон и за комбиниране на шаблони, представляващи различни части на страница (да речем, заглавие, долен колонтитул и съдържание) по модулен и многократно използван начин.
Поддръжката за Sass е вградена за тези, които предпочитат предварителната обработка на CSS и ще играе добре с библиотеки като Bootstrap. Също така с Jekyll е включен HTTP сървър, който може да се използва за лесно разполагане и тестване на статичните ви страници локално.
Една от ключовите точки за продажба на Jekyll е широката гама от „вносители“, които позволяват на съществуващ сайт да бъде мигриран към Jekyll с относителна лекота. Ако например имате сайт на WordPress, можете да преминете към използване на Jekyll, като използвате един от вносителите. Също така е тривиално да конвертирате съществуващите статични HTML сайтове в Jekyll, което може да бъде чудесно, ако сами сте кодирали статичен HTML или сте видели шаблон, който ви харесва.
Забележително е, че Jekyll се използва за захранване на GitHub страници, статична услуга за хостинг на сайтове, която се предоставя с GitHub. Ако имате хранилище на GitHub, можете да създадете безплатен сайт на страници на GitHub, като използвате Jekyll. Това може да бъде удобен начин за придаване на полирана целева страница на вашия проект GitHub.
Големият недостатък на Jekyll - и това се отнася за повечето генератори - е, че в началото може да изглежда сложен и е нова технология за усвояване. Може да не работите толкова бързо, колкото със CMS. Това обаче е много добре документирано и кривата на обучение бързо се преодолява.
02. Хексо
Hexo се захранва от Node.js и насочени към блогове. Въпреки че внедряването на JavaScript на теория не би трябвало да прави прекалено голямо значение за начина, по който работите с него, тъй като ще използвате езици за маркиране и шаблониране, това може да направи инсталацията и конфигурацията по-познати за разработчиците на JavaScript. Ако вече използвате npm и git, тогава е много лесно да стартирате и да стартирате.
Подобно на много други генератори с общо предназначение, вероятно ще искате да напишете съдържанието си в Markdown. Механизмът за шаблониране по подразбиране е Swig, който отново е подходящ за разработчици на JavaScript. Hexo обаче е разширяем, за да позволи използването на други шаблониращи машини, ако искате.
Уебсайтът на Hexo включва набор от предварително изградени теми, които можете да изпробвате, и една особено популярна характеристика на инструмента е неговата поддръжка за разполагане с една команда.
03. Гетсби
Подобно на Hexo, Gatsby се захранва от Node.js и така ще бъде по-позната територия за опитни разработчици на JavaScript. Няколко неща обаче го отличават от други подобни инструменти.
Gatsby използва React, което означава, че всичко е изградено с компоненти и му позволява да се възползва от подхода на React към DOM рендирането. Това означава, че може да бъде взето бързо от разработчиците, които са работили с React, но за тези, които не са запознати с него, ще е необходимо да се научи React.
Той също така използва GraphQL по време на изграждане за извличане на данни и съдържание от източници на данни, което осигурява модерен, последователен интерфейс, за да гарантира, че всяка страница получава точните данни, необходими, когато е изградена.
И накрая, Gatsby ще изгради страници като прогресивни приложения за една страница, което означава, че целият сайт се изтегля и последващата навигация е незабавна.
04. Хюго
Широко считан за „другия“ водещ генератор на статични сайтове, съвсем естествено е да сравняваме Hugo с Jekyll. Hugo е по-новият от двете, а една от основните му фокусни области е скоростта, което за някои е оплакване от Jekyll. Никой не обича да чака сайт да бъде изграден и Hugo може да състави прост сайт от вашата маркировка и шаблони за милисекунди или дори да премине през хиляди страници за секунди.
С Hugo също е типично да пишете съдържание с Markdown, а механизмът за шаблониране се основава на шаблони Go, тъй като самият Hugo е реализиран в езика за програмиране Go. Подобно на Jekyll, той се доставя с лек HTTP сървър за бързо обслужване на вашите страници локално. Работните потоци за изграждане на двата инструмента като цяло са доста сходни.
За мнозина ключовото предимство на Hugo е по-бързият и опростен път към започване, с много малка нужда от конфигурация и без зависимости, различни от основната двоична. Неговата документация и уроци са много добри и има етос на поддържане на простота, което прави една много достъпна крива на обучение.
Един недостатък, който Hugo има в сравнение с Jekyll, е, че му липсва обширната екосистема на приставките, достъпна за последния. Предвид широката му гама от вградена функционалност обаче, това едва ли ще представлява проблем за повечето потребители. Също така може да е малко по-лек за поддръжка на сайтове като StackOverflow, тъй като не е съществувал толкова дълго; въпреки това той продължава да нараства популярността си и мнозина вярват, че може да се превърне в водещия генератор на статични сайтове в близко бъдеще.
05. NUXT
Vue.js спечели огромна популярност като фронт енд фреймърдър през последните години, благодарение на комбинацията от нежна крива на обучение, висока производителност и мощен набор от функции.
Nuxt.js всъщност е рамка за създаване на визуализирани от сървъра Vue приложения - тоест динамични страници, които се изобразяват от сървъра, преди да бъдат предадени в завършения си вид на клиента за показване. Въпреки това, той може да се използва и за изграждане на статични сайтове, с параметър на командния ред, който ще изгради статични HTML страници за всички маршрути чрез Vue проект.
Тъй като Nuxt е Vue рамка, ще е необходимо запознаване с Vue, за да се използва, но разработчиците, които са работили с Vue преди, ще се чувстват като у дома си. И подобно на Vue, той също така носи подход, базиран на компоненти, за разработване на вашите сайтове.
06. MkDocs
MkDocs е по-специализиран от инструментите, които разгледахме досега. Той определя с една много проста цел в ума: да осигури бърз и лесен за използване начин за генериране на HTML сайтове за проектна документация. И абсолютно успява да направи това. Вграден е в Python, така че ще ви трябва Python и pip (мениджър на пакети на Python), за да го получите.
След това започването е лесно. Документацията е написана в Markdown и инструментът е конфигуриран с помощта на един YAML файл. Процесът на изграждане на командния ред е възможно най-прост.
Страницата MkDocs GitHub включва редица теми, които са специално проектирани за документация, или можете да създадете HTML за вашата собствена тема. MkDocs е един от най-лесните за стартиране на статични генератори на сайтове и ако документацията е вашият случай на употреба, наистина няма много причина да разглеждате други инструменти.
07. Пеликан
Pelican поддържа съдържание, написано на множество езици, включително повсеместното Markdown. Той използва механизма за шаблониране Jinja, който е едновременно лесен за използване и изключително мощен, което означава, че докато Pelican е оптимизиран предимно за изграждане на блогове, той също е много подходящ за изграждане на широк спектър от различни видове други сайтове. Освен това е бърз и може удобно да борави със сайтове с хиляди страници, без да ви кара да чакате тяхното изграждане.
Подобно на много от водещите генератори на статични сайтове, Pelican ви позволява да импортирате сайта си от различни платформи за блогове. Това го прави тривиален за конвертиране на съществуващ сайт, изграден с WordPress или много други популярни системи за управление на съдържанието. Ако сте запознати с Python и особено ако сте използвали шаблони на Jinja преди, Pelican е много безопасен избор.
Обратно, обаче, може да е малко по-трудно да се справят с разработчиците, които са по-запознати с JavaScript или Ruby.
08. Металджия
Metalsmith възприема различен подход към много други инструменти за генериране на статични сайтове, тъй като изобщо не се опитва да направи много. По същество генераторите на статични сайтове вземат набор от изходни файлове, манипулират ги и след това генерират набор от изходни файлове, който е самият статичен сайт.
Metalsmith предоставя рамка за това, но оставя всички действителни манипулации на плъгини. Тези манипулации са неща, които обикновено излизат от кутията с други генератори на статични сайтове, като използване на шаблони, заместване на променливи или тълкуване на езици като Markdown.
Когато се изпълняват през Metalsmith, всички изходни файлове се преобразуват в JavaScript обекти, което означава, че манипулациите от плъгини са по същество модификации на свойствата на тези JavaScript обекти. Има например a намаление () приставка, която преобразува Markdown в HTML.
Резултатът от този подход е, че Metalsmith е изключително персонализируем, но изисква малко повече внимание по време на настройката, отколкото някои от по-монолитните инструменти. Не ви харесва използването от Jekyll на шаблонен двигател Liquid? Тук можете да изберете своя собствена. На страницата Metalsmith ще намерите обширен списък с приставки, които да предоставят широк спектър от функционалности, вариращи от компилиране на Sass до CSS до изчисляване на броя на думите.
Ако предпочитате неинфорирани рамки, Metalsmith е толкова неинфониран, колкото можете.
09. Middleman
Middleman беше пуснат по същото време като Jekyll и ще бъде най-познат на разработчиците, които са работили с Ruby on Rails. Неговият шаблон по подразбиране е ERB (Embedded RuBy) и също така включва вградена поддръжка за Haml, Sass, SCSS и Coff eeScript и може да бъде разширена допълнително, за да поддържа повече.
Някои водещи генератори на статични сайтове са силно насочени към блогове, но Middleman поставя амбициите си по-широко и има за цел да осигури гъвкавост за разработване на всякакъв тип сайтове. Той е изключително непионен и разтегателен. Това означава, че ако всичко, което правите, е блог, настройката е малко по-сложна, тъй като ще трябва да го конфигурирате.
10. Спайк
Spike е изграден от същия екип като Roots, който видя голяма популярност, докато беше активно поддържан. Той предоставя позната екосистема за разработчиците на JavaScript, използвайки webpack, Postcss, Reshape и Babel. Подобно на Metalsmith, Spike е проектиран да осигури много проста рамка и да позволи на плъгините да се справят с вашите трансформации.
Събитие за уеб дизайн Генерирайте Ню Йорк връща се на 24-25 април 2019 г., предлагащ пълен график на водещи в бранша говорители, цял ден семинари и ценни мрежови възможности - не го пропускайте. Вземете вашия Generate билет сега .
Тази статия първоначално е публикувана в списание за творчески уеб дизайн Уеб дизайнер . Абонирайте се за Web Designer тук .
Свързани статии:
- 7-те урока за уеб дизайн, които трябва да знаете
- Бъдещето на уеб дизайна
- Как да оцелеем като уеб дизайнер след 2020 г.
