Jak vytvořit svůj blog na DigitalOcean s Ghost a Next.js
Blogování se stalo klíčovým prvkem digitálního marketingu a platformou pro sdílení myšlenek. Pro úspěšný blog je nezbytná spolehlivá platforma, která kombinuje výkon, flexibilitu a jednoduché ovládání. V tomto článku si ukážeme, jak vytvořit blog na DigitalOcean za použití Ghost a Next.js.
Ghost je open-source blogovací platforma, ceněná pro svou rychlost, bezpečnost a intuitivní rozhraní. Next.js je framework pro React, který umožňuje vytvářet webové aplikace s renderingem na straně serveru. Spojením Ghost a Next.js získáte robustní a vizuálně atraktivní blog.
Začínáme
1. Registrace na DigitalOcean
Začněte vytvořením účtu na DigitalOcean. Navštivte stránku https://www.digitalocean.com/ a klikněte na "Registrace". Vyplňte potřebné údaje a potvrďte svou e-mailovou adresu.
2. Vytvoření Dropletu
Po registraci vytvořte Droplet (virtuální server). Na řídicím panelu klikněte na "Vytvořit" a vyberte obraz "Ubuntu 20.04". Zvolte velikost Dropletu a umístění datového centra.
3. Připojení k Dropletu
Po vytvoření Dropletu si zapište jeho IP adresu. Připojte se k němu přes SSH. Otevřete terminál a vložte příkaz, nahraďte [droplet_ip_address] IP adresou vašeho Dropletu:
ssh root@[droplet_ip_address]
Instalace Ghost a Next.js
1. Instalace Ghost
Nejprve aktualizujte správce balíčků apt:
sudo apt update
Poté nainstalujte Ghost:
sudo apt install ghost
2. Instalace Next.js
Vytvořte nový adresář pro projekt Next.js:
mkdir ghost-nextjs-blog
cd ghost-nextjs-blog
Inicializujte projekt Next.js:
npx create-next-app .
3. Konfigurace Next.js
Do souboru package.json přidejte následující skript:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
Konfigurace databáze
1. Vytvoření MySQL databáze
Připojte se k MySQL pomocí příkazu:
mysql -u root -p
Vytvořte novou databázi:
CREATE DATABASE ghost_db;
Vytvořte nového uživatele a udělte mu práva:
CREATE USER 'ghost_user'@'localhost' IDENTIFIED BY 'ghost_password';
GRANT ALL PRIVILEGES ON ghost_db.* TO 'ghost_user'@'localhost';
2. Konfigurace Ghost
Otevřete soubor /etc/ghost/config.production.json a aktualizujte nastavení databáze:
{
"database": {
"client": "mysql",
"connection": {
"host": "127.0.0.1",
"user": "ghost_user",
"password": "ghost_password",
"database": "ghost_db"
}
}
}
Nastavení proxy
Nainstalujte nginx:
sudo apt install nginx
Přidejte novou konfiguraci webu do /etc/nginx/sites-available/ghost-nextjs-blog:
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass http://localhost:2368;
}
location /api {
proxy_pass http://localhost:2368/api;
}
}
Povolte nový web:
sudo ln -s /etc/nginx/sites-available/ghost-nextjs-blog /etc/nginx/sites-enabled/
Restartujte nginx:
sudo systemctl restart nginx
Nasazení Next.js
Do souboru index.js v projektu Next.js přidejte:
import Head from 'next/head'
import { useContext } from 'react'
import { GhostProvider, GhostContext } from '@tryghost/next'
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<title>Můj blog na Ghost s Next.js</title>
</Head>
<GhostProvider>
<Component {...pageProps} />
</GhostProvider>
</>
)
}
Vytvořte nový soubor pages/post.js:
import { useContext } from 'react'
import { GhostContext } from '@tryghost/next'
import Markdown from 'markdown-to-jsx'
export default function Post({ post }) {
const { api } = useContext(GhostContext)
return (
<>
<Markdown>{post.html}</Markdown>
</>
)
}
Vytvořte stránku api/ghost v projektu Next.js pro získávání dat z Ghost API:
import { NextResponse } from 'next/server'
export default async function handler(req, res) {
const apiUrl = 'http://localhost:2368/ghost/api/v3/content'
const requestHeaders = {
'Authorization': Bearer ${process.env.GHOST_API_KEY},
}
try {
const response = await fetch(apiUrl, { headers: requestHeaders })
const data = await response.json()
return NextResponse.json(data)
} catch (error) {
console.log(error)
return NextResponse.json({ error: 'Chyba při načítání dat z Ghost API.' })
}
}
Závěr
Úspěšně jste vytvořili blog na DigitalOcean s pomocí Ghost a Next.js. Ghost nabízí jednoduché a výkonné rozhraní pro správu obsahu, zatímco Next.js zajišťuje flexibilitu a výkon potřebný pro vizuálně atraktivní a rychlý web. Tato kombinace vám pomůže vytvořit úspěšný blog, který zaujme vaše publikum a posílí vaši online přítomnost.
Tento návod je pouze základní konfigurací. Pro pokročilejší funkce a úpravy si prostudujte dokumentaci Ghost a Next.js.
Často kladené otázky (FAQ)
1. Jak mohu přidat vlastní doménu k blogu?
Pro použití vlastní domény upravte DNS a přidejte A záznam směřující na IP adresu vašeho Dropletu.
2. Jak mohu přidat šablonu do blogu?
Ghost nabízí různé šablony, které můžete nainstalovat přes administraci. Můžete si také vytvořit vlastní šablonu.
3. Jak nastavím SSL pro blog?
K získání SSL certifikátu si jej zakupte od certifikační autority a poté konfigurujte nginx pro jeho použití.
4. Jak mohu blog zálohovat?
Ghost umožňuje zálohování prostřednictvím administrace. Můžete také nastavit automatické zálohování.
5. Jak přidám uživatele do blogu?
Uživatele můžete přidávat v administraci Ghost. Ghost podporuje různé uživatelské role.
6. Jak přidám analytické nástroje?
Pro analýzu můžete použít Google Analytics nebo jiné analytické služby.
7. Jak přidám komentáře?
Ghost má vestavěný systém komentářů, který můžete aktivovat. Lze integrovat i externí systémy, jako je Disqus.
8. Jak optimalizuji blog pro vyhledávače?
Použijte SEO techniky, jako je analýza klíčových slov, optimalizace obsahu a budování zpětných odkazů.
