een blog installeren en maken met Hexo op Ubuntu 20.04
Hexo is een statisch blogging raamwerk gebouwd op Node.js. Met Hexo kun je berichten schrijven in Markdown formaat. Deze blog posts worden verwerkt en omgezet in statische HTML bestanden met behulp van vooraf bepaalde thema’s.
Het is anders dan de gebruikelijke blogging software zoals WordPress omdat het statische bestanden genereert. WordPress laadt het blog dynamisch door telkens als je de site herlaadt PHP code uit te voeren, wat het vatbaar maakt voor kwetsbaarheden.
In deze handleiding leer je hoe je Hexo installeert en gebruikt om een blog te maken op een Ubuntu 20.04 gebaseerde server.
Vereisten
Ubuntu 20.04 gebaseerde server met een niet-root gebruiker met sudo privileges.
Git moet geïnstalleerd zijn. Als je git niet geïnstalleerd hebt, kun je dat doen via de volgende commando’s.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email "[email protected]"Een account op Github.
Firewall instellen
Ubuntu 20.04 wordt standaard geleverd met Uncomplicated Firewall(UFW). Mocht dat niet zo zijn, installeer het dan eerst.
$ sudo apt install ufw
Schakel de SSH poort in.
$ sudo ufw allow "OpenSSH"
Schakel de firewall in.
$ sudo ufw enable
Schakel de poort 4000 in die door de Hexo server gebruikt wordt.
$ sudo ufw allow 4000
Open ook de HTTP en HTTPS poorten die we later nodig zullen hebben.
$ sudo ufw allow http
$ sudo ufw allow https
Controleer de status van de firewall.
$ sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
80/tcp ALLOW Anywhere
4000 ALLOW Anywhere
443/tcp ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
Installeer Node.js
Omdat Hexo gebaseerd is op Node.js, moet je het eerst installeren.
Voer het volgende commando uit om Node.js Repository toe te voegen.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Installeer Node.js.
$ sudo apt-get install nodejs
Bevestig of het goed geïnstalleerd is.
$ node --version
v14.15.0
Installeer Hexo
Voer het volgende commando uit om het Hexo pakket te installeren.
$ sudo npm install hexo-cli -g
De parameter -g installeert het pakket hexo-cli globaal, zodat je Hexo blog in een directory naar keuze kunt installeren.
Maak de directory om Hexo in te installeren.
$ sudo mkdir -p /var/www/hexo
Stel de vereiste permissies en eigendom in.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
Vervolgens moet je de nodige bestanden voor het Hexo blog initialiseren en instellen. Schakel daarvoor over naar de directory die je zojuist maakte.
$ cd /var/www/hexo
Initialiseer het Hexo blog.
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
INFO Start blogging with Hexo!
Installeer Hexo.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 5 packages from 1 contributor and audited 191 packages in 1.567s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Je kunt nu de directory structuur bekijken.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
Het _config.yml bestand bevat de configuratie voor je Hexo blog. De meeste blog instellingen kunnen van hieruit veranderd worden.
De node_modules map bevat alle pakketten die Hexo nodig heeft en die waarvan het afhangt.
Het package.json bestand bevat een lijst van alle pakketten en hun versienummers die Hexo nodig heeft.
Het package-lock.json bestand wordt automatisch gegenereerd door npm telkens wanneer je een installatie of een wijziging in het Hexo pakket uitvoert. Het bevat informatie over de pakketten en de versies die geïnstalleerd of gewijzigd werden.
De scaffolds map bevat de sjablonen waarop je blog berichten en pagina's gebaseerd zullen zijn.
De source map bevat de eigenlijke site inhoud in HTML/CSS formaat die dan op het web gepubliceerd wordt. Elke map of bestand met _(underscores) als voorvoegsel wordt door Hexo genegeerd, behalve de map _posts. Voorlopig is die map leeg omdat we nog niets geschreven of gepubliceerd hebben.
De themes map bevat je Blog thema's.
Configureer Hexo
Open het _config.yml bestand om het te bewerken.
$ nano _config.yml
Bekijk het gedeelte van het bestand met de titel Site
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
De opties spreken voor zich. Verander de naam van je site, stel een ondertitel in als je wilt. Voeg een beschrijving van je site toe en enkele trefwoorden om hem te beschrijven. Verander de auteursnaam en de tijdzone voor je site.
Kijk daarna in het URL gedeelte van het bestand.
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
Verander de URL van je site in je domeinnaam. Zorg ervoor dat je HTTPS in je URL gebruikt, want we zullen later SSL installeren.
Als je niet wilt dat de URL van je site aan het eind van elke pagina index.html toont, kun je de beide opties trailing_index en trailing_html veranderen in false.
Er zijn nog een paar andere instellingen die je aan moet zetten.
Verander de waarde van de variabele default_layout van post in draft. Hierdoor worden nieuwe berichten als klad aangemaakt, zodat je ze eerst moet publiceren voor ze op het blog verschijnen.
Verander de waarde van de variabele post_asset_folder in true. Hierdoor kun je voor elk bericht afzonderlijke afbeeldingsmappen hebben in plaats van een enkele afbeeldingsmap voor alle berichten.
Sla het bestand op door op Ctrl+X te drukken en Y in te voeren als daarom gevraagd wordt.
Een Thema Installeren
Hexo wordt geleverd met een standaardthema met de naam Landscape. Je kunt op een ander thema overschakelen door een ander Hexo thema te installeren dat op de Thema's pagina beschikbaar is.
Alle Hexo thema's zijn beschikbaar via Github, dus je moet de Github repository van het thema klonen.
Voor onze tutorial installeren we het Next thema. Ga naar de Hexo map en kloon de Github repository van het thema naar de themes map.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Verander het /var/www/hexo/_config.yml bestand om het thema te veranderen van Landscape in Next.
$ nano _config.yml
Breng de verandering aan in de thema variabele om het thema om te schakelen.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Je kunt de thema instellingen veranderen door het /var/www/hexo/themes/next/_config.yml bestand te wijzigen.
Maak en publiceer een bericht
Tijd om onze eerste post te maken.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
Open het nieuwe bericht om het te bewerken.
$ nano ./source/_drafts/first-post.md
Elk bericht moet zijn front-matter ingesteld hebben. Voormaterie is een kort blok JSON of YAML dat essentiële gegevens instelt, zoals de titel van het bericht, publicatiedatum, categorieën, tags, enz. Vervang de standaard gegevens door de juiste opties.
title: Howtoforge's First Post
tags:
- test
categories:
- Hexo
comments: true
date: 2020-11-14 00:00:00
---
## Markdown goes here.
**This is our first post!**
Als je een afbeelding in je bericht wilt invoegen, voeg dan de volgende code toe in je bericht.
{% asset_img "example.jpg" "This is an example image" %}
Kopieer daarna het bestand example.jpg naar de map \source\_posts\first-post, waar alle afbeeldingen voor je eerste bericht vandaan gehaald worden.
Sla het bestand op door op Ctrl+X te drukken en Y in te voeren als daarom gevraagd wordt als je klaar bent met het schrijven van je bericht.
Vervolgens publiceer je het bericht.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
Dit bericht zal zichtbaar zijn zodra we het blog hosten.
Een Plugin installeren
Hexo heeft een paar honderd plugins die je kunt installeren. Je kunt een of meer plugins installeren, afhankelijk van je gebruik.
Alle Hexo plugins zijn Node.js pakketten en worden gehost op Github waar je hun installatie en configuratie details kunt vinden.
Voor onze zelfstudie installeren we de hexo-filter-nofollow plugin.
Zorg dat je eerst in de hexo directory bent en installeer dan de plugin.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
Open het Hexo configuratiebestand om te bewerken.
$ sudo nano _config.yml
Plak de volgende code aan het eind van het bestand.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
De optie enable schakelt de Plugin in. De field optie bepaalt de reikwijdte van de plugin, waarbij site het nofollow kenmerk toevoegt aan de externe links op de hele site en post het nofollow kenmerk alleen aan de links in de berichten. De exclude optie whitelists domeinen waarop het nofollow attribuut niet wordt toegevoegd.
Testserver
Hexo wordt geleverd met een eenvoudige webserver. Nu onze post gepubliceerd is, is het tijd om de Hexo testserver te starten.
$ hexo server
Je kunt nu de URL http://yourserverIP:4000 in je browser starten en je ziet de volgende pagina.
Sluit de server af door op Ctrl + C in de terminal te drukken.
Genereer Hexo Statische bestanden
De testserver van Hexo kan het blog zowel dynamisch als via de statische bestanden serveren. Het bovenstaande commando diende het blog dynamisch.
Er zijn verschillende manieren om Hexo blog publiekelijk te serveren. Voor onze tutorial zullen we de statische bestanden van Hexo serveren met behulp van Nginx server.
Voer het volgende commando uit om de statische bestanden te genereren.
$ hexo generate
Het bovenstaande commando genereert statische bestanden die worden opgeslagen in de map /var/www/hexo/public. We zullen Nginx server gebruiken om bestanden uit deze map te serveren.
Installeer en configureer Nginx
Installeer Nginx server.
$ sudo apt install nginx
Maak en open het Hexo configuratiebestand voor Nginx.
$ sudo nano /etc/nginx/sites-available/hexo.conf
Plak er de volgende code in.
server {
server_name hexo.example.com;
root /var/www/hexo/public;
index index.html index.htm;
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m; # about 40000 sessions
ssl_session_tickets off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25> ssl_prefer_server_ciphers off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
try_files $uri $uri/ =404;
}
}
server {
if ($host = hexo.example.com) {
return 301 https://$host$request_uri;
}
server_name hexo.example.com;
listen 80;
listen [::]:80;
return 404;
}
Sla het bestand op door op Ctrl+X te drukken en Y in te voeren als daarom gevraagd wordt.
Activeer de configuratie.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Open het /etc/nginx/nginx.conf bestand om het te bewerken.
$ sudo nano /etc/nginx/nginx.conf
Plak de volgende regel vóór de regel include /etc/nginx/conf.d/*.conf
server_names_hash_bucket_size 64;
Verander de waarde van de variabele types_hash_max_size van 2048 in 4096.
types_hash_max_size 4096;
Druk op Ctrl + X om de editor te sluiten en druk op Y als daarom gevraagd wordt om het bestand op te slaan.
Test om zeker te zijn dat er geen syntaxfouten in je configuratie zitten.
$ sudo nginx -t
Als er geen problemen zijn, herstart dan de Nginx server.
$ sudo systemctl restart nginx
Installeer SSL
Het is tijd om SSL te installeren met de Let's Encrypt dienst voor ons hexo blog.
Installeer daarvoor Certbot.
$ sudo apt install certbot
Stop Nginx want dat zal het Certbot proces hinderen.
$ sudo systemctl stop nginx
Genereer het certificaat. We moeten ook een DHParams certificaat maken.
$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
We moeten ook een cron job instellen om de SSL automatisch te vernieuwen. Om de crontab editor te openen, voer je het volgende commando uit.
$ sudo crontab -e
no crontab for root - using an empty one
Select an editor. To change later, run 'select-editor'.
1. /bin/nano <---- easiest
2. /usr/bin/vim.basic
3. /usr/bin/vim.tiny
4. /bin/ed
Choose 1-4 [1]: 1
Het bovenstaande commando opent de crontab editor. Als je het voor de eerste keer uitvoert, wordt je gevraagd de editor te kiezen voor het bewerken van Cron jobs. Kies 1 voor de Nano editor.
Plak de volgende regel onderaan.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
De bovenstaande cron job zal certbot elke dag om 2:25 uur laten lopen. Je kunt het veranderen in wat je maar wilt.
Bewaar het bestand door op Ctrl + X te drukken en Y in te voeren als daarom gevraagd wordt.
Werk Hexo bij
Schakel over naar de map Hexo.
$ cd /var/www/hexo
Als je overschakelt op een belangrijke Hexo versie, moet je het package.json bestand bijwerken. Open het om het te bewerken. Je kunt direct overslaan naar het update commando voor het bijwerken naar minder belangrijke versies.
$ nano package.json
Verander de volgende regel onder de rubriek dependencies.
"hexo": "^5.0.0",
Verander de waarde 5.0.0 in de volgende versie wanneer die in de toekomst uitkomt. Bijvoorbeeld, als Hexo 6.0 uit is, verander het dan in volgend.
"hexo": "^6.0.0",
Sla het bestand op door op Ctrl + X te drukken en Y in te voeren als daarom gevraagd wordt.
Voer het volgende commando uit om hexo bij te werken.
$ npm update
Hexo inzetten
Hexo kan niet alleen direct op je server gehost worden, maar kan ook direct ingezet worden op Git, Netlify, Vercel, Heroku, OpenShift en diverse andere methoden.
De meeste van de inzet-plugins vereisen dat je een plugin installeert. Voor onze tutorial zullen we Hexo's inzet naar Netlify instellen. Als je naar Netlify wilt inzetten, dan hoef je de stappen met betrekking tot Nginx en SSL niet te volgen, want Netlify komt met gratis SSL.
Een Netlify site wordt gewoonlijk ingezet vanuit een Git repository. Maar voor ons doel zullen we de statische site direct naar Netlify publiceren met zijn CLI gereedschap.
Installeer Netlify CLI.
$ sudo npm install netlify-cli -g
Je kunt controleren of het CLI gereedschap geïnstalleerd is.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Log in bij Netlify.
$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
Kopieer de login uit de terminal in je browser en log in op je Netlify account om te authentifceren.
Je kunt controleren of je ingelogd bent door het volgende commando te gebruiken.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email: [email protected]
Teams:
Your Team's team: Collaborator
Ga naar de publieke map van Hexo.
$ cd /var/www/hexo/public
Zet de site uit op Netlify.
$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge
Site Created
Admin URL: https://app.netlify.com/sites/Howtoforge
URL: https://Howtoforge.netlify.app
Site ID: 986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!
Logs: https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
Kies met de pijltjestoetsen om een nieuwe site te maken en voer een naam in voor je site. Voer . in als de directory om uit te zetten, die verwijst naar de huidige directory.
Je krijgt een ontwerp URL. Kopieer de URL en laad hem in een browser. Als alles er goed uitziet, voer dan het volgende commando uit om een productie deployment te doen.
$ netlify deploy --prod
Je site zou nu live moeten zijn. Je kunt een aangepast domein toevoegen in de Netlify instellingen om het naar een echte site te laten verwijzen.
Telkens als je een nieuw bericht publiceert en verse bestanden genereert, voer je het volgende commando uit vanuit Hexo's hoofdmap om de veranderingen naar Netlify te deployen.
$ netlify deploy --dir ./public --prod
Conclusie
Dit is het einde van onze handleiding om een blog te installeren en te maken met het Hexo Blog raamwerk op een Ubuntu 20.04 gebaseerde server. Als je vragen hebt, stel ze dan in de opmerkingen hieronder.