Kā izveidot vienkāršu emuāru ar Hexo Static Site Generator

Mūsdienu laikmetā tīmekļa vietnes ir informācijas veidotāji. Sākot ar uzņēmējdarbību, e-komerciju, sociālajām vietnēm un beidzot ar vienkāršiem emuāriem, vietnes ļauj cilvēkiem dalīties idejās un domās.

Šī apmācība parādīs, kā jūs varat izveidot vienkāršu emuāru, izmantojot ļoti ātru un ērti lietojamu statisku vietņu ģeneratoru.

Kas ir SSG?

SSG jeb Static Site Generator ir tīmekļa lietojumprogramma, kas tīmekļa dinamisko saturu pārveido par statisku saturu, kas parasti tiek glabāts lokāli. Statisko vietņu ģeneratoriem nav nepieciešamas datu bāzes un aizmugures, tādējādi novēršot nepieciešamību iemācīties kodēt. Tas galvenokārt koncentrējas uz satura rakstīšanu un prezentēšanu.

SSG vs. CMS

Populārākais veids, kā izveidot vietnes un pārvaldīt saturu, ir CMS vai satura pārvaldības sistēmu izmantošana, piemēram, WordPress, Drupal, Joomla utt.

CMS sistēmas darbojas, tieši izveidojot un pārvaldot saturu, izmantojot interaktīvu saskarni. Tā kā CMS dati tiek izgūti no datu bāzes, CMS ir ļoti lēni, jo saturs tiek ielādēts un tiek izmantots kā dinamisks saturs. CMS sistēmas ir pakļautas arī drošības ievainojamībai, jo funkcionalitātes palielināšanai tās paļaujas uz citu izstrādātāju rakstītiem ārējiem spraudņiem.

No otras puses, statisko vietņu ģeneratori darbojas, izveidojot saturu bezsaistes nesējiem, piemēram, teksta redaktoriem, un pēc publicēšanas renderē pēdējās lapas skatu. Tā kā saturs tiek atveidots lokāli un nav nepieciešama datu bāze, lapa tiek renderēta ātrāk, un ielādes ātrums ir neticami ātrs.

Statisko vietņu ģeneratori ir izgatavoti no iepriekš sastādītā koda, kas darbojas kā motors publicētā satura renderēšanai.

Kā izveidot statisku emuāru ar Hexo

Viena no populārākajām statiskās vietnes veidošanas izvēlēm ir Hexo.

Hexo ir vienkārša, ātra un spēcīga SSG lietojumprogramma, kas rakstīta NodeJS. Lai gan statiskas vietnes izveidošanai ir citas iespējas, Hexo ļauj jums pielāgot vietni un integrēt dažādus rīkus.

Apskatīsim, kā mēs varam izveidot vienkāršu statisku vietni ar Hexo.

Hexo instalēšana

Pirms mēs varam izveidot vietni, mums jāiestata un jāinstalē hekso prasības. Lai to izdarītu, mums ir nepieciešams NodeJS un git.

Sāciet ar sistēmas atjaunināšanu:

sudo apt-get atjauninājums
sudo apt-get jauninājums

Kad sistēma ir atjaunināta, instalējiet git

sudo apt-get install git

Pēc tam instalējiet nodejs no nodesource, izmantojot komandu:

čokurošanās -sL https: // deb.mezgla avots.com / setup_14.x | sudo -E bash -
apt-get install -y nodejs

Kad esat instalējis Nodejs, mēs varam turpināt instalēt hekso, izmantojot komandu:

npm instalēt -g hexo-cli

 Darbs ar Hexo

Kad esat instalējis hekso, varat izveidot vietni un publicēt saturu. Apskatīsim, kā strādāt ar Hexo. Paturiet prātā, ka šī ir ātra un vienkārša rokasgrāmata. Lai uzzinātu vairāk, skatiet dokumentāciju.

Vietnes izveide

Lai izveidotu jaunu hekso vietni, izmantojiet zemāk esošo komandu:

hexo init HexoSite
cd HexoSite
npm instalēt

Izpratne par Hexo Directory struktūru

Inicializējot jaunu Hexo vietni, jūs iegūsiet direktoriju struktūru, piemēram, zemāk redzamo:

-rw-r - r-- 1 cs cs 0 8. februāris 20:51 _config.ainava.yml
-rw-r - r-- 1 cs cs 2439 8. februāris 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8. februāris 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8. februāris 20:51 pakete.json
-rw-r - r-- 1 cs cs 56716 8. februāris 20:51 package-lock.json drwxr-xr-x 1 cs cs 4096 8. februāris 20:51 sastatnes drwxr-xr-x 1 cs cs 4096 8. februāris 20:51 avots drwxr-xr-x 1 cs cs 4096 8. februāris 20:51 tēmas

Pirmais fails ir _config.yml satur visus jūsu vietnes iestatījumus. Pirms vietnes izvietošanas noteikti modificējiet to, jo tajā būs noklusējuma vērtības.

Nākamais fails ir pakete.json fails, kas satur NodeJS lietojumprogrammas datus un konfigurācijas. Šeit jūs atradīsit instalētās paketes un to versijas.

Jūs varat uzzināt vairāk par paketi.json no resursu lapas zemāk:

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

Emuāra izveide

Lai izveidotu vienkāršu emuāru sešstūrī, izmantojiet komandu:

hexo jauns emuārs “Hello World Blog”

Pēc izveidošanas iezīmēšanas failu var iesniegt direktorijā / source / _posts. Lai rakstītu saturu, jums būs jāizmanto iezīmēšanas valoda Markdown.

Jaunas lapas izveide

Lapas izveide Hexo ir vienkārša; izmantojiet komandu:

hekso jauna lapa “2. lapa”

Lapas avots atrodas zem / source / Page-2 / index.md

Satura ģenerēšana un apkalpošana

Kad esat publicējis savu saturu hexo, jums būs jāpalaiž lietojumprogramma, lai ģenerētu statisko saturu.

Izmantojiet tālāk norādītās komandas:

$ hexo ģenerēt
INFO Apstiprina konfigurāciju
INFO Sāciet apstrādi
INFO Faili ielādēti 966 ms
INFO ģenerēts: arhīvs / rādītājs.html
INFO ģenerēts: 2. lapa / rādītājs.html
INFO ģenerēts: archives / 2021 / index.html
INFO ģenerēts: indekss.html
INFO ģenerēts: archives / 2021/02 / index.html
INFO ģenerēts: js / skripts.js
INFO ģenerēts: fancybox / jquery.fancybox.min.css
INFO ģenerēts: 2021/02/08 / Hello-World-Post / index.html
INFO ģenerēts: css / style.css
INFO ģenerēts: 2021/02/08 / labdiena / indekss.html
INFO ģenerēts: css / fonts / FontAwesome.otf
INFO ģenerēts: css / fonts / fontawesome-webfont.woff
INFO ģenerēts: css / fonts / fontawesome-webfont.eot
INFO ģenerēts: fancybox / jquery.fancybox.min.js
INFO ģenerēts: css / fonts / fontawesome-webfont.woff2
INFO ģenerēts: js / jquery-3.4.1.min.js
INFO ģenerēts: css / fonts / fontawesome-webfont.ttf
INFO ģenerēts: css / images / banner.jpg
INFO ģenerēts: css / fonts / fontawesome-webfont.svg
INFO 19 faili, kas ģenerēti 2.08 s

Lai apkalpotu lietojumprogrammu, palaidiet komandu:

$ hexo serveris INFO Apstiprina konfigurāciju INFO Sāciet INFO apstrādi Hexo darbojas vietnē http: // localhost: 4000 . Nospiediet Ctrl + C, lai apturētu.

 Secinājums

Šis ātrais un vienkāršais ievads parādīja, kā izmantot Hexo statisko vietni. Ja jums nepieciešama vairāk informācijas par to, kā strādāt ar Hexo, lūdzu, skatiet tālāk sniegto galveno dokumentāciju:

https: // hexo.io / docs