拧它！我开发了自己的静态站点生成器！

如今的 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 <action> <argument>
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-<n>       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload <file_path>  Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Deployment mechanism

So, like I said I wanted to use Cloudflare pages for deploying. Basically what I've done is I've created a branch called prod and whenever the ./fit deploy command is run it will basically copy all the necessary files to the prod branch and push the changes to github. Then, cloudflare will automatically build and redeploy the changes.

Handing images

In order to handle images or any static files I have used firebase storage, the ./fit uploader will pop open a GTK based GUI uploader from which I can upload an image and it will give me the public url which I can than copy, Here's how it looks:

Upload Interface

Post Upload Interface

CLI Interface

There's also a CLI Interface which can be used by ./fit upload

Dynamic Ambient Bcakground

So, I thought when I am the one handling all the building and generation myself I can definitely do some cool stuffs with it, so I've added a dynamic colored ambient background to each post. The idea was to pick an average color from the thumbnail image and then darken it and use it as the background. I've also picked a primary color for the links and buttons from the thumbnail image as well and honestly to me, it looks really cool, here's an screenshot

Comments and Discussion

Since I was working with basically no database or no backend service at all, I had to choose an external service for this and what else does this better than Disqus .

Was it Worth It?

Well, to be honest like I said I was spending some free times, so yeah it was definitely worth it, and it didn't take me long time to be honest I've spent 2-3 days for this full project and really had fun building something creative.

Wrapping Up

So, I've had really fun experience with this project and will hopefully do more improvements and add more functionalities to it. Right now it's so basic and simple which was what I wanted. If you like this project or want me to open source it please let me know. Oh and here's the link of the site I was screaming about shazin.me Thanks for reading.

以上是拧它！我开发了自己的静态站点生成器！的详细内容。更多信息请关注PHP中文网其他相关文章！