Innholdsfortegnelse
Hvordan bygge bloggen din på DigitalOcean med Ghost og Next.js
Introduksjon
Å bygge en blogg kan være en givende måte å dele tankene, ideene og lidenskapene dine med verden. Med riktig plattform og verktøy kan du enkelt opprette en profesjonell og brukervennlig blogg som når et bredt publikum. I denne veiledningen vil vi guide deg gjennom trinnene for å bygge bloggen din på DigitalOcean ved hjelp av Ghost, et populært publiseringssystem, og Next.js, et moderne JavaScript-rammeverk.
Hva er Ghost?
Ghost er et åpent kildekode-publiseringssystem designet spesielt for blogging. Det er kjent for sin enkelhet, hastighet og brukervennlighet. Ghost tilbyr en rekke funksjoner som gjør det til et ideelt valg for bloggere, inkludert:
– Et rent og intuitivt grensesnitt
– Støtte for Markdown-redigering
– Integrert SEO-optimalisering
– Fleksible temaer og tilpasningsmuligheter
Hva er Next.js?
Next.js er et JavaScript-rammeverk som gjør det enkelt å bygge statiske og servergjengitte webapplikasjoner. Det tilbyr en rekke fordeler for webutviklere, blant annet:
– Server-side gjengivelse for optimal ytelse
– Komponentbasert arkitektur for gjenbrukbarhet
– Støtte for statisk generering for raskere lastetider
Konfigurere serveren din
Før du kan installere Ghost og Next.js, må du konfigurere en server. DigitalOcean er en populær og rimelig leverandør av skytjenester. Vi anbefaler å bruke en Droplet med minst 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 bilde (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 Droplet din):
bash
ssh root@[droplet_ip_address]
Installere Ghost
1. Oppdater pakkekilder og installer pakker:
bash
apt-get update
apt-get install -y nginx certbot python3-certbot-nginx
2. Opprett en ny Ghost-bruker:
bash
useradd --system --shell /bin/false ghost
3. Last ned Ghost:
bash
wget https://ghost.org/zip/ghost-latest.zip
4. Pakk ut Ghost-arkivet:
bash
unzip ghost-latest.zip
5. Flytt Ghost-katalogen:
bash
mv ghost /var/www/ghost
6. Gi Ghost-brukeren eierskap over Ghost-katalogen:
bash
chown -R ghost:ghost /var/www/ghost
Konfigurere Ghost
1. Opprett en konfigurasjonsfil for systemd:
bash
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:
bash
systemctl start ghost
systemctl enable ghost
4. Konfigurer brannmur:
bash
ufw allow 2368
ufw reload
Installere Next.js
1. Installer Node.js og npm:
bash
apt-get install -y nodejs npm
2. Opprett et nytt Next.js-prosjekt:
bash
npx create-next-app my-next-app --typescript
3. Naviger til Next.js-prosjektmappen:
bash
cd my-next-app
4. Installer avhengigheter:
bash
npm install
Integrere Ghost og Next.js
1. Opprett en ny API-nøkkel i Ghost:
– Logg inn på Ghost-dashbordet ditt.
– Gå til Integrations* > *API Keys.
– Klikk på Add New Key.
2. Oppdater next.config.js-filen i Next.js-prosjektet ditt:
javascript
// next.config.js
module.exports = {
env: {
GHOST_API_KEY: process.env.GHOST_API_KEY,
},
};
3. Sett miljøvariabelen GHOST_API_KEY med verdien til API-nøkkelen fra Ghost:
bash
export GHOST_API_KEY=[your_ghost_api_key]
4. Opprett en ny side i Next.js-prosjektet ditt (for eksempel pages/blog.tsx):
typescript
// 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:
bash
nano /etc/nginx/sites-available/ghost
2. Erstatt standardkonfigurasjonen med følgende:
nginx
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:
bash
ln -s /etc/nginx/sites-available/ghost /etc/nginx/sites-enabled/ghost
4. Last inn Nginx på nytt:
bash
systemctl reload nginx
Konfigurere SSL med Certbot
1. Installer Certbot:
bash
apt-get install -y certbot python3-certbot-nginx
2. Kjør Certbot:
bash
certbot --nginx
3. Følg instruksjonene på skjermen for å opprette og installere SSL-sertifikater.
Konklusjon
Gratulerer! Du har nå bygget en profesjonell og brukervennlig blogg ved hjelp av Ghost og Next.js på DigitalOcean. Gjennom denne veiledningen har vi guidet deg gjennom hvert trinn i prosessen, fra å konfigurere serveren din til å integrere Ghost og Next.js. Med sitt rene grensesnitt, kraftige funksjoner og fleksible tilpasningsmuligheter, er bloggen din nå klar til å dele innholdet ditt med verden.
Vanlige spørsmål
1. Hvordan oppdaterer jeg Ghost?
Oppdater Ghost ved å navigere til Ghost-katalogen (/var/www/ghost) og kjøre følgende kommando:
bash
cd /var/www/ghost
git pull
ghost update
2. Hvordan sikkerhetskopierer jeg bloggen min?
Du kan sikkerhetskopiere bloggen din ved å bruke Ghost-grensesnittet (Settings* > **General** > *Import/Export). Alternativt kan du bruke en automatisert løsning som Ghost Backup.
3. Hvordan legger jeg til et nytt tema til bloggen min?
Du kan legge til nye temaer til bloggen din ved å laste dem opp til Ghost-dashbordet (