Next.jsReact作品集博客

comet-land — Next.js 作品集模板

作者 hyesungoh

comet-land 是一个基于 Next.js 与 Turborepo 的博客与简历双站点模板,包含独立的博客应用和简历应用,支持代码高亮、目录、暗色模式、KBar 搜索与 Utterances 评论等配置项。

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

Turborepo monorepo 结构,博客与简历是两个可独立运行的应用

02

博客支持代码高亮(行高亮、行号)、文章目录、暗色模式与 KBar 搜索

03

简历应用使用 NextUI 设计,支持暗色模式并通过 KBar 展示联系方式

04

配置集中在 packages/core/constants,可设置分析 ID、颜色、头像、favicon 与社交链接

05

提供 create-comet-land 脚手架,也支持 Fork 或克隆仓库后本地运行

06

评论使用 Utterances,分析接入 Google Analytics 与 Hotjar

模板详细介绍

comet-land 是一个把「博客」和「简历」拆成两个独立应用的模板,使用 Turborepo 管理 monorepo。仓库中 apps/blog 与 apps/resume 分别对应两个站点,本地开发时博客运行在 3000 端口、简历运行在 3001 端口。

博客侧提供代码高亮(含行高亮与行号)、文章目录、暗色模式、基于 KBar 的搜索、Utterances 评论,以及 Google Analytics 与 Hotjar 接入;简历侧同样使用 NextUI 设计、支持暗色模式、通过 KBar 展示联系方式,并接入 Google Analytics 与 Hotjar。

配置集中在 packages/core/constants 目录,可调整分析服务的 GA ID 与 Hotjar ID、颜色方案、作者头像、默认 Open Graph 图片、favicon,以及 GitHub、Instagram、Facebook、LinkedIn、Twitter 等社交链接;各应用的独立配置位于 apps/blog/_config/index.json 与 apps/resume/_config/index.json。

项目提供 create-comet-land 脚手架,可通过 npx create-comet-land 或 yarn create comet-land 生成,也可以直接 Fork 或克隆仓库后安装依赖并运行。部署方式在文档中给出 Vercel 与 GitHub Pages 两种路径。README 中列出的使用案例包括 hyesungoh.xyz、seulheehan.com、thebong.net 等个人站点。

需要注意的限制:模板本身只提供博客与简历两个前端应用,评论依赖 Utterances(需要 GitHub 仓库),分析依赖 Google Analytics 与 Hotjar 等外部服务;README 未说明这些外部服务的免费额度或数据合规情况。演示图片、字体、图标等第三方素材需按各自许可单独核对,不能仅凭代码的 MIT 许可判断。

Next.js作品集博客

适合你的项目吗?

适用场景

  • 搭建个人技术博客,并需要代码高亮、目录和搜索功能
  • 制作在线简历页面,与博客共用同一套配置和设计语言
  • 在同一仓库中同时维护博客与简历两个站点,分别部署
  • 通过 create-comet-land 快速生成项目结构后再按需修改

适合人群

  • 希望用 Next.js 搭建个人博客与简历的开发者
  • 接受 monorepo 结构、愿意分别配置两个应用的开发者
  • 需要暗色模式、KBar 搜索和 Utterances 评论等现成功能的个人站点
  • 参考已有使用案例来评估模板落地效果的开发者

上手与定制指南

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

  1. 1

    可用 npx create-comet-land 或 yarn create comet-land 生成项目,也可直接 Fork 或克隆本仓库

  2. 2

    克隆后先执行 yarn 安装依赖,再运行 yarn turbo run dev 或 yarn dev

  3. 3

    默认博客在 localhost:3000、简历在 localhost:3001

  4. 4

    通用配置在 packages/core/constants,各应用配置在 apps/blog/_config/index.json 与 apps/resume/_config/index.json

  5. 5

    部署方式参考文档中的 Vercel 或 GitHub Pages 说明;Utterances 评论需要对应的 GitHub 仓库

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 评论功能依赖 Utterances 外部服务,需要关联 GitHub 仓库才能使用,属于外部服务依赖。
  • 博客与简历均接入 Google Analytics 与 Hotjar 外部分析服务,使用前需自行注册账号并获取对应 ID。
  • 配置分析功能需要填写 GA ID 与 Hotjar ID,意味着必须拥有相应外部服务账号。
  • 项目脚手架 create-comet-land 位于独立仓库,使用生成方式时依赖该外部仓库。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

🔊 [Utterances](https://utteranc.es/) Comment

README 原文

- 🔭 Google Analytics - 🔥 Hotjar

README 原文

- GA ID - Hotjar ID

README 原文

`comet-land` has own generate package [`create-comet-land`](https://github.com/hyesungoh/create-comet-land)

README 原文
https://github.com/hyesungoh/comet-land/blob/main/LICENSEhttps://github.com/hyesungoh/comet-land/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 81 / 100
技术栈
Next.js · React
网站类型
作品集 · 博客
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2024-08-31
截图检查日期
2026-10-04

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 5ce5e8b74cba3ecf9f1c95c5994c8f97ae2f448d4e75afa5e54a3cad3453ecdb

2026-10-04T10:20:35.118Z

来源文件 / 仓库
# Comet-land

[![CodeQL](https://github.com/hyesungoh/comet-land/actions/workflows/codeql.yml/badge.svg)](https://github.com/hyesungoh/comet-land/actions/workflows/codeql.yml) [![Continious Intergration](https://github.com/hyesungoh/comet-land/actions/workflows/CI.yml/badge.svg)](https://github.com/hyesungoh/comet-land/actions/workflows/CI.yml) [![codecov](https://codecov.io/gh/hyesungoh/comet-land/branch/main/graph/badge.svg?token=TA7LT3RQ1P)](https://codecov.io/gh/hyesungoh/comet-land) [![blog](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/yiddyz&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/yiddyz/runs) [![resume](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/inc4yo&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/inc4yo/runs)

Blog and Resume template with turborepo

한국어 문서는 [다음 링크](https://github.com/hyesungoh/hyesungoh-land/tree/main/_docs/ko-readme.md)에서 확인하실 수 있습니다.

![comet-land-blog](https://user-images.githubusercontent.com/26461307/159371599-95b2acd5-e5eb-482c-9ead-d8f601f034b5.png)

<h2 align="center">

[`BLOG DEMO ☄️`](https://comet-land-blog.vercel.app/)

</h2>

![comet-land-resume](https://user-images.githubusercontent.com/26461307/160653172-c56a3b64-dfa9-4708-bf95-fca2fff47964.png)

<h2 align="center">

[`RESUME DEMO 💫`](https://comet-land-resume.vercel.app/)

</h2>

![postGif](https://user-images.githubusercontent.com/26461307/159372336-e42c1a9c-9915-4d05-9e51-4882d681dc80.gif)

- 👔 Code highlight with line-highlight, line-numbers
- 🎨 Design with [NextUI](https://nextui.org/)
- 🍽 Table of contents
- 🎩 Dark mode

![kbarGif](https://user-images.githubusercontent.com/26461307/159372344-d628b817-d7f5-4322-813e-3468a62e79d6.gif)

- ⌨️ Search with [KBar](https://kbar.vercel.app/)
- 🔨 Configurable
- 🔊 [Utterances](https://utteranc.es/) Comment
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score

![blog lighthouse score](https://user-images.githubusercontent.com/26461307/161536154-b85caf9f-0f73-4224-a1e7-540723916ff7.gif)

## Resume Feature

- 🎨 Design with [NextUI](https://nextui.org/)
- 🎩 Dark mode
- ⌨️ Contact with [KBar](https://kbar.vercel.app/)
- 🔨 Configurable
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score

![resume lighthouse score](https://user-images.githubusercontent.com/26461307/161536162-63278484-ca52-42ed-89d4-951cd31e42c1.gif)

## How to start

`comet-land` has own generate package [`create-comet-land`](https://github.com/hyesungoh/create-comet-land)

```bash
npx create-comet-land
# or
yarn create comet-land
```

> Or using Fork or clone this repo

1. Install dependencies

```bash
yarn
```

2. Start Turbo !

```bash
yarn turbo run dev
# or just
yarn dev
```

4. Now you can see blog at `localhost:3000`, resume at `localhost:3001`

## How to configuration

Please see `packages/core/constants` directory.

and you can reconfigure at that directory's variable

- Analytics directory
  - GA ID
  - Hotjar ID
- Colors directory
  - color schema
- General directory
  - author image
  - default open-graph image
  - favicon
- SocialMedia directory
  - github
  - instagram
  - facebook
  - linkedin
  - twitter

and please check `apps/blog/_config/index.json` and `apps/resume/_config/index.json`.

This files are placing each app's configuration variable.

## How to use it

please read following link.

- [how to add blog post](https://github.com/hyesungoh/hyesungoh-land/tree/main/_docs/en-blog.md)
- [how to custom resume](https://github.com/hyesungoh/hyesungoh-land/tree/main/_docs/en-resume.md)

## How to deploy

#### [deploy with vercel (recommend)](https://github.com/hyesungoh/hyesungoh-land/tree/main/_docs/en-deploy-vercel.md)

#### [deploy with github pages](https://github.com/hyesungoh/hyesungoh-land/tree/main/_docs/en-deploy-github-pages.md)

## How to add more packages

- scope packages

```bash
cd where-you-want
yarn add package-name
```

- global packages

```bash
yarn add package-name -W
```

- global dev packages

```bash
yarn add package-name -DW
```

## Trouble shootings

check [this wiki](https://github.com/hyesungoh/comet-land/wiki/Trouble-Shooting) please! it might be help

## Use Case

- [hyesungoh.xyz](https://www.hyesungoh.xyz/)
- [seulheehan.com](https://www.seulheehan.com/)
- [thebong.net](https://thebong.net/)
- [coderoad.kr](https://blog.coderoad.kr)
- [govindkumar.in](https://www.govindkumar.in/)
- [blog.milansachani.dev](https://blog.milansachani.dev/)
- [resume.jadecode.xyz](https://resume.jadecode.xyz/)
- [jaegwan.kim](https://jaegwan.kim/)
- [min71.dev](https://resume.min71.dev)

## Inspired

I inspired below blogs and resume.

- [Overreacted](https://overreacted.io/)
- [Yceffort](https://yceffort.kr/)
- [gatsby-starter-bee](https://gatsby-starter-bee.netlify.app/)
- [vallista-land](https://vallista.kr/)
- [hyunseob.github.io/resume](https://hyunseob.github.io/resume/)

## License

MIT
反馈内容错误

看看同类模板

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