这个网站是如何构建的

使用方式

本站源码完全公开：GitHub - Lonor/site.

直接将 Markdown 文件 (.md) 存放在 posts 文件夹下即可渲染当前文件，使之成为静态页面(SSG)。 博客的首页索引目录也为同步生成，而无需手动维护。

About 页面也同理基于 readme.md 文件生成而来。

博客相关的信息配置，如标题、作者等可在 lib/config.mjs 文件中配置。

推荐使用 pnpm 来作为 node.js 的依赖管理工具。

pnpm install
pnpm dev

本地访问 http://localhost:3000 即可。

通过 pnpm build 来打包，pnpm start 则用于生产环境的启动。 通过 pnpm fmt 来将所有代码和文本进行格式化。

技术细节

此站点由 Next.js 框架和 TailwindCSS 样式构成。前者是一项基于 React 的 SSG/SSR 开源项目，后者是一个目前流行的原子化 CSS 库，让不太会写 CSS、基础薄弱的我也能快速的写出灵活的样式。

Next.js 会主动调用我们写好的一些函数 (getStaticProps())，让组件得到数据的输入，从而在构建阶段将 React 组件提前渲染完成。remark 库可以将原生的 markdown 语法编译成 html 对应的 dom - 在此项目中，我们让它固定遍历 posts 文件夹下的 markdown 文件，依次编译，让其作为 [id].js 的动态路由页面的 props，从而渲染出博客文章:

// [id].js
export const getStaticProps = async context => {
  const { id } = context.params;
  const mdData = await getMdContentById(id);
  return {
    props: mdData,
  };
};

这样做的好处很多:

• 适合被 CDN 缓存
• 优秀的 SEO 表现
• 节省网络带宽、流量
• O(1) 时间复杂度的 TTFB

总之一个字，快！如果你尝试关闭当前浏览器的 JavaScript 功能，这个网站也一样能正确渲染并展现。

不光如此，Next.js 也提供了服务端渲染的能力，同样也能带来较好的 SEO 体验，不展开说了。

上述这种技术被称之为 JAMstack：JavaScript, API & Markup.

一种有趣的说法是，JAMstack 是 CDN 优先的应用程序。

It's now possible, instead, to push content directly to the network and design frameworks that optimize for this capability. As a result, with optimizations like static asset hoisting, websites are now becoming faster and more reliable than ever before.

Movie

你可以编写特定的 React 组件来让 Markdown 支持更丰富的页面内容，这种实现方式和 MDX 类似。 The source of this component is coded via react component in markdown!

Code:

// filename: how.md
<div>
  <douban id="3042261"></douban>
<div>

Result: