Phenquestions
Denna handledning visar dig hur du kan skapa en enkel blogg med hjälp av en statisk webbplatsgenerator som är mycket snabb och enkel att använda.
Vad är en SSG?
SSG, eller Static Site Generator, är en webbapplikation som konverterar det dynamiska innehållet på en webbsida till statiskt innehåll som vanligtvis lagras lokalt. Statiska webbplatsgeneratorer kräver inte databaser och backend, vilket eliminerar behovet av att lära sig att koda. Det fokuserar främst på att skriva och presentera innehållet.
SSG vs. CMS
Det mest populära sättet att skapa webbplatser och hantera innehåll är att använda CMS eller innehållshanteringssystem som WordPress, Drupal, Joomla, etc.
CMS-system fungerar genom att skapa och hantera innehåll direkt med hjälp av ett interaktivt gränssnitt. Eftersom data i ett CMS hämtas från databasen är CMS mycket långsamt eftersom innehållet hämtas och tjänas som dynamiskt innehåll. CMS-system är också utsatta för säkerhetsproblem eftersom de är beroende av externa plugins skrivna av andra utvecklare för att öka funktionaliteten.
Å andra sidan fungerar statiska webbplatsgeneratorer genom att skapa innehåll offline-medier som textredigerare och gör den sista sidvisningen vid publicering. Eftersom innehållet återges lokalt, utan att behöva en databas, görs sidan snabbare och laddningshastigheterna är otroligt snabba.
Statiska webbplatsgeneratorer är gjorda av förkompilerad kod som fungerar som en motor för att återge det publicerade innehållet.
Hur man bygger en statisk blogg med Hexo
Ett av de populäraste alternativen för att bygga en statisk plats är Hexo.
Hexo är en enkel, snabb och kraftfull SSG-applikation skriven i NodeJS. Även om det finns andra val för att bygga en statisk webbplats, låter Hexo dig anpassa din webbplats och integrera olika verktyg.
Låt oss titta på hur vi kan skapa en enkel statisk webbplats med Hexo.
Installerar Hexo
Innan vi kan bygga en webbplats måste vi ställa in hexokrav och installera den. För detta kräver vi NodeJS och git.
Börja med att uppdatera ditt system:
sudo apt-get-uppdateringsudo apt-get uppgradering
När du har uppdaterat ditt system installerar du git
sudo apt-get install gitInstallera sedan nodjs från nodesource med kommandot:
curl -sL https: // deb.nodesource.com / setup_14.x | sudo -E bash -apt-get install -y nodejs
När du har installerat Nodejs kan vi fortsätta att installera hexo med kommandot:
npm installera -g hexo-cliArbeta med Hexo
När du har installerat hexo kan du skapa en webbplats och publicera innehåll. Låt oss titta på hur man arbetar med Hexo. Tänk på att detta är en snabb, enkel guide. Se dokumentationen för att lära dig mer.
Skapa en webbplats
För att skapa en ny hexo-webbplats, använd kommandot nedan:
hexo init HexoSitecd HexoSite
npm installera
Förstå Hexo Directory-strukturen
När du har initierat en ny Hexo-webbplats får du en katalogstruktur som den nedan:
-rw-r - r-- 1 cs cs 0 8 feb 20:51 _config.landskap.yml-rw-r - r-- 1 cs cs 2439 8 feb 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 feb 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8 februari 20:51 paket.json
-rw-r - r-- 1 cs cs 56716 8 feb 20:51 paketlås.json drwxr-xr-x 1 cs cs 4096 8 feb 20:51 byggnadsställningar drwxr-xr-x 1 cs cs 4096 8 feb 20:51 källa drwxr-xr-x 1 cs cs 4096 8 feb 20:51 teman
Den första filen är _config.yml innehåller alla inställningar för din webbplats. Se till att ändra det innan du distribuerar din webbplats eftersom den innehåller standardvärden.
Nästa fil är paketet.json-fil som innehåller NodeJS-applikationsdata och konfigurationer. Här hittar du installerade paket och deras versioner.
Du kan lära dig mer om paketet.json från resursidan nedan:
https: // docs.npmjs.com / cli / v6 / configuring-npm / package-json
Skapa en blogg
För att skapa en enkel blogg i hexo, använd kommandot:
hexo ny blogg “Hello World Blog”När du har skapat det kan du arkivera markdown-filen under / source / _posts-katalogen. Du måste använda Markdown-markeringsspråk för att skriva innehåll.
Skapa en ny sida
Att skapa en sida i Hexo är enkelt; använd kommandot:
hexo ny sida “Sida-2”Sidkällan finns under / source / Page-2 / index.md
Generera och visa innehåll
När du publicerar ditt innehåll på hexo måste du köra applikationen för att generera det statiska innehållet.
Använd kommandona nedan:
$ hexo genereraINFO Validerar konfiguration
INFO Börja bearbeta
INFO Filer laddade på 966 ms
INFO genereras: arkiv / index.html
INFO genereras: Sida-2 / index.html
INFO genereras: arkiv / 2021 / index.html
INFO genereras: index.html
INFO genereras: arkiv / 2021/02 / index.html
INFO genereras: js / script.js
INFO genereras: fancybox / jquery.snygg låda.min.css
INFO genererad: 2021/02/08 / Hello-World-Post / index.html
INFO genereras: css / stil.css
INFO genereras: 2021/02/08 / hej-världen / index.html
INFO genereras: css / fonts / FontAwesome.otf
INFO genereras: css / fonts / fontawesome-webfont.woff
INFO genereras: css / fonts / fontawesome-webfont.eot
INFO genereras: fancybox / jquery.snygg låda.min.js
INFO genereras: css / fonts / fontawesome-webfont.woff2
INFO genereras: js / jquery-3.4.1.min.js
INFO genereras: css / fonts / fontawesome-webfont.ttf
INFO genereras: css / bilder / banner.jpg
INFO genereras: css / fonts / fontawesome-webfont.svg
INFO 19 filer genererade i 2.08 s
För att betjäna applikationen, kör kommandot:
$ hexo-server INFO Validerar config INFO Börja bearbeta INFO Hexo körs på http: // localhost: 4000 . Tryck på Ctrl + C för att stoppa.Slutsats
Den här snabba och enkla introduktionen har visat dig hur du använder den statiska webbplatsen Hexo. Om du behöver mer information om hur du arbetar med Hexo, se huvuddokumentationen nedan:
https: // hexo.io / docs
