Bygg din Ghost-blogg på DigitalOcean med Next.js: Steg-for-steg guide!

Innledning

Å starte en blogg kan være en utmerket måte å formidle dine tanker, ideer og interesser til et bredere publikum. Ved hjelp av de rette plattformene og verktøyene, kan du enkelt etablere en profesjonell og brukervennlig blogg som treffer mange lesere. I denne guiden skal vi vise deg hvordan du setter opp din blogg på DigitalOcean ved å kombinere Ghost, et populært publiseringssystem, med Next.js, et moderne JavaScript-rammeverk.

Hva er Ghost?

Ghost er et publiseringssystem med åpen kildekode, spesifikt utviklet for blogging. Systemet er kjent for sin enkelhet, raske ytelse og brukervennlighet. Ghost tilbyr flere funksjoner som gjør det til et ideelt valg for bloggere, inkludert:

• Et oversiktlig og intuitivt brukergrensesnitt
• Støtte for Markdown-redigering
• Innebygd SEO-optimalisering
• Fleksible temaer og muligheter for tilpasning

Hva er Next.js?

Next.js er et JavaScript-rammeverk som forenkler utviklingen av statiske og servergjengitte webapplikasjoner. Det gir webutviklere en rekke fordeler, som blant annet:

• Server-side rendering for forbedret ytelse
• Komponentbasert arkitektur som fremmer gjenbrukbarhet
• Støtte for statisk generering, som gir raskere innlastingstider

Konfigurering av serveren

Før du kan begynne å installere Ghost og Next.js, må du sette opp en server. DigitalOcean er en populær og kostnadseffektiv leverandør av skytjenester. Vi anbefaler å benytte en Droplet med minimum 1 GB RAM og 20 GB SSD-lagring.

1. Opprett en DigitalOcean-konto på https://digitalocean.com.
2. Opprett en Droplet i kontrollpanelet ditt. Velg et passende operativsystem (vi anbefaler Ubuntu 20.04) og størrelse.
3. Få tilgang til serveren din via SSH ved å bruke følgende kommando (erstatt [droplet_ip_address] med IP-adressen til din Droplet):

   ssh root@[droplet_ip_address]

Installere Ghost

1. Oppdater pakkelister og installer nødvendige pakker:

   apt-get update
apt-get install -y nginx certbot python3-certbot-nginx

2. Opprett en ny Ghost-bruker:

   useradd --system --shell /bin/false ghost

3. Last ned Ghost:

   wget https://ghost.org/zip/ghost-latest.zip

4. Pakk ut Ghost-arkivet:

   unzip ghost-latest.zip

5. Flytt Ghost-mappen:

   mv ghost /var/www/ghost

6. Gi Ghost-brukeren eierskap over Ghost-mappen:

   chown -R ghost:ghost /var/www/ghost

Konfigurere Ghost

1. Opprett en konfigurasjonsfil for systemd:

   nano /etc/systemd/system/ghost.service

2. Kopier og lim inn følgende:

   [Unit]
   Description=Ghost
   After=nginx.service

   [Service]
   User=ghost
   Group=ghost
   WorkingDirectory=/var/www/ghost
   ExecStart=/var/www/ghost/bin/ghost start
   ExecReload=/bin/kill -s HUP $MAINPID
   Restart=on-failure

   [Install]
   WantedBy=multi-user.target

3. Lagre filen og start Ghost:

   systemctl start ghost
systemctl enable ghost

4. Konfigurer brannmur:

   ufw allow 2368
ufw reload

Installere Next.js

1. Installer Node.js og npm:

   apt-get install -y nodejs npm

2. Opprett et nytt Next.js-prosjekt:

   npx create-next-app my-next-app --typescript

3. Naviger til Next.js-prosjektmappen:

   cd my-next-app

4. Installer avhengigheter:

   npm install

Integrere Ghost og Next.js

1. Opprett en ny API-nøkkel i Ghost:
   • Logg inn på Ghost-administrasjonspanelet.
   • Naviger til Integrasjoner > API Keys.
   • Klikk på Add New Key.
2. Oppdater next.config.js-filen i Next.js-prosjektet:

   // next.config.js
module.exports = {
env: {
GHOST_API_KEY: process.env.GHOST_API_KEY,
},
};

3. Angi miljøvariabelen GHOST_API_KEY med API-nøkkelen fra Ghost:

   export GHOST_API_KEY=[your_ghost_api_key]

4. Opprett en ny side i Next.js-prosjektet (f.eks. pages/blog.tsx):

   // pages/blog.tsx
import { GhostProvider, Post, Pagination } from '@tryghost/next';

   export default function Blog() {
return (
<GhostProvider>
<div>
<h1>Blog</h1>
<Pagination />
<div className="posts">
<Post />
<Post />
<Post />
</div>
</div>
</GhostProvider>
);
}

Konfigurere Nginx

1. Åpne Nginx-konfigurasjonsfilen:

   nano /etc/nginx/sites-available/ghost

2. Erstatt standardkonfigurasjonen med følgende:

   server {
listen 80;
server_name your-domain.com;
return 301 https://$host$request_uri;
}

   server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;

   location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://127.0.0.1:2368;
}
}

3. Aktiver Ghost-konfigurasjonen:

   ln -s /etc/nginx/sites-available/ghost /etc/nginx/sites-enabled/ghost

4. Last inn Nginx på nytt:

   systemctl reload nginx

Konfigurere SSL med Certbot

1. Installer Certbot:

   apt-get install -y certbot python3-certbot-nginx

2. Kjør Certbot:

   certbot --nginx

3. Følg instruksjonene på skjermen for å opprette og installere SSL-sertifikater.

Konklusjon

Gratulerer! Du har nå satt opp en profesjonell og brukervennlig blogg ved hjelp av Ghost og Next.js på DigitalOcean. Gjennom denne guiden har vi vist deg hvert trinn i prosessen, fra konfigurering av serveren til integrering av Ghost og Next.js. Med sitt rene brukergrensesnitt, kraftige funksjoner og mange tilpasningsmuligheter, er bloggen din nå klar til å dele innholdet ditt med hele verden.

Ofte stilte spørsmål

1. Hvordan oppdaterer jeg Ghost?
Oppdater Ghost ved å navigere til Ghost-mappen (/var/www/ghost) og kjøre følgende kommando:
cd /var/www/ghost
git pull
ghost update

2. Hvordan tar jeg sikkerhetskopi av bloggen min?
Du kan ta sikkerhetskopi av bloggen din via Ghost-grensesnittet (Innstillinger > Generelt > Import/Eksport). Alternativt kan du bruke en automatisk løsning som Ghost Backup.

3. Hvordan legger jeg til et nytt tema på bloggen min?
Du kan laste opp nye temaer til bloggen din via Ghost-administrasjonspanelet.