Sådan bygges din blog på DigitalOcean med Ghost og Next.js

Sådan bygger du din blog på DigitalOcean med Ghost og Next.js

Introduktion

Som spirende blogger eller indholdsskaber er det afgørende at have en pålidelig og effektiv platform til at hoste din blog på. DigitalOcean tilbyder en række cloud-løsninger, der er skræddersyet til webudviklere og bloggere.

Denne vejledning fører dig gennem de trinvise instruktioner om, hvordan du bygger en blog på DigitalOcean ved hjælp af Ghost, et populært open source CMS designet til bloggere, og Next.js, et React-baseret framework til statisk webstedsgenerering.

Trin 1: Opret en DigitalOcean-konto

Gå til DigitalOcean-webstedet og opret en konto. Derefter kan du vælge en plan, der opfylder dine behov og budget.

Trin 2: Opret en Droplet

En Droplet er en virtuel server, der hoster din blog. Vælg en Droplet-størrelse med tilstrækkelig RAM, CPU og lagerplads til dine blogbehov. Optimer dit valg i henhold til den forventede trafik og indholdsmængde.

Trin 3: Installer Ubuntu

Når du opretter din Droplet, skal du vælge Ubuntu som operativsystem. Ubuntu er et open source-operativsystem designet til servere og er et fremragende valg til webhosting.

Trin 4: Opdater Ubuntu

Efter installationen af Ubuntu skal du opdatere systemet for at sikre, at du har de nyeste sikkerhedsopdateringer og pakker. Kør følgende kommandoer i din terminal:

  Føj 5 vigtige opgaver til siden Ny fane [Chrome]


sudo apt update
sudo apt upgrade

Trin 5: Installer Ghost

Ghost kan nemt installeres på Ubuntu ved hjælp af følgende kommando:


curl -sSL https://ghost.org/zip/ghost-latest.zip | sudo tar -xz -C /usr/local/lib/
sudo ln -s /usr/local/lib/ghost/bin/ghost /usr/local/bin/
sudo chown -R ghost:ghost /var/www/ghost

Trin 6: Konfigurer Ghost

Når Ghost er installeret, skal du konfigurere det ved at oprette et konfigurationsfil i /etc/ghost/config.js:


{
"url": "https://dit-domæne.dk",
"database": {
"client": "sqlite3",
"connection": {
"filename": "/var/www/ghost/data/ghost.db"
}
},
"mail": {
"transport": "sendmail",
"from": "no-reply@dit-domæne.dk"
}
}

Trin 7: Installer Nginx

Nginx er en webserver, der vil håndtere anmodninger til din blog. Installer Nginx med denne kommando:


sudo apt install nginx

Trin 8: Konfigurer Nginx

Opret en Nginx-konfigurationsfil i /etc/nginx/sites-available/ghost med følgende indhold:


server {
listen 80;
server_name dit-domæne.dk;

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

Trin 9: Aktivér Nginx

Aktivér Nginx-konfigurationsfilen og genindlæs Nginx med disse kommandoer:


sudo ln -s /etc/nginx/sites-available/ghost /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Trin 10: Implementer Next.js

Next.js bruges til at generere statiske sider fra din Ghost-backend. Opret en mappe til Next.js i /var/www/ghost/content og initialiser et nyt Next.js-projekt:


cd /var/www/ghost/content
mkdir nextjs
cd nextjs
npx create-next-app .

Trin 11: Opret Next.js-konfigurationsfil

Opret en next.config.js-fil i din Next.js-mappe med følgende indhold:


const withGhost = require('@tryghost/next');
const path = require('path');

module.exports = withGhost({
pageExtensions: ['md', 'js', 'jsx'],
images: {
domains: ['dit-domæne.dk'],
},
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias = {
...config.resolve.alias,
'@components': path.resolve(__dirname, './components'),
'@pages': path.resolve(__dirname, './pages'),
};

return config;
},
});

Trin 12: Implementer Next.js-sider

Opret Next.js-sider til dine blogindlæg i pages-mappen. Opret en side for hvert blogindlæg, f.eks. [slug].js.

Trin 13: Opdater Ghost-tema

Opdater dit Ghost-tema for at bruge Next.js-sider. I din Ghost-temamappe skal du redigere default.hbs-filen og tilføj følgende kode til {{body}}-delen:


{{> nextjs }}

Konklusion

Ved at følge trinnene beskrevet i denne vejledning med succes har du oprettet en fuldt funktionel blog hostet på DigitalOcean ved hjælp af Ghost og Next.js. Denne opsætning giver dig en effektiv og pålidelig platform til at nå ud til dit publikum og dele dit indhold med verden. Husk at overvåge din blog regelmæssigt, sikkerhedskopiere dine data og holde dit system opdateret for at sikre optimal ydeevne og sikkerhed.

FAQ

1. Hvad er fordelene ved at bruge Ghost til blogging?
Ghost er designet specifikt til blogging og leverer funktioner som indholdsstyring, brugervenligt brugerinterface og optimeret ydeevne.

2. Hvordan forbedrer Next.js min blogs ydeevne?
Next.js genererer statiske sider, hvilket reducerer serverbelastningen og forbedrer indlæsningshastigheder og samlet brugeroplevelse.

3. Er denne opsætning sikker?
DigitalOcean giver sikker cloud-hosting med firewalls, SSH-adgangsnøgler og automatiske sikkerhedsopdateringer. Ghost og Nginx er også kendt for deres sikkerhedsfunktioner.

4. Kan jeg bruge et andet domænenavn?
Ja, du kan bruge et hvilket som helst domænenavn, der er registreret for dig. Konfigurer blot opsætningen i henhold til dit valgte domænenavn.

5. Kan jeg tilføje ekstra funktioner til min blog?
Ja, du kan udvide funktionaliteten af din blog ved at installere plugins eller integrere tredjepartstjenester ved hjælp af Nginx-proxy-konfiguration.

6. Hvor kan jeg få support, hvis jeg støder på problemer?
DigitalOcean tilbyder support døgnet rundt, og Ghost- og Next.js-fællesskaberne er meget aktive og hjælpsomme.

7. Hvor meget koster det at hoste min blog på DigitalOcean?
Omkostningerne afhænger af den valgte Droplet-størrelse og eventuelle yderligere tjenester, du kan vælge. Se DigitalOceans prissætningsside for detaljer.

8. Kan jeg bruge min egen tilpassede CSS og JavaScript?
Ja, du kan tilpasse udseendet og funktionaliteten af din blog ved at tilføje dine egne CSS- og JavaScript-filer i Next.js-projektet.