Vercel 部署 Ghost博客系统
要使用 Vercel 和 Next.js 部署 Ghost CMS，可以按照以下步骤进行设置和部署：
步骤指南
1. 设置 Ghost CMS
首先，需要在服务器上设置 Ghost CMS。可以使用 DigitalPress、DigitalOcean 或 Ghost(Pro) 等平台。以下是如何在 DigitalPress 上设置 Ghost：
- 申请 Ghost 博客：
- 访问 DigitalPress 并申请一个免费的 Ghost 博客[4]。
- 或者，可以在 DigitalOcean 上设置 Ghost 博客，具体步骤可以参考 DigitalOcean 的官方文档。
2. 设置 Next.js 应用
接下来，创建一个 Next.js 应用程序来作为前端，并从 Ghost CMS 获取内容。
- 配置 Ghost API：
- 将
process.env.GHOST_API_URL和process.env.GHOST_CONTENT_API_KEY替换为你的 Ghost API URL 和内容 API 密钥。
- 将
- 获取并显示 Ghost 内容：
创建一个页面来显示文章，例如 pages/posts.js：
import api from '../ghost';
export async function getStaticProps() {
const posts = await api.posts.browse();
return {
props: { posts },
};
}
function Posts({ posts }) {
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
))}
</div>
);
}
export default Posts;
在项目根目录创建一个 ghost.js 文件：
const GhostContentAPI = require('@tryghost/content-api');
const api = new GhostContentAPI({
url: process.env.GHOST_API_URL,
key: process.env.GHOST_CONTENT_API_KEY,
version: 'v4',
});
export default api;
安装 Ghost Content API 包：
npm install @tryghost/content-api
创建新的 Next.js 应用：
npx create-next-app ghost-next-vercel
cd ghost-next-vercel
3. 部署到 Vercel
- 初始化一个 Git 仓库并将项目推送到 GitHub。
- 在 Vercel 上部署：
- 登录 Vercel 并连接你的 GitHub 账户。
- 导入你的仓库到 Vercel。Vercel 会自动检测这是一个 Next.js 项目并设置构建配置。
- 在 Vercel 仪表板中设置环境变量
GHOST_API_URL和GHOST_CONTENT_API_KEY。 - 部署项目。每次推送到 GitHub 主分支都会触发 Vercel 的部署。
将项目推送到 GitHub：
git init
git add .
git commit -m "Initial commit"
git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin main
4. 自动化重建
为了确保 Vercel 项目反映 Ghost CMS 中的更改，可以使用 Vercel 的 webhook 系统与 Ghost 的 webhook 功能结合，自动化重建。
- 设置 Webhooks：
- 在 Ghost 中，转到 Integrations 并添加一个新的 webhook，当内容发生更改时触发。
- 在 Vercel 中，设置一个 webhook，当 Ghost 通知内容更改时触发重建[1]。
通过这些步骤，你将拥有一个使用 Next.js 前端从 Ghost CMS 获取内容并托管在 Vercel 上的博客系统，提供无缝且高效的博客体验。
