如今的 Web 开发变得如此复杂，这要归功于数千种新方法的创建者来完成同样的事情。在 Web 开发的早期，他使用了 PHP 和 jQuery，它们几乎可以完成我们需要的一切。但现在情况已经改变了。

长话短说

所以，我正在寻找一种建立我的个人网站的方法。其中会有一些博客和我的项目展示，就是这样，没什么大不了的，对吧？好吧，虽然也是同样的事情。所以，我最初的想法是使用这些作为我的技术堆栈

• 反应
• Firebase/Supabase
• Tailwind CSS
• 用于部署的 Cloudflare 页面

嗯，这可能是幸福的结局，但是......？

正如我已经说过的，我需要一个博客部分，讽刺的是，博客和 React 并不能很好地结合在一起。因为 React 基本上是用于构建 Web 应用程序而不是内容驱动的网站。现在那些不知道为什么的人这里有一个来自chatGPT的总结

为什么 React 不适合内容驱动的网站

ChatGPT 说，

React 对于内容驱动的网站来说并不理想，主要是因为它依赖于客户端渲染，这可能会对 SEO 和初始页面加载时间产生负面影响。内容驱动的网站受益于服务器端渲染 (SSR) 或静态网站生成 (SSG)，而 React 无法直接处理这些内容。 Next.js 或 Gatsby 等扩展了 React 的工具更适合这些需求。

下一个目标：NextJs

很明显，我需要为博客网站提供 SSR，因为我想要搜索引擎良好的索引和专业的社交媒体链接预览。 NextJs 可以给我这两点，但仍然存在一个问题，而且是个人问题。

看，我一直喜欢使用 cloudflare 页面并想坚持下去，此外我希望 cloudflare 的免费电子邮件路由将自定义电子邮件地址附加到我的域，从而降低成本。

Cloudflare 的 NextJS

我尝试通过其官方文档将 nextJS 站点部署到 cloudflare 页面。嗯，事情进展不顺利。我无法在那里部署，我尝试了几个小时寻找解决方案，但没有任何效果。这么说吧，nextJS 和 cloudflare 对我来说并不能很好地结合在一起。因此，如果 Vercel 或 Cloudflare 的任何人阅读本文并纠正我，如果我遗漏了某些内容。

好吧，此时我已经绝望了，我最后的选择是SSG。

下一个解决方案：SSG

现在SSG很好，我明白这里的重要性。问题是我以前从未与 SSG 合作过，并且有多种途径可以通过。有雨果、盖茨比、阿斯特罗等等。可能还有更多。现在我对其中任何一个都不熟悉，此时我非常沮丧，以至于我不愿意花一点钱来学习一个简单的博客应用程序的新工具。所以我当时就想，我会做我自己的事情。

创建我自己的静态站点生成器。

我决定开发自己的静态站点生成器的几点原因

1. 我很沮丧（当然哈哈）
2. 由于我正在为自己的事情制作自己的工具，因此我将完全控制页面的生成方式。他们会是什么样子。
3. 我喜欢重新发明。
4. 我有空闲时间。

计划

该计划采用老式的方式创建网站。单独的文章将有自己的 html 页面。

完整概要如下：

1. 我将在 palin Markdown 文件上写作
2. 使用python将markdown解析为纯HTML
3. 我已经有了一个模板，其中不同的部分将被动态注入。
4. 此外，我还将有一个与本文相对应的配置文件。所以文件层次结构看起来像这样

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

因此，每个帖子都会有自己的文件夹，该文件夹将包含 config.json 和 art.md ，python 脚本将采用 template.html 并将动态内容插入到该 HTML 模板中，例如帖子标题， slug、配置文件中的缩略图和解析后的 Markdown 文件中的主要文章。最重要的是，它会动态生成 SEO 和社交媒体的元标记。之后，它会将更改写入名为 art/.html 的文件，以便帖子链接为 example.com/art/slug。

它是如何整合的？

好吧，我开发了一个 CLI 界面来与生成器交互。我将其命名为 fit，如 F it 所示。它有以下命令或选项：

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit  
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload   Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

部署机制

所以，就像我说的，我想使用 Cloudflare 页面进行部署。基本上我所做的是创建一个名为 prod 的分支，每当运行 ./fit deploy 命令时，它基本上都会将所有必要的文件复制到 prod 分支并将更改推送到 github。然后，cloudflare 将自动构建并重新部署更改。

处理图像

为了处理我使用 firebase 存储的图像或任何静态文件，./fit 上传器将弹出一个基于 GTK 的 GUI 上传器，我可以从中上传图像，它会给我公共 url，我可以比复制，如下所示：

上传接口

帖子上传接口

CLI界面

还有一个 CLI 界面，可以通过 ./fit upload ）发布或编辑文章

动态环境背景

所以，我想当我自己处理所有的建筑和生成时，我绝对可以用它做一些很酷的东西，所以我在每篇文章中添加了动态彩色环境背景。我们的想法是从缩略图中选择一种平均颜色，然后将其变暗并将其用作背景。我还从缩略图中为链接和按钮选择了主要颜色，老实说，它看起来真的很酷，这是一个屏幕截图

评论与讨论

由于我基本上没有使用任何数据库或根本没有后端服务，所以我必须为此选择一个外部服务，还有什么比 Disqus 更好。

值得吗？

嗯，说实话，就像我说的，我花了一些空闲时间，所以是的，这绝对值得，而且说实话，我花了 2-3 天的时间来完成这个完整的项目创造一些有创意的东西真的很有趣。

总结

所以，我在这个项目中获得了非常有趣的体验，并希望能对其进行更多改进并添加更多功能。现在它是如此基本和简单，这就是我想要的。如果您喜欢这个项目或希望我将其开源，请告诉我。哦，这是我对 shazin.me 尖叫的网站的链接，感谢您的阅读。