基于模板，拥有属于自己的第一个博客！
/ 6 min read
项目展示
今天我们来开发一个自己的博客页面，看一下如何基于模板来快速的创建一个自己的博客，并且部署上线绑定为自己的域名。
风格1：极简风格
• 在线预览地址：https://blog-template.botbio.site
风格2: Neobrutalism风格
• 在线预览地址：https://myselfblog.ztr8.uk/
1. 到官网下载模板
我们到Next.js官网上，去下载这一套官方所提供的博客模板的启动项目：https://vercel.com/templates/next.js/blog-starter-kit
进入到GitHub项目的仓库地址，在仓库的README当中输入安装命令：
npx create-next-app --example blog-starter blog-starter-app如果出现安装时间过长、卡住的现象，可以直接打开项目的目录，然后手动的输入 npm install 或者 pnpm install 安装相应的一类。
提醒：如果使用pnpm（优点：快+节省磁盘空间），需要提前安装 npm install
具体的操作系统安装方式见： https://pnpm.io/installation#on-windows
安装好模板的源文件+对应的依赖后，用Cursor打开它，并且在命令行输入npm run dev，跑起来这个项目。
访问 http://localhost:3000 端口，就能够访问：
2. 修改对应的博客
2.1 _posts 目录下修改博客内容
_posts目录下的.md 文件，对应的就是每一篇的博客内容，新建或者修改，就能够创建对应的博客。
Markdown的语法规则我这里不做过多的介绍，大家可以自己基于AI了解学习，应该10分钟就能学会。这边给大家介绍一下.md 文档中的元数据信息，长这个样子：
• 元数据:
---title: "Dynamic Routing and Static Generation"excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."coverImage: "/assets/blog/dynamic-routing/cover.jpg"date: "2020-03-16T05:35:07.322Z"author: name: JJ Kasper picture: "/assets/blog/authors/jj.jpeg"ogImage: url: "/assets/blog/dynamic-routing/cover.jpg"---这是 Markdown 文件中的前置元数据部分（Front Matter），使用 YAML 格式定义文章的元数据。具体包含：
• title：文章标题 “Dynamic Routing and Static Generation”
• excerpt：文章摘要，用于预览
• coverImage：封面图片路径
• date：发布日期和时间
• author：作者信息（姓名和头像）
• ogImage : Open Graph 图片，用于社交媒体分享
这些元数据用于博客系统生成文章页面、列表页和社交媒体分享卡片时提供必要信息。
2.2 /public 目录下新增静态资源
/public/assets/blog 这个文件夹下放的是各个博客对应的图片，你只需要替换成为自己的图片然后引入即可。注意一定要确保页面路径的引入地址在元数据中是正确的。
例如你在.md 的元数据中有写：
---coverImage: "/assets/blog/dynamic-routing/cover.jpg"---那么请确保在/public/assets/blog/dynamic-routing/cover.jpg 中文件存在。
2.3 让AI修改对应的组件
需要注意的是，如果需要引入一些自定义icon，需要确保我们有提前下载完成， 并放到指定的文件夹里面。并给到AI对应的上下文给到Cursor。
可以在iconfont上找到丰富的icon样式，你可以复制svg的格式或者png的格式放在我们的静态资源文件夹中，也就是我们的 /public目录下。
3. 修改样式主体
直到上一步，我们网页的样式还是默认的一个简约风格的样式，那其实你可以调整为自己喜欢的一个样式风格。你也不需要写一行的代码，只需要明确的告诉Cursor你对应的一个风格就行。例如这边我们修改成为Neobrutalism风格。
你只需要在Cursor的Agent模式下输入下面的提示词：
请你把网站的样式，修改成为neobrutalism主体风格。包括网站首页和全部博客页面都改成这个风格。使用tailwindcss进行修改源码和资料
1. 教程源码
1.1 初始化项目源码
blog-starter-app.zip 308.5KB
1.2 简约风格源码
templates_blog-starter-app-main.zip 5.4MB
1.3 Neobrutalism风格源码
my_nextjs_blog-main.zip 8.1MB
2. 其他可选模板
我也帮大家挑选了几个比较简约和同样技术类型的博客模板，适合喜欢折腾的同学自己去修改
2.2 chanhdai.com