秋实-Allenyou的小窝

先前，我在这是一个正经的 2023 总结这篇文章中提到了我有在着手重构我的 Blog。现在，经过了不少的面向文档编程，一个具备基本功能的 demo 已经上线了。

此处应有撒花

目前，这个项目被我命名为blog-ng-next，部署地址为 https://blog-ng.allenyou.wang/ ，欢迎大家提出意见。

UPD 2024-02-11： 该项目已经开源，仓库地址为Allenyou1126/blog-ng-next

UPD 2024-02-18： 新博客已经正式上线，原博客迁移至 https://blog-old.allenyou.wang

项目结构

这个项目是一个静态网站生成器。

前端

前端采用了 Next.js 框架。这是一个非常有名的 React 框架，提供了良好的 SSR 支持（虽然我用的是 SSG）。

才不是那个 SSR 呢~这里 SSR 是 Server Side Rending ，即服务端渲染的缩写

~~由于自己做不来设计，~~博客的前端样式模仿自tcdw，感谢大佬授权！

在 UI 设计上，我选用了 Tailwind CSS，一个基于 Utility-first 思想构建的 CSS 框架，成功让我实现了不用写 CSS 的网页设计。取而代之的是，HTML 元素的样式可以直接在class属性中用简短的类名组合构建而成。

例如，一个 footer 组件就可以这样子写：

import Link from "next/link";

export default function Footer() {
	return (
		<footer className="bottom-0 relative items-center flex-col flex my-3 gap-3 justify-center w-full text-center py-4">
			<p>Copyright © 2024-{new Date().getFullYear()} 秋实-Allenyou</p>
			<p className="opacity-70">
				Powered by <Link href="https://nextjs.org">Next.JS</Link> &{" "}
				<Link href="https://tailwindcss.com">TailwindCSS</Link>
			</p>
		</footer>
	);
}

书写体验非常好~

后端

由于后端太难写我砍掉了原有规划的 RESTful API 后端，转而使用了一个自己写的非常简陋的 File-based CMS 作为数据来源。构建时，这个 CMS 会读取指定目录下面的所有文章，通过类似 Hexo 的 Front-matter 语法标记一些文章信息并传递给 Next.js。

不用 Hexo 其实是因为我太菜看不明白 Hexo Warehouse 的文档

构建

我在自己的服务器上建立了一个 Git Repo，在本地的 NPM Post-build Hook 中写了一个脚本，将构建结果复制到本地的 Deploy Repo 中并 push 到服务器上，服务器端使用 Git 提供的 post-receive Hook 自动将数据 checkout 到 NGINX 配置的网页根目录，并通过阿里云的 OSSUtils 将部分静态资源放到 OSS 上通过 CDN 分发提高访问速度。

阿里云那个文档真不是正常人能看懂的，谁家好人写文档里面所有 Source Path 和 Destination Path 都是反的啊摔

目前实现的功能

• 文章列表
• 文章展示
• 友链
• ”关于“页面
• 留言板
• 针对移动端的响应式布局优化（可以把浏览器窗口缩小看看 x）
• 夜间模式
• 评论（基于自建 Waline 与官方 @waline/client 修改样式）

计划实现的功能

• 文章 tag 功能

呐，这下可不能说我鸽子了吧（溜）