一个基于 Next.js 15 开发的简约而优雅的个人博客模板,通过Github Page自动化构建部署。
- 使用此项目作为模版创建一个新项目
- 点击仓库右上角
Use This template->create new repository。 - 填写 Repository name:
[use name].github.io,切记一定要这个格式。 - 仓库公开
-
选择创建好的仓库,去配置 giscus。
-
将 giscus 生成好的配置填入
/components/comments.tsx文件中。 -
根据自己的需求修改环境变量 .env
NEXT_PUBLIC_TITLE="Alang' Blog"
NEXT_PUBLIC_SUB_TITLE="做自己的追风者~"
NEXT_PUBLIC_LINKS=[{ "label": "Github", "src": "https://github.com/chennlang"},{ "label": "JueJin", "src": "https://juejin.cn/user/3913917126162429"}]
在 posts 目录下创建 .md 文件即可开始写作(记得先删除作者原有的文章)。每篇文章必须包含 frontmatter头部信息:
---
title: "文章标题"
date: "2024-03-20"
categories: "英文分类"
summary: "文章摘要,会显示在列表页面"
---
这里是文章正文内容...| 字段 | 说明 | 是否必填 | 类型 |
|---|---|---|---|
| title | 文章标题 | 是 | string |
| date | 发布日期 | 是 | string (YYYY-MM-DD) |
| categories | 文章分类 | 否 | string 或 string[] |
| summary | 文章摘要 | 是 | string |
修改主题相关的样式文件:
app/globals.css: 全局样式app/post/[id]/post.css: 文章页面样式tailwind.config.js: Tailwind 配置
当你 push 到 github 后,就会触发 github page 自动构建并部署到 Github 服务器上,访问 https://[user name].github.io/ 即可看到更新。
构建静态页面:
pnpm i
npm run build构建完成后,out 目录包含所有静态文件,可以部署到任何静态托管服务。
欢迎提交 Issue 和 Pull Request!
MIT License




