Acest tutorial vă va arăta cum puteți configura un blog simplu folosind un generator de site static care este foarte rapid și ușor de utilizat.
Ce este un SSG?
SSG, sau Static Site Generator, este o aplicație web care convertește conținutul dinamic de pe o pagină web în conținut static stocat de obicei local. Generatorii de site-uri statice nu necesită baze de date și backend-uri, eliminând astfel necesitatea de a învăța cum să codificați. Se concentrează în principal pe scrierea și prezentarea conținutului.
SSG vs. CMS
Cel mai popular mod de a crea site-uri web și de a gestiona conținutul este utilizarea CMS sau a sistemelor de gestionare a conținutului precum WordPress, Drupal, Joomla etc.
Sistemele CMS funcționează prin crearea și gestionarea conținutului direct utilizând o interfață interactivă. Deoarece datele dintr-un CMS sunt preluate din baza de date, CMS-urile sunt foarte lente, deoarece conținutul este preluat și servit ca conținut dinamic. Sistemele CMS sunt, de asemenea, predispuse la vulnerabilități de securitate, deoarece se bazează pe pluginuri externe scrise de alți dezvoltatori pentru a spori funcționalitatea.
Pe de altă parte, generatorii de site-uri statice funcționează prin crearea de medii offline de conținut, cum ar fi editorii de text și redă vizualizarea finală a paginii la publicare. Deoarece conținutul este redat local, fără a fi nevoie de o bază de date, pagina se redă mai rapid, iar viteza de încărcare este incredibil de rapidă.
Generatoarele de site statice sunt realizate din cod precompilat care acționează ca un motor pentru redarea conținutului publicat.
Cum să construiești un blog static cu Hexo
Una dintre alegerile populare pentru construirea unui site static este Hexo.
Hexo este o aplicație SSG simplă, rapidă și puternică scrisă în NodeJS. Deși există alte opțiuni pentru construirea unui site static, Hexo vă permite să vă personalizați site-ul și să integrați diverse instrumente.
Să ne uităm la modul în care putem configura un site static simplu cu Hexo.
Instalarea Hexo
Înainte de a putea construi un site, trebuie să configurăm cerințele hexo și să îl instalăm. Pentru aceasta, avem nevoie de NodeJS și git.
Începeți prin actualizarea sistemului:
sudo apt-get updatesudo apt-get upgrade
Odată ce ați actualizat sistemul, instalați git
sudo apt-get install gitApoi, instalați nodejs din nodesource folosind comanda:
curl -sL https: // deb.sursă de nod.com / setup_14.x | sudo -E bash -apt-get install -y nodejs
Odată ce ai instalat Nodejs, putem continua instalarea hexo folosind comanda:
npm instala -g hexo-cliLucrul cu Hexo
Odată ce ați instalat hexo, puteți crea un site și puteți publica conținut. Să ne uităm la modul de lucru cu Hexo. Rețineți că acesta este un ghid simplu și rapid. Consultați documentația pentru a afla mai multe.
Crearea unui site
Pentru a crea un nou site hexo, utilizați comanda de mai jos:
hexo init HexoSitecd HexoSite
instalare npm
Înțelegerea structurii Hexo Directory
Odată ce inițializați un nou site Hexo, veți obține o structură de directoare precum cea de mai jos:
-rw-r - r-- 1 cs cs 0 8 februarie 20:51 _config.peisaj.yml-rw-r - r-- 1 cs cs 2439 8 Feb 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 februarie 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8 februarie 20:51 pachet.json
-rw-r - r-- 1 cs cs 56716 8 februarie 20:51 pachet-blocare.json drwxr-xr-x 1 cs cs 4096 8 februarie 20:51 schele drwxr-xr-x 1 cs cs 4096 8 februarie 20:51 sursă drwxr-xr-x 1 cs cs 4096 8 februarie 20:51 teme
Primul fișier este _config.yml conține toate setările pentru site-ul dvs. Asigurați-vă că îl modificați înainte de a vă implementa site-ul, deoarece acesta va conține valori implicite.
Următorul fișier este pachetul.fișier json care conține datele și configurațiile aplicației NodeJS. Aici veți găsi pachetele instalate și versiunile acestora.
Puteți afla mai multe despre pachet.json din pagina de resurse de mai jos:
https: // docs.npmjs.com / cli / v6 / configuring-npm / package-json
Crearea unui blog
Pentru a crea un blog simplu în hexo, utilizați comanda:
hexo nou blog „Hello World Blog”Odată creat, puteți înregistra fișierul de reducere în directorul / source / _posts. Va trebui să utilizați limbajul de marcare Markdown pentru a scrie conținut.
Crearea unei noi pagini
Crearea unei pagini în Hexo este simplă; folosiți comanda:
hexo pagina nouă „Pagina-2”Sursa paginii se află sub / source / Page-2 / index.md
Generarea și difuzarea de conținut
Odată ce vă publicați conținutul pe hexo, va trebui să rulați aplicația pentru a genera conținut static.
Utilizați comenzile de mai jos:
$ hexo generateINFO Validare config
INFO Începe procesarea
INFO Fișiere încărcate în 966 ms
INFO Generat: arhive / index.html
INFO Generat: Pagina-2 / index.html
INFO Generat: arhive / 2021 / index.html
INFO Generat: index.html
INFO Generat: arhive / 2021/02 / index.html
INFO Generat: js / script.js
INFO Generat: fancybox / jquery.cutie atragatoare.min.css
INFO Generat: 2021/02/08 / Hello-World-Post / index.html
INFO Generat: css / stil.css
INFO Generat: 2021/02/08 / hello-world / index.html
INFO Generat: css / fonts / FontAwesome.otf
INFO Generat: css / fonts / fontawesome-webfont.woff
INFO Generat: css / fonts / fontawesome-webfont.eot
INFO Generat: fancybox / jquery.cutie atragatoare.min.js
INFO Generat: css / fonts / fontawesome-webfont.woff2
INFO Generat: js / jquery-3.4.1.min.js
INFO Generat: css / fonts / fontawesome-webfont.ttf
INFO Generat: css / images / banner.jpg
INFO Generat: css / fonts / fontawesome-webfont.svg
INFO 19 fișiere generate în 2.08 s
Pentru a servi aplicația, rulați comanda:
$ hexo server INFO Validare config INFO Începe procesarea INFO Hexo rulează la http: // localhost: 4000 . Apăsați Ctrl + C pentru a opri.Concluzie
Această introducere rapidă și simplă v-a arătat cum să utilizați site-ul static Hexo. Dacă aveți nevoie de mai multe informații despre cum să lucrați cu Hexo, vă rugăm să consultați documentația principală furnizată mai jos:
https: // hexo.io / docs