Ako vytvoriť jednoduchý blog s generátorom statických stránok Hexo

V modernej dobe sú webové stránky stavebnými kameňmi informácií. Od podnikania, elektronického obchodu, sociálnych webov až po jednoduché blogy - webové stránky umožňujú ľuďom zdieľať nápady a myšlienky.

Tento tutoriál vám ukáže, ako môžete vytvoriť jednoduchý blog pomocou statického generátora stránok, ktorý je veľmi rýchly a ľahko použiteľný.

Čo je to SSG?

SSG alebo generátor statických stránok je webová aplikácia, ktorá prevádza dynamický obsah na webovej stránke na statický obsah zvyčajne uložený lokálne. Generátory statickej stránky nevyžadujú databázy a backendy, čím eliminujú potrebu naučiť sa kódovať. Zameriava sa hlavne na písanie a prezentáciu obsahu.

SSG vs. CMS

Najpopulárnejším spôsobom vytvárania webových stránok a správy obsahu je použitie CMS alebo systémov na správu obsahu, ako sú WordPress, Drupal, Joomla atď.

Systémy CMS fungujú tak, že vytvárajú a spravujú obsah priamo pomocou interaktívneho rozhrania. Pretože údaje v CMS sa získavajú z databázy, CMS sú veľmi pomalé, pretože sa načítava obsah a slúži ako dynamický obsah. Systémy CMS sú tiež náchylné na chyby zabezpečenia, pretože sa pri zvyšovaní funkčnosti spoliehajú na externé doplnky od iných vývojárov.

Na druhej strane statické generátory webových stránok fungujú tak, že vytvárajú offline médiá typu obsahu, ako sú textové editory, a po zverejnení vykreslia výsledné zobrazenie stránky. Pretože je obsah lokálne vykreslený bez potreby databázy, stránka sa vykresľuje rýchlejšie a rýchlosti načítania sú neuveriteľne rýchle.

Generátory statických stránok sú vyrobené z predkompilovaného kódu, ktorý slúži ako nástroj na vykreslenie zverejneného obsahu.

Ako vytvoriť statický blog s programom Hexo

Jednou z populárnych možností na vytvorenie statického webu je Hexo.

Hexo je jednoduchá, rýchla a výkonná aplikácia SSG napísaná v NodeJS. Aj keď existujú ďalšie možnosti na vytvorenie statického webu, Hexo vám umožňuje prispôsobiť váš web a integrovať rôzne nástroje.

Pozrime sa, ako môžeme pomocou Hexo vytvoriť jednoduchý statický web.

Inštaluje sa Hexo

Predtým, ako môžeme vytvoriť web, musíme nastaviť požiadavky na hexo a nainštalovať ho. Preto potrebujeme NodeJS a git.

Začnite aktualizáciou systému:

sudo apt-get aktualizácia
sudo apt-get upgrade

Keď budete mať svoj systém aktualizovaný, nainštalujte si git

sudo apt-get nainštalovať git

Ďalej nainštalujte nodejs z nodesource pomocou príkazu:

zvlnenie -sL https: // deb.nodeource.com / setup_14.x | sudo -E bash -
apt-get install -y nodejs

Keď už máte Nodejs nainštalovaný, môžeme pokračovať v inštalácii hexo pomocou príkazu:

npm install -g hexo-cli

 Práca so spoločnosťou Hexo

Po nainštalovaní hexo môžete vytvoriť web a publikovať obsah. Pozrime sa, ako pracovať s Hexo. Pamätajte, že toto je rýchly a jednoduchý sprievodca. Ďalšie informácie nájdete v dokumentácii.

Vytvorenie stránky

Ak chcete vytvoriť nový hexadecimálny web, použite nasledujúci príkaz:

hexo init HexoSite
CD HexoSite
npm nainštalovať

Pochopenie štruktúry adresára Hexo

Akonáhle inicializujete nový web Hexo, získate adresárovú štruktúru, ktorá je uvedená nižšie:

-rw-r - r-- 1 cs cs 8. febr. 20:51 _konfigur.krajina.yml
-rw-r - r-- 1 cs cs 2439 8. februára 20:51 _konfigurácia.yml drwxr-xr-x 1 cs cs 4096 8. februára 20:51 node_modules
-balíček rw-r - r-- 1 cs cs 615 8. februára 20:51.json
-rw-r - r-- 1 cs cs 56716 8. februára 20:51 balíček-lock.json drwxr-xr-x 1 cs cs 4096 8. februára 20:51 lešenie drwxr-xr-x 1 cs cs 4096 8. februára 20:51 zdroj drwxr-xr-x 1 cs cs 4096 8. februára 20:51 témy

Prvý súbor je _config.yml obsahuje všetky nastavenia pre váš web. Pred nasadením svojho webu ho nezabudnite upraviť, pretože bude obsahovať predvolené hodnoty.

Ďalším súborom je balík.súbor JSON, ktorý obsahuje údaje a konfigurácie aplikácie NodeJS. Tu nájdete nainštalované balíčky a ich verzie.

Viac informácií o balíku.json zo stránky so zdrojmi nižšie:

https: // dokumenty.npmjs.com / cli / v6 / configuring-npm / package-json

Vytvorenie blogu

Ak chcete vytvoriť jednoduchý blog v hexo formáte, použite príkaz:

hexo nový blog „Hello World Blog“

Po vytvorení môžete súbor markdown uložiť do adresára / source / _posts. Na písanie obsahu budete musieť použiť značkovací jazyk Markdown.

Vytvára sa nová stránka

Vytvorenie stránky v Hexo je jednoduché; použite príkaz:

hexo nová stránka „Stránka-2“

Zdroj stránky sa nachádza pod / source / Page-2 / index.md

Generovanie a poskytovanie obsahu

Po zverejnení obsahu v hexo formáte budete musieť spustiť aplikáciu na vygenerovanie statického obsahu.

Použite nižšie uvedené príkazy:

$ hexo generovať
INFO Overuje sa konfigurácia
INFO Spustiť spracovanie
INFO Súbory načítané za 966 ms
INFO Vygenerované: archívy / index.html
INFO Generované: Strana-2 / index.html
INFO Vygenerované: archívy / 2021 / index.html
INFO vygenerované: index.html
INFO Vygenerované: archívy / 2021/02 / index.html
INFO Vygenerované: js / skript.js
INFO Generované: fancybox / jquery.fancybox.min.css
INFO Generované: 2021/02/08 / Hello-World-Post / index.html
INFO Vygenerované: css / štýl.css
INFO Generované: 2021/02/08 / ahoj-svet / index.html
INFO Generované: css / fonts / FontAwesome.otf
INFO Generované: css / fonts / fontawesome-webfont.woff
INFO Generované: css / fonts / fontawesome-webfont.eot
INFO Generované: fancybox / jquery.fancybox.min.js
INFO Generované: css / fonts / fontawesome-webfont.woff2
INFO vygenerované: js / jquery-3.4.1.min.js
INFO Generované: css / fonts / fontawesome-webfont.ttf
INFO Generované: css / images / banner.jpg
INFO Generované: css / fonts / fontawesome-webfont.svg
INFO 19 súborov vygenerovaných v 2.08 s

Ak chcete aplikáciu obsluhovať, spustite príkaz:

$ hexo server INFO Potvrdenie konfigurácie INFO Spustiť spracovanie INFO Hexo beží na http: // localhost: 4000 . Stlačením Ctrl + C zastavíte.

 Záver

Tento rýchly a jednoduchý úvod vám ukázal, ako používať statické stránky Hexo. Ak potrebujete ďalšie informácie o tom, ako pracovať s Hexo, pozrite si nasledujúcu hlavnú dokumentáciu:

https: // hexo.io / dokumenty