Pages

Friday, 25 October 2024

搭建基于 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://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)

 

 

No comments:

Post a Comment