StaticGen. un catalog deschis de generatoare de site-uri statice, are mai mult de o sută de generatoare care au apărut recent și vedem că cota și popularitatea lor pe Github cresc. La inceput, proiectul numara 50 de generatori, acum sunt mai mult de doua ori mai mari si in total au peste 100 de mii de stele pe GitHub.
Site-urile web statice nu sunt știri - de aici a început webul. De unde provine această explozie de interes? De ce sa întâmplat acum?
Timpurile statice ale site-ului
Odată cu evoluția browserelor și HTML, dezavantajele site-urilor statice au devenit din ce în ce mai evidente.
Inițial, site-urile conțineau documente simple fără stiluri, dar cu timpul când designul ia luat locul, site-urile aveau anteturi grafice și navigație complexă. Din acel moment, gestionarea paginilor individuale ale site-ului ca documente diferite a încetat să mai aibă sens, iar scena a ieșit șablon.
De asemenea, a devenit evident că utilizarea numai a HTML pentru structura și CSS pentru stiluri nu este suficientă pentru a salva conținutul site-ului (articole, produse, elemente de galerie) în afara designului.
Până în acest moment baza de date SQL a devenit mainstream in mai multe baze de date companii online au devenit arhive sacre ale tuturor conținutului protejat de administratori de lungă bărbos și cu ochii roșii.
Și chiar dacă Dreamweaver ar putea, într-o oarecare măsură, să se integreze cu bazele de date, îi lipsea un model de conținut și nu a existat nici o separare a conținutului de design, în ciuda editării independente a celor două.
Probleme cu dinamica
Când am creat primul meu site dinamic acum 15 ani, am urmat instrucțiunile LAMP din documentația MySQL. Când mi-am dat seama că întreaga secvență de interacțiuni LAMP este efectuată de fiecare dată când cineva vizitează site-ul, ma șocat.
Serverul web trebuie să încarce codul meu în motorul PHP pe zbor, și apoi conectați la baza de date, trimite și primi cereri, apoi utilizați șabloane apoi adăugați aceste rânduri documentul HTML, create special pentru utilizatorul curent. Este încântător!
Dar admirație diminuat când am vizitat site-ul câțiva ani mai târziu și a văzut un mesaj de pagină de la un hacker care a găsit găuri de securitate într-o configurație suficientă pentru a desfigureze site-ului (și e mai bine decât hacking site-ul și apoi răspândit prin intermediul software-ului rău intenționat).
Plătim un preț mare pentru complexitatea integrată a site-urilor dinamice care procesează fiecare cerere pe server - și acest preț nu trebuie neapărat să fie plătit atunci când această complexitate nu este necesară.
Site-uri dinamice și cache
Într-o anumită măsură, această problemă este rezolvată prin cache. Nici un site popular pe WordPress nu este completat fără pluginul WP Super Cache. Site-urile mari utilizează caching proxy ca Varnish, Nginx și Apache Traffic Server.
Caching-ul este dificil de configurat corect, însă cel mai optimizat site dinamic în condiții normale va fi mult mai lent decât static.
Smashing Magazine este creată de o echipă axată pe productivitate și, în general, optimizată în mod serios în acest scop. Am efectuat un mic experiment pe acest articol. Utilizarea HTTrack. Am pompat acest site și am prezentat versiunea statică pe Netlify - o platformă statică de găzduire bazată pe CDN. N-am făcut nimic pentru a îmbunătăți performanța versiunii statice - pur și simplu puneți-o pe o gazdă, adânc integrată cu CDN.
Smashing Magazine este mai rapid decât majoritatea site-urilor, dar se ocupă de toate solicitările de la un centru de date. (versiune mai mare)
Apoi am efectuat câteva teste pentru a vedea cum afectează rata de sosire a primului octet și momentul în care pagina index.html a fost complet încărcată. Și asta a arătat instrumentul de performanță Sucuri.
site dinamic Chiar și extrem-optimizat pierde o medie de 6 ori versiunea statică. Noi luăm în considerare, desigur, că nu toată lumea va da un statica ce gazduieste o astfel de diferență, dar chiar și cu un site web dinamic CDN pur și simplu nu poate da performanțe comparabile, fără ajustarea manuală, care implică de obicei diferite ciudățenii din cache.
Site-urile statice sunt fundamental diferite în acest sens. Principiul de caching este simplu: fiecare adresă URL oferă același cod HTML fiecărui utilizator, până când fișierul URL corespunzător este actualizat în mod explicit.
Lucrul cu un astfel de principiu de cache impune unele limitări în dezvoltare, dar după crearea site-ului se va plăti în productivitate și în prețul de găzduire.
Generatoare moderne de site-uri statice
Recent, alternativa la site-urile dinamice tradiționale a luat amploare. În ideea unui generator de site-uri statice nu este nimic nou. Chiar și cu vechiul concurent WordPress, sistemul de management al conținutului Movable Type avea opțiunea de a crea un site static.
Google Trends la cerere "generator de site static". (versiune mai mare)
De atunci, numeroase restricții care au limitat site-urile statice au devenit irelevante, iar generatoarele moderne sunt motoare competitive, axate în primul rând pe dezvoltatorii frontend.
Cu fiecare săptămână, generatoarele de site-uri statice devin din ce în ce mai greu de păstrat. În general, toate generatoarele populare de site-uri statice au următoarele caracteristici.
Abilitatea de a împărți un sit în straturi separate și fragmente pentru a evita repetarea este una dintre fundațiile unui generator de site-uri statice. Există o alegere dintr-un set de motoare șablon, fiecare are propriile caracteristici - unele nu au logică, în altele modelul este amestecat cu codul, dar toate acestea permit evitarea dublării anteturilor, subsolurilor, navigației și a altor lucruri.
Suport pentru Markdown
Majoritatea generatoarelor statice sprijină Markdown. Unele utilizează formate similare, cum ar fi reStructuredText. În general, toate vă permit să scrieți un text simplu într-o formă structurată.
metadate
Jekyll a pus temelia generatorului de site-uri statice: șabloanele și Markdown sunt toate ale noastre.
Când fondatorul GitHub Tom Werner Preston a scris Jekyll pentru desfășurarea blog-ul său, el a găsit o soluție foarte interesantă pentru prezentarea metadatelor în documente și șabloane Markdown: Chapeau.
Partea introductivă este o cantitate mică de metadate, de obicei în format YAML, aflată chiar la începutul documentului:
Introducerea simplifică crearea de adnotări în documentele cu un singur fișier și oferă un format de text ușor de citit pentru toate datele, de obicei împrăștiate în diferite tabele ale bazei de date.
Conducta de investiții
Terminalul de astăzi este imposibil fără sisteme de asamblare și compilatoare. Vrem să fuzionăm și să comprimăm fișiere. Preprocesoarele CSS nu mai sunt o jucărie pentru geeks, ci o parte a unui flux de lucru normal. Același lucru este valabil și pentru CoffeeScript și ECMAScript 6, pentru care sunt necesare compilatoare.
Majoritatea generatorilor de site-uri statice au deja un sistem de fișiere, adică un sistem de compilare, minimizare, asamblare și altă prelucrare a resurselor. Unele dintre ele se bazează pe sisteme de asamblare Grunt, Gulp sau Broccoli și vă oferă acces imediat la toate capabilitățile ecosistemului respectiv. Alții optimizează fluxurile de lucru specifice, făcându-le disponibili "în afara casetei", fără configurarea configurației. Pentru multe generatoare, actualizarea automată a browserului la salvarea fișierelor a devenit standard.
Rezumați cele de mai sus
Un generator de site static oferă, de obicei, o interfață de linie de comandă pentru construirea unui site sau rularea unui server local pentru dezvoltare.
În Jekyll există o comandă construită de jekyll. asamblarea site-ului gata din fișierele de proiect existente și plasarea acestuia într-un subdirector.
Iată structura aproximativă a codului sursă al site-ului:
În folderul este _site din aceste surse, obținem un site gata, care poate fi descărcat în orice gazdă statică sau normală.
De ce este relevant acum?
OK, toată lumea este de acord că generatoarele de site-uri statice sunt minunate. Dar de ce acest val a avut loc chiar acum și de ce generatoarele timpurii nu au putut să se opună ceva la același WordPress? Ce sa schimbat? Și cât de departe va merge asta?
Generatoarele statice moderne lucrează într-un ecosistem complet diferit de cel care a fost înainte. Multe dintre restricțiile pe care site-urile dinamice le-au făcut fără alternative pentru toate cele mai complexe decât broșura online au dispărut, deși unele au rămas.
Navigatorii s-au schimbat
Astăzi, suntem prezenți la înmormântare solemnă a ultimului dintre vechile browsere școlare (RIP, IE8). Un browser modern este, practic, sistemul de operare, nu arătam descărcate de documentele web, precum și abilitatea de a rula aplicații web cu drepturi depline, care fac apelurile efectuate către orice compatibil cu CORS API, stoca date la nivel local, deschide un prize de web, și chiar și mâner de tip peer-to-peer conexiune alte browsere prin intermediul WebRTC.
Și această listă poate fi continuată - a fost deja creat un întreg ecosistem de extensii de browser pur. În plus, aplicațiile web moderne bazate pe Ember.js, AngularJS sau React sunt adesea plasate ca site-uri statice direct pe CDN cu un API curat care leagă interfața site-ului cu clientul mobil.
CDN a devenit mainstream
Deși prețurile Akamai sunt încă ridicate, astăzi oricine își poate permite să utilizeze Amazon AWS sau CloudFront pe site-ul lor. De asemenea, există companii precum Fastly, MaxCDN și CloudFlare care oferă servicii CDN la prețuri accesibile pentru întreprinderile mici.
Puteți utiliza CDN-ul pe un site dinamic, dar veți întâmpina problema dezactivării cache-ului. Căutarea unui echilibru între cache-ul pe noduri individuale și un backend dinamic necesită calcule destul de complexe, să spunem cel mai puțin.
Site-ul static, pe de altă parte, este gata să fie plasat direct pe CDN și, prin urmare, să se transfere memoria cache din nodurile cele mai apropiate de utilizatorii finali. Configurația configurației, desigur, va dura ceva timp și incapacitatea cache-ului rămâne dificilă, dar toate aceste sarcini pot fi efectuate și complet automatizate cu servicii cum ar fi Netlify.
Mai întâi de productivitate
Dispozitivele mobile au modificat webul în multe moduri diferite. Din ce în ce mai mulți utilizatori intră pe Internet de pe mobil, uneori cu o conexiune 3G. Și niciodată înainte, productivitatea nu a fost atât de importantă.
Nu contează cât optimizați site-ul dvs. dinamic și câte mii de dolari cheltuiți pe acesta - nu veți obține niciodată aceeași performanță ca pe un site static corect configurat, găzduit pe CDN, pentru câteva dolari pe lună. Având în vedere creșterea continuă a importanței performanței, nu este deloc surprinzător faptul că dezvoltatorii caută modalități de a genera în prealabil HTML, mai degrabă decât să risipească resursele de timp și de server pentru a genera o pagină pentru fiecare cerere HTTP.
Generarea unui site static rezolvă de asemenea multe probleme de performanță în procesul de dezvoltare.
Dacă creați un site dinamic bazat pe o bază de date, eficacitatea interogărilor bazei de date este extrem de importantă pentru dvs., acestea trebuie să fie suficient de repede pentru a rula o singură dată pentru fiecare solicitare HTTP. Chiar dacă site-ul dvs. are un nivel suficient de cache, există întotdeauna un risc ca solicitările individuale să încarce inutil cache-ul și să încetinească treptat întregul sistem.
Instrumente de implementare pentru asamblare
Cel mai recent, compilatoarele și sistemele de construire interesate numai de programatori C și Java și nu au afectat niciodată procesul de creare a site-urilor. Dar acum totul sa schimbat, indiferent dacă ne place sau nu.
Dezvoltatorii de frontend de astăzi s-au adaptat nevoilor lor de a construi sisteme, manageri de loturi, compilatori și traducători. Totul a început cu Grunt, acum aceste lucruri au devenit baza majorității proiectelor noi.
Odată cu dominarea sistemelor de asamblare, generatoarele de site-uri statice au devenit o parte mai naturală a frontendului de dezvoltare, iar sistemele tradiționale PHP pentru site-uri dinamice arata ca outsideri într-un flux de lucru modern pe interfață.
Ce lipsește
Toți acești factori au creat condiții excelente pentru creșterea popularității generatorilor de site-uri statice și nu este surprinzător faptul că tot mai multe site-uri vor fi statice.
Dar nu totul este atât de simplu. Pentru a ajunge în final la principalele, generatoarele statice trebuie să realizeze un progres în mai multe domenii.
Alegerea generatorului static al site-ului și lansarea proiectului sunt încă destul de problematice pentru prima dată. Puteți îmbunătăți mult din setul de instrumente pentru documentația și resursele disponibile.
În ciuda creșterii rapide a infrastructurii în jurul generatoarelor de site-uri statice, acestea rămân în continuare în spatele principalelor magazine și servicii de suport disponibile pentru platformele dinamice tradiționale.
Prin urmare, foarte multe site-uri asamblate pe generatoare statice migrează în cele din urmă la un CMS dinamic. Este nevoie de un pod care să conecteze managerii de conținut și sistemul de generare de site-uri statice. Până se va întâmpla acest lucru, site-urile statice generate vor ocupa o nișă mică.
Există și alte soluții interesante fără CMS. Verge folosește tabelele Google ca strat de conținut pentru Middleman; StaticGen utilizează API-ul Gist și GitHub ca înlocuitor pentru baza de date, iar Carrot utilizează Contentful ca un CMS static - toate acestea permit utilizatorilor obișnuiți să lucreze cu site-uri statice generate.
Sisteme cum ar fi Contentful. Prismic.io. GatherContent elimină CMS din procesul de dezvoltare web. Și acestea le fac instrumente interesante pentru gestionarea conținutului multicanal, atunci când scrieți conținut nu numai pentru un anumit site, ci și pentru o aplicație mobilă, o pagină de socializare sau alte scopuri. Publicarea de conținut nou lansează sistemul de construire; atunci generatorul de site-uri statice efectuează recuperarea datelor de la API și asamblarea site-ului; Rezultatul final este trimis direct către CDN.
O altă modalitate de editare a conținutului este să lucrați direct în depozitul principal.
Netlify dezvoltă un CMS open source. Nu este atașat nici unui generator special de site-uri statice sau hosting. Scopul său este de a lucra cu majoritatea generatoarelor statice și credem că aceasta este o modalitate excelentă de a depăși limitele impuse de tehnologiile moderne pentru asamblarea site-urilor statice.
Evident, vor exista mereu site-uri web pentru care motorul static nu este potrivit în principiu - în special a celor ale căror conținut este difuzat în permanență sau al căror conținut este extrem de dependent de căutare și filtrare.
Așa cum sa spus, generatorii de site-uri statice vor continua să construiască capacități și popularitate. Infrastructura și ecosistemul lor se va dezvolta. Și odată cu îmbunătățirea instrumentelor, vom vedea că dezvoltatorii vor extinde limitele a ceea ce poate fi implementat cu generatoare de site-uri statice.
În Netlify vedem deja cât de mari sunt site-uri cu conținut, căutare în timp real, multilingvism și secțiuni private folosind generatoare statice și API. Cu conștientizarea importanței productivității și a securității sporite, ne așteptăm ca vom vedea mult mai mult.
Articole similare
-
Șapte motive pentru a utiliza generatoare de site-uri statice
-
De ce duetul popular ucrainean "potap și nastya" îi place muzica din Belarus
Trimiteți-le prietenilor: