搭建基于 nextjs的静态博客程序：tailwind-nextjs-starter-blog（支持分页）

 cd ~
git clone https://github.com/timlrx/tailwind-nextjs-starter-blog
cd tailwind-nextjs-starter-blog
npm install
EXPORT=1 UNOPTIMIZED=1 npm run build （此命令就是生成/更新静态网站的根目录的命令。会在当前目录下，生成out目录,out目录里面有index.html文件，可见out目录就是静态网站的根目录）

创建新帖的方法：
cd ~/tailwind-nextjs-starter-blog/data/blog
nano happy-festival.mdx
cat happy-festival.mdx
显示：
---
title: '快乐的节日'
date: 2024-10-25T16:12:14Z
tags: ['enjoyment', 'life', 'music']
draft: false
summary: '这是一首歌'
layout: PostSimple
---

此处写正文或html codes.

$ cd ~/tailwind-nextjs-starter-blog
$ EXPORT=1 UNOPTIMIZED=1 npm run build

项目地址：https://github.com/timlrx/tailwind-nextjs-starter-blog
https://github.com/timlrx/tailwind-nextjs-starter-blog/issues/1043

我的演示网站：

https://guileless-sunflower-373c7d.netlify.app

 https://guileless-sunflower-373c7d.netlify.app/blog ，支持分页

https://tnsb-4hn.pages.dev/

代码里面的contentlayer模块跟windows系统不太兼容，对于写的源贴里的html tags的要求比较严格，所以那篇关于扬州的图文并茂的文章的html codes并没有被contentlayer模块处理成功，导致更新静态网站的根目录失败。我只好把那篇关于扬州的图文并茂的文章的所有html codes统统去掉，变成纯文字内容，才得以发表成功。见https://guileless-sunflower-373c7d.netlify.app/blog/yangzhou

而且这程序生成的链接好像有点问题，比如https://guileless-sunflower-373c7d.netlify.app/blog/china-economy。
在本地机器上，
cd ~/tailwind-nextjs-starter-blog/out/blog
$ ls
china-economy.html
china-economy.txt
code-sample.html
code-sample.txt
deriving-ols-estimator.html
deriving-ols-estimator.txt
github-markdown-guide.html
github-markdown-guide.txt
guide-to-using-images-in-nextjs.html
guide-to-using-images-in-nextjs.txt
happy-festival.html
happy-festival.txt
introducing-tailwind-nextjs-starter-blog.html
introducing-tailwind-nextjs-starter-blog.txt
my-fancy-title.html
my-fancy-title.txt
nested-route/
new-features-in-v1.html
new-features-in-v1.txt
page/
pictures-of-canada.html
pictures-of-canada.txt
release-of-tailwind-nextjs-starter-blog-v2.0.html
release-of-tailwind-nextjs-starter-blog-v2.0.txt
the-time-machine.html
the-time-machine.txt
yangzhou.html
yangzhou.txt

在~/tailwind-nextjs-starter-blog/out/里面运行
python3 -m http.server 1234

 然后在浏览器里访问http://127.0.0.1:1234/，然后点击'稀奇古怪的中国经济'这个链接，显示http://127.0.0.1:1234/blog/china-economy，是显示不了内容的，
需加上 .html才行。 

(本来文章链接是带.html的，为了去掉.html,可这样做：
 在网站的根目录下，新建.htaccess文件，加入：
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html
就立马解决问题了。如果像此文http://briteming.blogspot.co.uk/2013/10/linux-vpsocaml-ussm.html那样做，还需重启apache才行：
<VirtualHost my-vps-ip:80>
ServerName harp.brite.biz
DocumentRoot /root/harp-blog-by-kennethormandy/www/
<Directory /root/harp-blog-by-kennethormandy/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>
</VirtualHost>

需加上上述蓝色部分，重启apache即可。

from https://briteming.blogspot.com/2014/01/linux-vpsnodejs-harp.html) 

( 如何去掉帖子中的 .html?

当我们使用SSG-静态站点生成器进行构建并部署到 Nginx 时，默认情况下只能直接访问生成的 .html 文件，例如：

https://domain.com/blog.html

但这样会显得不够优雅，也不符合常见的站点访问习惯。

对此，我们可以在 nginx.conf 中，通过配置 try_files 来优化：

location / {
    try_files $uri $uri.html $uri/index.html /index.html;
}

配置说明:
这个配置会按顺序尝试：

    $uri：首先直接精确匹配用户请求的路径。
    $uri.html：匹配URI加上.html后缀。
    $uri/index.html：匹配URI作为目录，尝试加载该目录下的 index.html。
    /index.html：如果都失败，则兜底到站点根目录首页。

这样，用户就可以直接通过以下方式访问：

https://domain.com/blog

而无需手动输入 .html 后缀。)

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

 在vercel.com平台上，搭建基于 nextjs的静态博客程序：tailwind-nextjs-starter-blog（支持分页）

 首先fork此项目 https://github.com/timlrx/tailwind-nextjs-starter-blog，我fork后的项目地址是https://github.com/ymbrite/tnsb，然后访问https://github.com/ymbrite/tnsb/blob/main/package.json，修改第27行的next的值为latest ,

在第7行的值里面，next dev的后面加上 --webpack ,

 在第8行的值里面，next build的后面加上 --webpack ,

删除 yarn.lock文件。

访问 https://github.com/ymbrite/tnsb/tree/main/data/blog，新建源帖fh.mdx ,内容为：

---
title: 战马
date: '2026-01-11T07:10:00'
tags: ['markdown', 'code', 'features']
draft: false
summary: 这是一个视频
---

此处写视频的嵌入代码 

然后访问vercel.com/new, 导入项目 https://github.com/ymbrite/tnsb，点击deploy按钮，等待部署完成，部署完成后，我得到网址https://tnsb.vercel.app/

（之后，我又部署了一次，得到网址 https://tnsb-ym.vercel.app/）

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

项目地址：

 https://github.com/timlrx/tailwind-nextjs-starter-blog

 https://github.com/ymbrite/tnsb

演示博客网站： 

https://tnsb.vercel.app/

 https://tnsb-ym.vercel.app/

https://tnsb-ym.vercel.app/blog/fh  不能显示视频。

( https://github.com/timlrx/tailwind-nextjs-starter-blog/issues/1210)

 https://tnsb-ym.vercel.app/blog 支持分页

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

 https://github.com/calmzo/nextjs-blog

（其实是 https://github.com/timlrx/tailwind-nextjs-starter-blog的fork)
https://github.com/ymbrite/cznb
https://github.com/ymbrite/cznb/delete/main/yarn.lock ，删除此‘锁文件‘。
https://github.com/ymbrite/cznb/blob/main/package.json ，设第27行的next的值为latest. 在第6/7/8行，在next dev和next build的后面都加上
--webpack
https://github.com/ymbrite/cznb/tree/main/data/blog
https://cznb.vercel.app/

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