这个博客是如何搭建的

前言

最开始接触博客是微软的FrontPage，所见即所得编辑器在当时大概算得上很大胆的创意，相比现在的低代码炒作，在这之后，入坑自媒体、内容社区，在网上和陌生人争辩，浪费了美好的青春。

搭建博客遇到的两个大坑，Wordpress和ghost，Wordpress在我看来是对FrontPage停止维护的反抗斗争，拥有Web2.0的交互属性和可拓展性，经典编辑器（现在是古腾堡编辑器）的设计让我想到word2003，将网页内容的可视化编辑呈现在前端，但是Wordpress带来的可拓展性却是复杂性，各种插件、主题和php的冲突和兼容问题，ghost使用node.js技术，但是其主题细节很多又无法让我完全满意，打算修改默认主题时，就想既然都手写HTML、CSS了，为何不直接使用前端框架生成网站，静态站点生成器（SSG）是主要的独立博客解决方案，而React和Next.js却给我这个什么技术都没有人的小白打开新的大门。

博客模板

访问/og?title=这个博客是如何搭建的也能看到这张卡片，通过文字生成图片，这里是用了@Vercel/og的OG生成 Edge Function，当文章没有设置图片时，就会自动生成OG。

SEO信息如下：

<meta property="og:image" content="https://prologue.dev/og?title=这个博客是如何搭建的"/>

目录结构

回到博客的构建上，首先是文件架构，我将博客分为两部分，内容信息和前端模板，因为如果将内容信息和前端目录混在一起，杂乱无章，会导致增加维护模板的时间。

.
└── prologue.dev/
    ├── data/
    │   ├── content/
    │   │   ├── blog
    │   │   └── pages
    │   ├── headerNavLinks.js
    │   └── sitemetadata.js
    ├── src/
    │   ├── app
    │   └── conponents
    └── public

所以我将内容信息采集全部放到/data，也就是说只需要修改/data就可以自定义网站，其中在/content中的/blog放markdown格式的文章，/pages放不同页面的信息，headerNavLinks.js设置导航栏的超链接，sitemetadata.js设置个性化站点的内容。

/src目录则主要用来维护博客模板的文件路由、layout.js全局和/components组件，要获得本博客的效果，是不需要修改/src目录下的文件的。

/public是Next.js储存静态文件的目录。

部署

可以直接git clone我的博客进行修改，也可以在Vercel上一键Fork并部署。

理论上Next.js能部署在支持Node.js的平台上，但不是所有平台支持next start和/og的社交平台卡片生成，所以应该禁用图片优化，静态导出。

内容结构

以下是文章markdown的frontmatter结构：

---
title: title
description: description
publishDate: 2022-11-13
(required)

lastmod: 2023-07-02
featured: true
tags: ["tag1",tag2]
image: /static/photos/06.jpg
imageDesc: This is a static file
(optional)
---

以下是页面markdown的frontmatter结构：

title: title
description: description
(required)

维护模板

大部分问题都能通过React生态components的技术文档解决，需要做的只是拼凑起来，仅此而已，梳理下思路：

完整的博客 = Markdown、MDX、Latex等标记语言渲染成HTML + SEO + 文件路由 + 交互

渲染问题contentlayer或next-mdx-remote都能解决，配合Remark和Rehype两个生态的插件拓展。

目前交互选择以Github Discussion为后端的Giscus。

如果要用mdx，就在contentlayer.config.js里按照文档里修改。

搜索引擎使用Fuse.js，实现全文模糊搜索。

SEO目前Next.js13框架已经内置Opengraph和JSON-LD，RSS和SEO的配置都是填表游戏，所以这套模板没有任何技术含量。

建议

请保持对开发和写作的热情，最花时间的是一些非技术性的事物，例如排版布局的细节，自适应窗口大小等，还有CSS渐变效果实现还需要点想象力；而写作更需要连贯的思考输出，而不是“坚持”，保持好奇心和持续观察外界。

请尽可能保持简洁，如果交互、设计过多，内容就不是博客的主体了。

请尽量掌握维护博客的技术或方法。能快速上手的一定是伪命题，要做好一件事物，必须付出一定精力和时间学习，到Github上看别人代码是如何实现的，又有哪些小bug，这就和自己财务规划一样，包括自己的资产负债表的设计，没有人能够比自己做得更好，但自己又不得不去学着做。

请不再折腾，折腾数据库现在是真怕了，就像是维护多一个项目，静态化数据用数据库是没有意义的，我们能不能不要为了折腾而折腾。

请结构化你的文本，本模板选择Markdown + Latex + Frontmatter和Unified.js（一个使用语法树处理内容的接口），是为了结构化文本(Content as structured data)，方便备份和数据读取，只要有底层数据在，就能简单地完成前端渲染。