搭建基于nextjs的静态博客程序 blog-by-coderPerseus

 先安装nodejs环境和pnpm.

git clone https://github.com/coderPerseus/blog blog-by-coderPerseus

cd blog-by-coderPerseus

pnpm install

pnpm build

(如果此步遇到错误，请看build 失败 · Issue #30 · coderPerseus/blog）

这一步运行后，会在当前目录下，生成out/目录，

cd out

$ ls

404.html          about.txt                            feed.xml   index.html  og.png      posts.txt      site.webmanifest  test.txt

_next/            apple-icon.jpg                       icon.html  index.txt   police.png  projects.html  sitemap.xml

about-me-bg.webp  baidu_verify_codeva-7AmpPWgzQY.html  icon.jpg   logo.png    posts/      projects.txt   style/

about.html        favicon.ico                          icon.txt   logo.webp   posts.html  robots.txt     test.html

~/blog-by-coderPerseus/out (main)$

( 可见~/blog-by-coderPerseus/out 就是静态网站的根目录）

新建源帖：

$ cd ../posts

$ nano pg.mdx

$ cat pg.mdx

显示：

---

title: 美丽的草原，我的家

description: 这是一首歌

tags: [music, life, culture]

slug: pg

author: brite

date: 2024-12-05 0:08

---

此处写正文或html codes.

cd ..

~/blog-by-coderPerseus (main)$ pnpm build

演示网站：

https://earnest-capybara-6d5d5a.netlify.app/posts

https://tranquil-daffodil-78f5cd.netlify.app/posts

项目地址：https://github.com/coderPerseus/blog

build 失败 · Issue #30 · coderPerseus/blog

https://github.com/coderPerseus/blog/issues/7

------------------------------------------------------------------

搭建基于nextjs的静态博客程序cpb

首先fork这个项目https://github.com/coderPerseus/blog，我fork后的项目地址是

https://github.com/ymbrite/cpb，

然后访问https://github.com/ymbrite/cpb/tree/main/data/blog，在此新建源帖fh.mdx,内容

为：

---

title: 战马

date: 2026-02-22T09:22:00Z

slug: fh

author: ym

tags: ["bug","Next.js","踩坑记录"]

---

此处为视频的嵌入代码

（详见https://github.com/ymbrite/cpb/blob/main/data/blog/fh.mdx?plain=1）

 然后访问vercel.com/new ,导入项目https://github.com/ymbrite/cpb。点击import按钮后，在跳转到的页面里，如图：

可以看到project name为cpb-5kgg . 往下拉这个页面，来到添加environment variables的地方：

按上面图片所显示的，添加环境变量NEXT_PUBLIC_SITE_URL，其值为

https://'project name的值'.vercel.app

添加环境变量NEXT_PUBLIC_SITE_EMAIL_FROM,其值为随便一个email地址。

点击deploy按钮，等待部署完成，部署完成后，我得到的网址为https://cpb-5kgg.vercel.app/

 新建源帖后，博客网站2分钟内就会更新。

 项目地址：

 https://github.com/coderPerseus/blog

https://github.com/ymbrite/cpb

博客地址：https://cpb-5kgg.vercel.app/

https://cpb-5kgg.vercel.app/posts/

https://cpb-5kgg.vercel.app/posts/fh 能显示视频