Next.jsReact博客

blog-template-kooku — Next.js 博客模板

作者 kooku0

基于 Next.js 与 Emotion 的博客模板，集成 Netlify CMS 用于撰写文章，可通过 meta-config.ts 配置站点信息并部署到 Netlify。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

01

基于 Next.js 构建，样式使用 Emotion

02

集成 Netlify CMS，可在后台撰写与发布文章

03

站点标题、作者、简介、头像和社交账号集中在 /meta-config.ts 配置

04

CMS 字段与集合可通过 /public/admin/config.yml 自定义

05

README 提供 Netlify 一键部署按钮与部署状态徽章

模板详细介绍

这是一个以 Next.js 为基础、使用 Emotion 处理样式的博客模板，作者在 README 中将其定位为“Blog Template based on Next.js”。模板内置 Netlify CMS 作为内容管理入口，文章通过 CMS 后台添加，CMS 的字段与集合可在 /public/admin/config.yml 中调整。站点标题、作者、简介、站点地址、头像与社交账号（GitHub、Medium、Facebook）集中在 /meta-config.ts 中配置，属于模板提供的可配置项。

使用流程上，README 给出的步骤是：fork 仓库，执行 yarn 与 yarn dev 在本地 3000 端口预览，修改 meta-config.ts，然后通过 Netlify 的部署按钮发布，最后在 Netlify CMS 中写文章。仓库同时提供 Netlify 部署状态徽章、PC 与移动端截图以及演示 GIF，并列出使用该模板的站点 kooku-log 作为用例。

许可方面，仓库采用 MIT 许可，允许使用、修改、商用和分发该版本代码，分发时需保留版权声明与许可声明。需要注意，演示图片、字体、图标等第三方素材的授权需单独核对；域名、托管等外部服务可能产生费用。README 未说明测试、无障碍、国际化或性能方面的具体指标，也未给出除 Netlify 之外的部署方式。

Next.js博客

适合你的项目吗？

适用场景

  • 个人开发日志或技术博客的起步项目
  • 希望用 Netlify CMS 图形界面写作、不想手写 Markdown 文件的作者
  • 需要 fork 后快速改配置并部署到 Netlify 的静态博客

适合人群

  • 熟悉或愿意使用 Next.js 与 yarn 的开发者
  • 计划将博客托管在 Netlify 并使用 Netlify CMS 的个人作者
  • 需要 MIT 许可、可自由修改和分发代码的博客项目

上手与定制指南

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

  1. 1

    fork 仓库后执行 yarn 安装依赖，再运行 yarn dev，在 localhost:3000 预览

  2. 2

    在 /meta-config.ts 中修改 title、author、introduction、siteUri、profile 与 social 等字段

  3. 3

    通过 Netlify 部署按钮发布站点，并在 Netlify CMS 后台添加文章

  4. 4

    如需调整 CMS 的字段或集合，编辑 /public/admin/config.yml

  5. 5

    演示图片、字体、图标等第三方素材的授权需单独核对，域名与托管等外部服务可能另行收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 发布站点依赖 Netlify 这一外部托管服务，需注册 Netlify 账号并使用其部署功能，可能涉及该服务的费用与条款。
  • 撰写与发布文章依赖 Netlify CMS 这一外部内容管理服务，需通过其后台操作，而非纯本地编辑。
  • README 建议的使用方式为 fork 该仓库后再修改，而非直接作为独立包安装使用。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

### 4. Publish with [netlify](https://netlify.com)

README 原文

### 5. Add post with [Netlify CMS](https://www.netlifycms.org/)

README 原文

fork this repository

README 原文
https://github.com/kooku0/blog-template-kooku/blob/main/LICENSEhttps://github.com/kooku0/blog-template-kooku/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 56 / 100
技术栈
Next.js · React
网站类型
博客
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2022-06-19
截图检查日期
2026-10-13

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 5f457ccfe4617468f8dd2939678a7df9d13c67953fa5896145bc83700c880c79

2026-10-13T04:57:14.438Z

来源文件 / 仓库
# Blog-Template

[![Netlify Status](https://api.netlify.com/api/v1/badges/4b1962ce-6206-4d8f-9516-63be92294198/deploy-status)](https://app.netlify.com/sites/blog-template-kooku/deploys)

Blog Template with next.js & emotion & netlify-cms

> Blog Template based on Next.js

In this template

- netlify-cms
- Configurable
- Enhance UX
- Shared Link

## Usecase
- [kooku-log](http://kooku-log.netlify.app)

## Demo

- [Demo Site](http://blog-template-kooku.netlify.app/)

### PC

![img](./assets/screenshot-pc.png)

### Mobile

![img](./assets/screenshot-mobile.png)

![gif](./assets/demo.gif)

## Quick Start

### 1. create Blog

fork this repository

### 2. Start developing.

```shell
$ yarn
$ yarn dev
# open localhost:3000
```

### 3. Update config

You can write...

- update config at `/meta-config.ts`

```ts
export default {
  title: "Kooku's log",
  author: 'Kooku',
  introduction: 'Development Blog',
  siteUri: '',
  profile: '/profile.png',
  social: {
    github: 'kooku94', // Your GitHub account
    medium: '', // Your Medium account
    facebook: '' // Your Facebook account
  }
};
```

### 4. Publish with [netlify](https://netlify.com)

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kooku94/blog-template-kooku)

### 5. Add post with [Netlify CMS](https://www.netlifycms.org/)

you can posting with netlify cms..

![img](./assets/screenshot-cms.png)

if you want customize cms tool, edit `/public/admin/config.yml`

## LICENSE

[MIT](./LICENSE)

<div align="center">

<sub><sup>Project by <a href="https://github.com/kooku94">@Kooku</a></sup></sub>

</div>
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

Nextjs-tailwindcss-blog-template

Nextjs-tailwindcss-blog-template

⭐Build SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer. If you want to learn t…

Next.js · 博客

Next-js-Blog-Boilerplate

Next-js-Blog-Boilerplate

Next-js-Blog-Boilerplate 是一套面向个人与技术博客的启动代码，基于 Next.js 12 与 Tailwind CSS 3 构建，同时集成了 TypeScript、ESLint、Prettier …

Next.js · 博客

nextjs-blog-theme

nextjs-blog-theme

nextjs-blog-theme 是 Netlify 团队维护的一个博客启动模板，基于 Next.js 15（Pages Router）和 Tailwind CSS 4.x 构建，设计由 Bejamas 机构完成。

Next.js · 博客

blog

blog

🚀 My personal blog made with Tailwind CSS and NextJS. Template from Timlrx. Feel free to fork, follow and use…

Next.js · 博客

tailnext

tailnext

Tailnext 是一个基于 Next.js 14 App Router 和 Tailwind CSS 的免费开源模板，由 onWidget 团队创建并维护。

Next.js · 博客