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

by
Tweet
Share
Share
Pin

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

Увод

Да ли сте увек желели да покренете свој блог, али нисте знали од чега да почнете? Ако је тако, овај водич ће вам показати све што треба да знате о постављању блога на DigitalOcean са Ghost-ом и Next.js-ом. То је савршена комбинација за оне који желе да започну са блоговањем, без обзира на ниво њиховог искуства.

Овај свеобухватни водич укључује детаљна упутства и објашњења, праћена одговарајућим скриптним кодовима који ће вам помоћи да са лакоћом инсталирате и конфигуришете свој блог. Такође ћемо дати савете о најбољим праксама и пружити додатне ресурсе за даљу оптимизацију вашег блога.

Шта је Ghost?

Ghost је бесплатан, отвореног кода систем за управљање садржајем (ЦМС) посебно дизајниран за блогирање. Нуди једноставан и интуитиван кориснички интерфејс, тако да можете брзо и лако да креирате и управљате својим објавама на блогу. Ghost такође долази са бројним функцијама које ће побољшати ваше блогерско искуство, укључујући подршку за више аутора, планирање објава и оптимизацију за претраживаче (СЕО).

Шта је Next.js?

Next.js је оквир без сервера на бази React-а који побољшава стварање брзих, динамичких веб апликација. Олакшава вам употребу серверског рендеровања (ССР) и генерисања статичких веб страница (ССГ), што може значајно побољшати брзину и перформансе вашег блога.

Постављање DigitalOcean Droplet-а

1. Корак: Креирање налога DigitalOcean

Посетите DigitalOcean и креирајте бесплатан налог.

2. Корак: Креирање Droplet-а

Кликните на дугме „Create“ и изаберите „Droplet“ из менија. Наведите следеће:

  Како преузети Спотифи песме за слушање ван мреже

* Име Droplet-а: Изаберите име за свој Droplet
* Регион података: Изаберите регион који је најближи вашим корисницима
* Величина: Изаберите одговарајућу величину за своје потребе
Слика:** Изаберите „*Ubuntu 20.04 x64„

Кликните на „Create Droplet“ да бисте започели процес инсталације.

Инсталација Ghost-а

1. Корак: Ажурирање система

SSH пријавите се на свој Droplet и ажурирајте свој систем:


sudo apt-get update
sudo apt-get upgrade

2. Корак: Инсталирање Node.js and NPM

Инсталирајте најновије верзије Node.js и NPM:


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

3. Корак: Инсталирање Ghost

Инсталирајте Ghost помоћу следеће команде:


npm install ghost-cli@latest -g

4. Корак: Покретање Ghost-а

Покрените Ghost користећи следећу команду:


ghost install local

Након што завршите, Ghost ће бити доступан на http://localhost:2368.

Интеграција са Next.js

1. Корак: Креирање Next.js апликације

Направите нову директорију за своју Next.js апликацију и промените директоријум:


mkdir my-blog
cd my-blog

Иницијализујте Next.js апликацију:


npx create-next-app .

2. Корак: Инсталирање Ghost API клијента

Инсталирајте Ghost API клијента за Next.js:


npm install ghost-api-client

3. Корак: Конфигурисање Ghost API

Конфигуришите свој Ghost API креирањем .env.local фајла у директоријуму своје Next.js апликације и додавањем следећих редова:

URL вашег Ghost блога

GHOST_URL=http://localhost:2368

Ваш Ghost API кључ

GHOST_API_KEY=your-ghost-api-key

4. Корак: Креирање страница

Креирајте странице за свој блог, на пример, почетну, страницу архиве и страницу појединачне објаве.

5. Корак: Повезивање са Ghost-ом

Користите Ghost API клијента у свом Next.js коду да бисте извукли податке из Ghost-а. На пример, можете да извучете све објаве на блогу на страници архиве:

javascript
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>
<h1>Архива</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}

Конфигурација SSL

За безбедну везу конфигуришите SSL сертификате на свом DigitalOcean Droplet-у.

1. Корак: Прибавите SSL сертификат

Прибавите бесплатан SSL сертификат од провајдера као што су Let’s Encrypt.

2. Корак: Инсталирајте Certbot

Инсталирајте Certbot, алат за аутоматско управљање SSL сертификатима:


sudo apt-get install certbot

3. Корак: Примените SSL сертификат

Примените SSL сертификат на свој Ghost дроплет:


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

Оптимизација перформанси

1. Корак: Инсталирајте Memcached

Инсталирајте Memcached на свом Droplet-у за кеширање:


sudo apt-get install memcached

2. Корак: Конфигурисање Ghost-а да користи Memcached

Конфигуришите Ghost да користи Memcached:

Отворите конфигурациони фајл Ghost-а

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

Додајте следећи код у фајл:


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

3. Корак: Конфигурисање Next.js-а да користи кеширање

Конфигуришите Next.js да користи кеширање:

Отворите фајл next.config.js

nano next.config.js

Додајте следећи код у фајл:


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

Закључак

Честитам, сада имате потпуно функционалан блог изграђен на DigitalOcean-у са Ghost-ом и Next.js-ом. Овим чланком сте овладали свим неопходним корацима за постављање, конфигурацију и оптимизацију вашег блога. Међутим, важно је напоменути да ово представља само основу, а постоје и додатне прилагођавања и побољша