Phenquestions
Deze tutorial laat je zien hoe je een eenvoudige blog kunt opzetten met behulp van een statische sitegenerator die erg snel en gemakkelijk te gebruiken is.
Wat is een SSG?
SSG, of Static Site Generator, is een webtoepassing die de dynamische inhoud op een webpagina omzet in statische inhoud die meestal lokaal wordt opgeslagen. Statische sitegeneratoren hebben geen databases en backends nodig, waardoor het niet meer nodig is om te leren coderen. Het richt zich vooral op het schrijven en presenteren van de inhoud.
SSG vs. CMS
De meest populaire manier om websites te maken en inhoud te beheren, is het gebruik van CMS of inhoudbeheersystemen zoals WordPress, Drupal, Joomla, enz.
CMS-systemen werken door inhoud rechtstreeks te creëren en te beheren met behulp van een interactieve interface. Aangezien gegevens in een CMS worden opgehaald uit de database, zijn CMS'en erg traag omdat de inhoud wordt opgehaald en als dynamische inhoud wordt weergegeven. CMS-systemen zijn ook gevoelig voor beveiligingsproblemen, omdat ze afhankelijk zijn van externe plug-ins die door andere ontwikkelaars zijn geschreven om de functionaliteit te vergroten.
Aan de andere kant werken statische sitegeneratoren door offline inhoudsmedia zoals teksteditors te maken en de uiteindelijke paginaweergave bij publicatie weer te geven. Omdat de inhoud lokaal wordt weergegeven, zonder dat een database nodig is, wordt de pagina sneller weergegeven en zijn de laadsnelheden ongelooflijk snel.
Statische sitegeneratoren zijn gemaakt van vooraf gecompileerde code die fungeert als een motor om de gepubliceerde inhoud weer te geven.
Een statische blog bouwen met Hexo
Een van de populaire keuzes voor het bouwen van een statische site is Hexo.
Hexo is een eenvoudige, snelle en krachtige SSG-applicatie geschreven in NodeJS. Hoewel er andere keuzes zijn voor het bouwen van een statische site, kunt u met Hexo uw site aanpassen en verschillende tools integreren.
Laten we eens kijken hoe we een eenvoudige statische site kunnen opzetten met Hexo.
Hexo . installeren
Voordat we een site kunnen bouwen, moeten we hexo-vereisten instellen en installeren. Hiervoor hebben we NodeJS en git . nodig.
Begin met het updaten van uw systeem:
sudo apt-get updatesudo apt-get upgrade
Zodra je systeem up-to-date is, installeer je git
sudo apt-get install gitInstalleer vervolgens nodejs van nodesource met behulp van de opdracht:
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -apt-get install -y nodejs
Zodra u Nodejs hebt geïnstalleerd, kunnen we doorgaan met het installeren van hexo met behulp van de opdracht:
npm install -g hexo-cliWerken met Hexo
Nadat u hexo hebt geïnstalleerd, kunt u een site maken en inhoud publiceren. Laten we eens kijken hoe we met Hexo . kunnen werken. Houd er rekening mee dat dit een snelle, eenvoudige handleiding is. Raadpleeg de documentatie voor meer informatie.
Een site maken
Gebruik de onderstaande opdracht om een nieuwe hexo-site te maken:
hexo init HexoSitecd HexoSite
npm installeren
De structuur van de Hexo-directory begrijpen
Zodra u een nieuwe Hexo-site initialiseert, krijgt u een directorystructuur zoals hieronder:
-rw-r--r-- 1 cs cs 0 8 februari 20:51 _config.landschap.yml-rw-r--r-- 1 cs cs 2439 8 februari 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 februari 20:51 node_modules
-rw-r--r-- 1 cs cs 615 8 februari 20:51 pakket.json
-rw-r--r-- 1 cs cs 56716 8 februari 20:51 pakket-lock.json drwxr-xr-x 1 cs cs 4096 8 feb 20:51 steigers drwxr-xr-x 1 cs cs 4096 8 feb 20:51 bron drwxr-xr-x 1 cs cs 4096 8 feb 20:51 thema's
Het eerste bestand is de _config.yml bevat alle instellingen voor je site. Zorg ervoor dat u deze aanpast voordat u uw site implementeert, omdat deze standaardwaarden zal bevatten.
Het volgende bestand is het pakket.json-bestand dat de NodeJS-toepassingsgegevens en configuraties bevat. Hier vindt u geïnstalleerde pakketten en hun versies.
U kunt meer te weten komen over het pakket.json van de onderstaande bronpagina:
https://docs.npmjs.com/cli/v6/configureren-npm/package-json
Een blog maken
Gebruik de opdracht om een eenvoudige blog in hexo te maken:
hexo nieuwe blog “Hello World Blog”Eenmaal gemaakt, kunt u het markdown-bestand opslaan in de map /source/_posts. U moet Markdown-opmaaktaal gebruiken om inhoud te schrijven.
Een nieuwe pagina maken
Een pagina maken in Hexo is eenvoudig; gebruik het commando:
hexo nieuwe pagina “Pagina-2”De paginabron bevindt zich onder /source/Page-2/index.md
Inhoud genereren en presenteren
Zodra u uw inhoud op hexo publiceert, moet u de toepassing uitvoeren om de statische inhoud te genereren.
Gebruik de onderstaande commando's:
$ hexo genererenINFO Configuratie valideren
INFO Begin met verwerken
INFO Bestanden geladen in 966 ms
INFO Gegenereerd: archieven/index.html
INFO gegenereerd: Pagina-2/index.html
INFO Gegenereerd: archieven/2021/index.html
INFO Gegenereerd: index.html
INFO Gegenereerd: archief/2021/02/index.html
INFO Gegenereerd: js/script.js
INFO Gegenereerd: fancybox/jQuery.fancybox.min.css
INFO Gegenereerd: 2021/02/08/Hello-World-Post/index.html
INFO Gegenereerd: css/stijl.css
INFO Gegenereerd: 2021/02/08/hello-world/index.html
INFO Gegenereerd: css/fonts/FontAwesome.otf
INFO Gegenereerd: css/fonts/fontawesome-webfont.waff
INFO Gegenereerd: css/fonts/fontawesome-webfont.eot
INFO Gegenereerd: fancybox/jQuery.fancybox.min.js
INFO Gegenereerd: css/fonts/fontawesome-webfont.woff2
INFO Gegenereerd: js/jQuery-3.4.1.min.js
INFO Gegenereerd: css/fonts/fontawesome-webfont.ttf
INFO Gegenereerd: css/afbeeldingen/banner.jpg
INFO Gegenereerd: css/fonts/fontawesome-webfont.svg
INFO 19 bestanden gegenereerd in 2.08 zo
Voer de opdracht uit om de toepassing te bedienen:
$ hexo-server INFO Configuratie valideren INFO Begin met verwerken INFO Hexo draait op http://localhost:4000 . Druk op Ctrl+C om te stoppen.Conclusie
Deze snelle en eenvoudige introductie heeft u laten zien hoe u de statische Hexo-site gebruikt. Als u meer informatie nodig heeft over het werken met Hexo, raadpleeg dan de hoofddocumentatie hieronder:
https://hexo.io/docs
