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

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

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

• 反応
• ファイアベース/スーパーベース
• テイルウィンド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 
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 というブランチを作成し、./fitdeploy コマンドが実行されるたびに、基本的に必要なすべてのファイルを prod ブランチにコピーし、変更を github にプッシュすることです。その後、cloudflare が自動的にビルドして変更を再デプロイします。

お渡しイメージ

Firebase ストレージを使用した画像や静的ファイルを処理するために、./fit アップローダーは、画像をアップロードできる GTK ベースの GUI アップローダーを開き、公開 URL を提供します。コピーします。次のようになります:

アップロード インターフェース

ポストアップロードインターフェース

CLIインターフェース

./fit Upload のようなターミナル エミュレータを使用して、携帯電話からも記事を公開または編集できるようになります。

ダイナミックアンビエント背景

そこで、私がすべての構築と生成を自分で処理すれば、間違いなくクールなことができると考えたので、各投稿に動的な色のアンビエント背景を追加しました。このアイデアは、サムネイル画像から平均的な色を選択し、それを暗くして背景として使用することでした。また、サムネイル画像からリンクとボタンの原色も選択しました。正直に言って、とてもクールに見えます。スクリーンショットは次のとおりです

コメントとディスカッション

私は基本的にデータベースやバックエンド サービスをまったく使用せずに作業していたので、これには外部サービスを選択する必要がありましたが、これが Disqus より優れているものは他にあります。

それだけの価値がありましたか?

そうですね、正直に言うと、先ほども言いましたが、私は自由時間を過ごしていたので、確かにそれだけの価値はありました。正直に言うと、それほど時間はかかりませんでした。この完全なプロジェクトに 2 ～ 3 日を費やしましたクリエイティブなものを作るのは本当に楽しかったです。

まとめ

ということで、このプロジェクトでは本当に楽しい経験ができたので、さらに改良を加えて機能を追加していきたいと思っています。今はとてもベーシックでシンプルなもので、それが私が望んでいたものでした。このプロジェクトが気に入った場合、またはオープンソースにしてほしい場合は、お知らせください。ああ、これが shazin.me について私が叫んでいたサイトのリンクです。読んでいただきありがとうございます。