Jak si postavit blog na DigitalOcean s Ghost a Next.js

Jak si postavit blog na DigitalOcean s Ghost a Next.js

Úvod

Vytvoření osobního blogu může být skvělý způsob, jak sdílet své myšlenky, nápady a zkušenosti se světem. S dostupností robustních a uživatelsky přívětivých platforem, jako jsou Ghost a Next.js, je nyní jednodušší než kdy jindy vytvořit si vlastní blog. V tomto článku vás provedeme podrobným návodem, jak si vytvořit blog na DigitalOcean pomocí Ghost a Next.js.

Ghost – Bezplatná platforma pro blogování

Ghost je open-source publikační platforma, která je speciálně navržena pro blogování. Nabízí jednoduché a intuitivní rozhraní, které vám umožní soustředit se na psaní, nikoli na technické detaily. S Ghost získáte přístup k řadě funkcí, jako je:

* Editor v reálném čase s živým náhledem
* Správa více autorů a uživatelských rolí
* Publikační kalendář a plánování příspěvků
* Integrace sociálních médií a SEO nástrojů

Next.js – Framework pro statické webové stránky

Next.js je open-source framework pro vytváření statických webových stránek, který využívá React.js. Poskytuje řadu funkcí, jako je:

* Generování statických stránek pro rychlý výkon
* Server-side rendering pro lepší SEO
* Podpora automatického dělení kódu a dynamické trasování
* Integrace s různými databázemi a API

Nastavení infrastruktury s DigitalOcean

Prvním krokem je nastavení infrastruktury na DigitalOcean. Postupujte takto:

1. Vytvořte droplet

Vytvořte droplet s následujícími specifikacemi:

* Obraz: Ubuntu 20.04 x64
* Velikost: alespoň 1 GB RAM, 25 GB SSD
* Region: Zvolte region nejblíže vaší cílové skupině

2. Připojte se k droplet

K droplet se připojte pomocí SSH:


ssh root@<vaše_ip_adresa>


3. Nastavte doménové jméno

Nastavte doménové jméno pro svůj blog na DigitalOcean DNS.

4. Nainstalujte Node.js a npm

Nainstalujte Node.js a npm:


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


5. Nainstalujte Ghost-CLI

Nainstalujte Ghost-CLI:


npm install -g @ghost/cli


Instalace Ghostu

Nainstalujte Ghost s Ghost-CLI:


ghost install --source=production


1. Konfigurace Ghostu

Po instalaci nakonfigurujte Ghost:


ghost setup


2. Spuštění Ghostu

Spusťte Ghost:


ghost start


Nastavení Next.js

1. Vytvořte Next.js aplikaci

Vytvořte novou Next.js aplikaci:


npx create-next-app <název_aplikace>


2. Nainstalujte Ghost API klienta

Nainstalujte Ghost API klienta:


npm install @tryghost/content-api


3. Použijte Ghost API klienta

Použijte Ghost API klienta ve své Next.js aplikaci pro načítání příspěvků:


import useSWR from 'swr'

function fetchPosts() {
const url = 'https://your-ghost-url/ghost/api/v3/content/posts/'
const headers = {
"Authorization": "Bearer " + "your_ghost_api_key"
}
const res = await fetch(url, { headers })
return res.json()
}

export default function Posts() {
const { data, error } = useSWR('posts', fetchPosts)

if (error) return <div>Error</div>
if (!data) return <div>Loading...</div>

return (
<div>
{data.posts.map((post) => (
<Post key={post.id} post={post} />
))}
</div>
)
}


4. Vytvořte komponentu příspěvku

Vytvořte komponentu pro zobrazení jednotlivých příspěvků:


export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
)
}


Nasazení na DigitalOcean

1. Nasazujte Next.js aplikaci

Nasazujte Next.js aplikaci na DigitalOcean:


npm run build
scp -r build root@<vaše_ip_adresa>:~/blog


2. Konfigurujte Nginx

Nainstalujte a nakonfigurujte Nginx pro obsluhu statických souborů:


apt-get install nginx
echo "server { listen 80; server_name example.com; location / { root /home/droplet_user/blog/build; index index.html; } }" > /etc/nginx/sites-available/blog
ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/blog
service nginx restart


Závěr

Vytvoření blogu na DigitalOcean s Ghost a Next.js je efektivní a uživatelsky přívětivý proces. Ghost vám poskytuje robustní platformu pro blogování, zatímco Next.js nabízí rychlý a výkonný základ pro vaši webovou stránku. Postupujte podle tohoto průvodce a vytvořte si svůj vlastní blog ještě dnes, kde můžete sdílet své myšlenky a nápady s celým světem.

Často kladené dotazy (FAQ)

1. Jaké jsou výhody používání Ghostu pro blogování?
* Intuitivní rozhraní, zaměření na psaní, správa více autorů, SEO integrace.

2. Jaké funkce nabízí Next.js pro statické webové stránky?
* Generování statických stránek, server-side rendering, automatické dělení kódu, dynamické trasování.

3. Jak se mohu připojit k svému droplet z příkazového řádku?
* Použijte SSH a zadejte příkaz ssh root@<vaše_ip_adresa>.

4. Jak mohu nainstalovat Ghost-CLI?
* Spusťte příkaz npm install -g @ghost/cli.

5. Jak mohu spustit Ghost?
* Spusťte příkaz ghost start.

6. Jak mohu načíst příspěvky z Ghostu pomocí Next.js?
* Použijte Ghost API klienta a funkci fetchPosts().

7. Jak mohu nasadit svou Next.js aplikaci na DigitalOcean?
* Vybudujte aplikaci, zkopírujte ji do droplet a nakonfigurujte Nginx pro obsluhu statických souborů.

8. Jaké nástroje mohu použít pro optimalizaci SEO?
* Yoast SEO plugin pro WordPress, Google Search Console, Ahrefs.

9. Jak mohu zabezpečit svůj blog?
* Použijte SSL certifikát, dvoufaktorové ověřování, pravidelně zálohujte.

10. Jak mohu propagovat svůj blog?
* Sociální média, guest blogging, SEO optimalizace, e-mail marketing.