くそー！独自の静的サイト ジェネレーターを開発しました!

今日の Web 開発は、同じことを行うための何千もの新しい方法の作成者のおかげで非常に複雑になっています。 Web 開発の初期の頃、彼は PHP と jQuery を持っていて、必要なものはほぼすべて実行できました。しかし、今は状況が変わりました。

ロングストーリーショート

そこで、私は個人的なウェブサイトを構築する方法を探していました。ブログと私のプロジェクトのショーケースがあれば、それで終わりです。大したことはありませんよね?まあ、それも同じことですが。そこで、私の最初の考えは、これらを技術スタックとして使用することでした

• 反応
• Firebase/Supabase
• Tailwind CSS
• デプロイ用の Cloudflare ページ

まあ、これはハッピーエンドかもしれませんが... ?

すでに述べたように、ブログセクションが必要ですが、皮肉にもブログと反応はうまくいきません。 React は基本的に WebApp を構築するためのものであり、コンテンツ駆動型の Web サイトではありません。理由がわからない人のために、chatGPT

からの要約をここに示します。

React がコンテンツ主導型サイトに適さない理由

ChatGPT は言いました、

React は主にクライアント側のレンダリングに依存しているため、コンテンツ主導型のサイトには理想的ではありません。これは SEO や最初のページの読み込み時間に悪影響を与える可能性があります。コンテンツ主導型サイトは、サーバー側レンダリング (SSR) または静的サイト生成 (SSG) の恩恵を受けますが、React はそのままでは処理できません。 React を拡張する Next.js や Gatsby などのツールは、これらのニーズにより適しています。

次のターゲット: 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 を使用してマークダウンをプレーン 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 テンプレートに動的コンテンツ (投稿タイトルなど) を挿入します。設定ファイルからのスラッグ、サムネイル、および解析されたマークダウン ファイルからのメイン記事。最も重要なのは、SEO とソーシャル メディア用のメタ タグを動的に生成します。その後、投稿リンクが example.com/art/slug になるように、art/.html というファイルに変更を書き込みます。

どのように統合されましたか?

それで、ジェネレーターと対話するための CLI インターフェースを開発しました。 F it のように fit と名付けました。次のコマンドまたはオプションがあります:

$ ./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 中国語 Web サイトの他の関連記事を参照してください。