Next.jsReact博客启动器

nextjs-ghostcms-blog-starter — Next.js 博客模板

作者 davidamunga

使用 Next.js 作为前端、Ghost CMS 作为内容后端、Disqus 作为评论服务的博客启动模板。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-13查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Next.js 前端搭配 Ghost CMS 作为内容后端

通过 CONTENT_API_KEY 与 BLOG_URL 环境变量连接 Ghost 内容 API

集成 Disqus 作为文章评论服务

README 提供 Ghost 实例的 Heroku 部署入口

提供 Vercel 部署按钮，可直接从仓库创建项目

模板详细介绍

这是一个基于 Next.js 的博客启动模板，通过 create-next-app 初始化，内容来源为 Ghost CMS，评论功能接入 Disqus。仓库提供 Ghost 实例的部署入口（Heroku 模板），并要求在项目根目录创建 .env 文件，填入 CONTENT_API_KEY 与 BLOG_URL 两个变量以连接 Ghost 内容 API。

使用方式为安装依赖后运行开发服务器，在本地 3000 端口预览；README 同时给出部署到 Vercel 的按钮。模板本身不包含 Ghost 实例，需要自行准备 Ghost 后端并配置 API 密钥。仓库最近更新时间为 2021 年 3 月，未提供依赖版本清单，因此不在此列出具体框架版本。

Next.js博客启动器

适合你的项目吗？

适用场景

为已有 Ghost 站点搭建独立的 Next.js 前端
需要一个带评论功能的轻量博客起步项目
在 Vercel 上部署由 Ghost 提供内容的博客

适合人群

已有 Ghost 实例或愿意自行部署 Ghost 的开发者
熟悉 Next.js 并需要博客启动代码的团队
希望用 Disqus 承载评论、不自行开发评论系统的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在项目根目录创建 .env 文件，写入 CONTENT_API_KEY 和 BLOG_URL
2
使用 yarn install 安装依赖，再以 npm run dev 或 yarn dev 启动开发服务器
3
Ghost 后端需自行准备，可参考 README 中的 Heroku 部署模板
4
Disqus 评论需要按 Disqus 服务要求自行配置站点信息
5
仓库更新于 2021 年，使用前建议核对依赖与外部服务的当前可用性

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
模板依赖外部服务：内容后端必须使用 Ghost CMS，评论功能必须使用 Disqus 服务，二者均非模板自带，需自行准备并配置。
使用前必须在项目根目录创建 .env 文件，并填入来自 Ghost 实例的配置变量，否则无法连接内容后端。
必须提供 Ghost 的 Content API 密钥（CONTENT_API_KEY），该密钥需从自建或托管的 Ghost 实例获取。
必须提供 Ghost 博客地址（BLOG_URL），指向实际运行的 Ghost 实例。
需自行部署或已有 Ghost 实例；README 仅提供 Heroku 部署入口，模板本身不包含 Ghost 后端。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

that has [Ghost CMS](https://ghost.org) as its backend and uses Disqus service as Comments
README 原文

Once done setup a .env file on the root of the project with the following variables from your Ghost Setup.
README 原文

CONTENT_API_KEY=YOUR_GHOST_API_KEY
README 原文

BLOG_URL=YOUR_BLOG_URL
README 原文

You can quickly setup a Ghost Instance on Heroku as below or use your own instance
README 原文

https://github.com/davidamunga/nextjs-ghostcms-blog-starter/blob/master/LICENSE.md https://github.com/davidamunga/nextjs-ghostcms-blog-starter/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 70 / 100
技术栈: Next.js · React
网站类型: 博客 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2021-03-08
截图检查日期: 2026-10-13

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: e3c3afc936162b09134e982e0312fc75d021fd966aecb3f4cc44ede60947455a

2026-10-13T01:19:53.941Z

来源文件 / 仓库

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) that has [Ghost CMS](https://ghost.org) as its backend and uses Disqus service as Comments


## Ghost CMS Setup Config
You can quickly setup a Ghost Instance on Heroku as below or use your own instance


[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)]( https://heroku.com/deploy?template=https://github.com/snathjr/ghost-on-heroku)


Once done setup a .env file on the root of the project with the following variables from your Ghost Setup.


```bash
CONTENT_API_KEY=YOUR_GHOST_API_KEY

BLOG_URL=YOUR_BLOG_URL
```

## Getting Started

Install all the dependencies
```bash
yarn install
```

Run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.


## Deploy on Vercel


<a href="https://vercel.com/new/git/external?repository-url=[https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world](https://github.com/DavidAmunga/nextjs-ghostcms-blog-starter.git)"><img src="https://vercel.com/button" alt="Deploy with Vercel"/></a>

反馈内容错误