Jak vytvořit svůj blog na DigitalOcean s Ghost a Next.js
Table of Contents
Úvod
Blogování se stalo nezbytnou součástí digitálního marketingu a sdílení znalostí. Vytvoření úspěšného blogu vyžaduje spolehlivou platformu, která poskytuje výkon, flexibilitu a uživatelsky přívětivé rozhraní. V tomto článku vás provedeme procesem vytváření blogu na DigitalOcean pomocí Ghost a Next.js.
Ghost je open-source platforma pro blogování, která je známá svou rychlostí, zabezpečením a snadným používáním. Next.js je rámec React pro vytváření serverově vykreslovaných webových aplikací. Kombinace Ghost a Next.js vám umožní vytvořit výkonný a vizuálně přitažlivý blog.
Začínáme
1. Vytvoření účtu DigitalOcean
Prvním krokem je vytvoření účtu u DigitalOcean. Přejděte na https://www.digitalocean.com/ a klikněte na tlačítko „Registrace“. Zadejte své údaje a potvrďte svůj e-mailovou adresu.
2. Vytvoření Dropletu
Po vytvoření účtu budete muset vytvořit Droplet (virtuální privátní server). Klikněte na tlačítko „Vytvořit“ na řídicím panelu a vyberte obrázek „Ubuntu 20.04“. Zadejte velikost Dropletu a název datového centra.
3. Připojení k Dropletu
Po vytvoření Dropletu si poznačte jeho IP adresu. Budete se k němu muset připojit pomocí SSH. Otevřete terminál a zadejte následující příkaz, přičemž nahradíte [droplet_ip_address] skutečnou IP adresou vašeho Dropletu:
ssh root@[droplet_ip_address]
Instalace Ghost a Next.js
1. Instalace Ghost
Nejprve aktualizujte 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
Přidejte následující skript do souboru package.json:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
Konfigurace databáze
1. Vytvoření databáze MySQL
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ělejte 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
Přidejte následující do index.js v projektu Next.js:
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 Ghost blog pomocí 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
Nyní máte funkční blog na DigitalOcean pomocí Ghost a Next.js. Ghost zajišťuje jednoduché a výkonné rozhraní pro správu obsahu, zatímco Next.js poskytuje flexibilitu a výkon potřebné pro vytvoření vizuálně přitažlivého a rychlého webu. Tato kombinace vám pomůže vytvořit úspěšný blog, který osloví vaše publikum a vybuduje vaši online přítomnost.
Upozorňujeme, že tento návod slouží pouze pro základní konfiguraci. Pro pokročilejší funkce a přizpůsobení neváhejte prozkoumat dokumentaci Ghost a Next.js.
Často kladené otázky (FAQ)
1. Jak mohu přidat vlastní doménu do svého blogu?
* Pro přidání vlastní domény aktualizujte soubory DNS a vytvořte záznam A pro IP adresu vašeho Dropletu.
2. Jak mohu přidat téma do svého blogu?
* Ghost nabízí různá témata, která můžete nainstalovat prostřednictvím administrace Ghost. Můžete si také vytvořit své vlastní téma.
3. Jak mohu nastavit SSL pro svůj blog?
* Pro nastavení SSL pro svůj blog si můžete zakoupit certifikát SSL od certifikační autority a nakonfigurovat nginx tak, aby jej používal.
4. Jak mohu zálohovat svůj blog?
* Ghost nabízí možnost zálohování prostřednictvím administrace. Můžete také nastavit automatické zálohování.
5. Jak mohu přidat uživatele do svého blogu?
* Uživatele můžete přidat prostřednictvím administrace Ghost. Ghost podporuje různé role uživatelů.
6. Jak mohu přidat analýzy do svého blogu?
* Pro přidání analýz do svého blogu můžete použít Google Analytics nebo jiné služby analýz.
7. Jak mohu přidat komentáře do svého blogu?
* Ghost má integrovaný systém komentářů, který můžete aktivovat prostřednictvím administrace. Můžete také integrovat externí systémy komentářů, jako je Disqus.
8. Jak mohu optimalizovat svůj blog pro vyhledávače?
* Pro optimalizaci svého blogu pro vyhledávače můžete použít různé techniky SEO, jako je výzkum klíčových slov, optimalizace obsahu a budování zpětných odkazů.