Како изградити свој блог на DigitalOcean-у са Ghost-ом и Next.js-ом

by
Tweet
Share
Share
Pin

Da li ste oduvek želeli da pokrenete sopstveni blog, ali niste znali odakle da počnete? Ovaj detaljni vodič će vam pokazati sve što je potrebno da znate o postavljanju bloga na DigitalOcean platformi, koristeći Ghost i Next.js. Ovo je idealna kombinacija za sve koji žele da započnu blogersku karijeru, bez obzira na nivo tehničkog znanja.

U ovom sveobuhvatnom tekstu, pronaći ćete detaljna uputstva i objašnjenja, potkrepljena odgovarajućim kodovima, koji će vam omogućiti da lako instalirate i konfigurišete svoj blog. Takođe ćemo podeliti najbolje prakse i resurse za dalju optimizaciju vašeg bloga.

Šta je Ghost?

Ghost je besplatan, open-source sistem za upravljanje sadržajem (CMS), specijalno dizajniran za blogovanje. Njegov jednostavan i intuitivan korisnički interfejs omogućava vam da brzo i lako kreirate i uređujete postove na blogu. Ghost takođe poseduje mnoge korisne funkcionalnosti koje će poboljšati vaše blogersko iskustvo, kao što su podrška za više autora, zakazivanje objava i optimizacija za pretraživače (SEO).

Šta je Next.js?

Next.js je React frejmvork koji olakšava kreiranje brzih i dinamičnih veb aplikacija. On pojednostavljuje upotrebu server-side renderinga (SSR) i static site generationa (SSG), što značajno poboljšava brzinu i performanse vašeg bloga.

Podešavanje DigitalOcean Dropleta

Korak 1: Kreiranje DigitalOcean naloga

Posetite DigitalOcean i kreirajte besplatan nalog.

Korak 2: Kreiranje Dropleta

Kliknite na dugme „Create“ i izaberite „Droplet“ iz menija. Prilagodite sledeće opcije:

  • Naziv Dropleta: Izaberite jedinstveno ime za svoj Droplet.
  • Region podataka: Odaberite region koji je geografski najbliži vašoj ciljnoj publici.
  • Veličina: Izaberite odgovarajuću veličinu Dropleta u zavisnosti od vaših potreba.
  • Slika: Odaberite „Ubuntu 20.04 x64“.

Kliknite na „Create Droplet“ da pokrenete proces instalacije.

Instalacija Ghosta

Korak 1: Ažuriranje sistema

Povežite se na svoj Droplet putem SSH i ažurirajte sistem:

sudo apt-get update
sudo apt-get upgrade

Korak 2: Instalacija Node.js i NPM

Instalirajte najnovije verzije Node.js i NPM:

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Korak 3: Instalacija Ghosta

Instalirajte Ghost koristeći sledeću komandu:

npm install ghost-cli@latest -g

Korak 4: Pokretanje Ghosta

Pokrenite Ghost sa sledećom komandom:

ghost install local

Nakon završetka, Ghost će biti dostupan na http://localhost:2368.

Integracija sa Next.js

Korak 1: Kreiranje Next.js aplikacije

Kreirajte novi direktorijum za vašu Next.js aplikaciju i pređite u taj direktorijum:

mkdir my-blog
cd my-blog

Inicijalizujte Next.js aplikaciju:

npx create-next-app .

Korak 2: Instalacija Ghost API klijenta

Instalirajte Ghost API klijenta za Next.js:

npm install ghost-api-client

Korak 3: Konfigurisanje Ghost API-ja

Konfigurišite svoj Ghost API kreiranjem .env.local fajla u direktorijumu vaše Next.js aplikacije i dodavanjem sledećih linija:

GHOST_URL=http://localhost:2368
GHOST_API_KEY=your-ghost-api-key

Korak 4: Kreiranje stranica

Kreirajte stranice za vaš blog, na primer, početnu, arhivsku stranicu i stranicu za prikazivanje pojedinačnih postova.

Korak 5: Povezivanje sa Ghostom

Koristite Ghost API klijenta u svom Next.js kodu za preuzimanje podataka iz Ghosta. Na primer, možete preuzeti sve objave sa bloga za stranicu sa arhivom:

import { GhostAPI } from "@tryghost/api";

const ghost = new GhostAPI({ url: process.env.GHOST_URL, apiKey: process.env.GHOST_API_KEY });

export async function getStaticProps() {
  const posts = await ghost.posts.browse();
  return { props: { posts } };
}

export default function ArchivePage({ posts }) {
  return (
    <div>
      <h2>Arhiva</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Konfiguracija SSL sertifikata

Za uspostavljanje bezbedne veze, neophodno je konfigurirati SSL sertifikate na vašem DigitalOcean Droplet-u.

Korak 1: Dobavljanje SSL sertifikata

Nabavite besplatan SSL sertifikat od provajdera kao što je Let’s Encrypt.

Korak 2: Instalacija Certbota

Instalirajte Certbot, alat za automatsko upravljanje SSL sertifikatima:

sudo apt-get install certbot

Korak 3: Implementacija SSL sertifikata

Implementirajte SSL sertifikat na svoj Ghost Droplet:

sudo certbot --ghost --email [email protected]

Optimizacija performansi

Korak 1: Instalacija Memcached-a

Instalirajte Memcached na svom Droplet-u za keširanje podataka:

sudo apt-get install memcached

Korak 2: Konfigurisanje Ghosta za korišćenje Memcached-a

Konfigurišite Ghost da koristi Memcached:

Otvorite konfiguracioni fajl Ghosta:

sudo nano /var/www/ghost/config.production.json

Dodajte sledeći kod u fajl:

"cache": {
  "store": "memcached"
}

Korak 3: Konfigurisanje Next.js-a za korišćenje keširanja

Konfigurišite Next.js da koristi keširanje:

Otvorite fajl next.config.js:

nano next.config.js

Dodajte sledeći kod u fajl:

module.exports = {
  env: {
    CACHE_ENABLED: true
  }
}

Zaključak

Čestitamo, sada imate potpuno funkcionalan blog izgrađen na DigitalOcean-u, koristeći Ghost i Next.js! Ovaj vodič vas je proveo kroz sve bitne korake za postavljanje, konfiguraciju i optimizaciju vašeg bloga. Važno je napomenuti da ovo predstavlja samo temelj, a postoji mnogo dodatnih prilagođavanja i poboljšanja koje možete implementirati.