Peter Chen

Peter Chen

https://blog.peterchen97.cn/about/index.html

ブログを立ち上げて一年だ!

このブログサイトの構築からもう一年が経ちました!この機会に、一年後の自分のブログ構築に対する個人的な考えを振り返り、ブログのデプロイについて少し調整を行ったので、皆さんとシェアできればと思います。ハハハ。

振り返り#

昨年書いたこの記事を振り返ると、いろいろと感じることがあります:

...

Blog が私たちにもたらすもの#

  • 個人ブランド: これは技術的な観点から最も顕著で、多くの技術者が自分のブログサイトを持ち、高品質な分析や考察の結論を記録し共有しています。ブログリストを一通り見て回ると、かなりの収穫があります。
  • 低い執筆コスト: ここで考えたいのは、自分が書く内容の質に対するハードルです。既存の多くのソーシャルプラットフォームで様々な記事を共有する際、内容を何度も修正し加工する必要があり、共有したい内容がこの目に見えないコストによって消えてしまうことが多いです。こうした小さな火花が消えてしまうのは少し残念です。
  • 自由度
    • 製品実践: 皆さんも何度も特定のプラットフォームの読書体験について改善提案をしたことがあると思います。ここは色合いが悪い、あそこは広告が邪魔、ここはエコシステムが閉じている、あそこは審査が厳しい。ブログは比較的自由なキャンバスを提供し、自分のアイデアを実現できます。製品にとって、個人ブログは小さな製品であり、この形態のコンテンツキャリアに関するすべての考えを含むことができます。雀の涙ほどの小ささでも、五臓六腑が揃っています。
    • 技術実現: プログラマーにとって、自サイトを構築することは最良の技術実践の入り口です。もしあなたが望むなら、ブログの内部には試すことのできるすべての技術シーンや技術スタックが含まれており、非常に良い練習の場です。

...

一年が経ち、上記の点についていくつか新しい考えが生まれました。例えば、個人ブランドと執筆のハードルについてです。

個人ブランド#

この点について、今年ある Feishu のドキュメントを見たときに気づきました。これは新しい友達を作るのにとても役立ちます。

💡 陶晨毅の個人説明書 この Feishu のドキュメントは彼女自身の個人情報を非常に詳細に紹介しており、ドキュメントを通じて友達を素早く理解できると感じました。なかなか良いですね。ただ、このバージョンは自己紹介の多くの部分が削除されているようで、彼女を知りたい人が多すぎたのかもしれませんね。2333

picture 3

実際、多くの場合、自己紹介をする際、異なる友達に対して、彼らがその情報を受け入れる程度は非常に異なります。 もしかしたら、あなたが自己紹介をしているときに、興味を持っている友達は、あなたが言ったことが少なすぎると感じ、物足りなさを感じるかもしれませんが、興味のある点をどうやって知るか分からず、非常に気まずい状況になることがあります。新しい友達はあなたが内向的で趣味がない人だと思うかもしれず、それが興味の合う友達を作る機会を逃す原因になるかもしれません。

逆もまた然りです。もし新しい友達があなたを知ることにあまり興味がなければ、あなたがたくさん話しても、相手は理解できない可能性が高く、ただ「もう話すのは失礼だ」と思われてしまうかもしれません。そして、自分の紹介が無意味だと感じることになり、後の新しい友達を知ることに影響を与え、非常に気まずい状況になることもあります。ハハハ。

ブログや記事を通じて人を知ることは、実際にはゆっくりとした非同期の社交方法です。今の社会では、皆が自分の情報処理のリズムと方法を持っているので、自己紹介の際に自分のブログを取り出すことは、決定的な一手になるでしょう。ハハハ(私の「about」ページはこちらのリンクを参照)。

picture 4

今年、新しい友達を作る際にこの方法を試してみたところ、なかなか良い結果が得られました。ハハハ。

低い執筆コスト#

これは本当に影響があります。一つは執筆の抵抗、もう一つは発表のプレッシャーです。

抵抗については、現在はまだ機会を待っている段階で、克服するための良い方法が見つかっていません。ハハハ、もう少し学ぶ必要があります。

しかし、ブログを書くことは、発表のプレッシャーが明らかに軽減されます。例えば、私のこの記事新型コロナ記録は、一般的なチャネルに投稿するにはあまり適していないと感じますが、自分のブログでは全く違います。より自由です。ブログを書くことは、他の人が私の家に来るようなもので、私はリラックスできます。プラットフォームで記事を書くことは、他の人の家に行くようなもので、少し気を使います。ハハハ。

picture 5

しかし、この文章は数年後に振り返って見たい内容であり、確実に興味のある友達にとっても役立つでしょう。もし自分にブログがなければ、生活の中で思い出に残る瞬間を失ってしまったかもしれません。それは少し残念です。

感想#

自分に物を入れるためのかごをいくつか買う#

「手にハンマーを持っていると、何でも釘に見える」という理論があります。

picture 6

しかし、私がブログを書いて一年間の感想として、この理論には場合によっては後半の文があるかもしれません。しかし、大部分の状況では、ハンマーを持っていなければ、釘さえ見えないのです。

人間の脳は実際には非常にエネルギー効率の良いアルゴリズムを使用しています。 知る必要のないものに直面したとき、脳は情報を優先度の低いキューの最後に置きます。処理するエネルギーがなければ、直接捨ててしまいます。しかし、この時にハンマーを持っていると、優先度が高くなり、もしかしたら気づくかもしれません。例えば、非常に有名な妊婦効果(あなたが何かに注目すればするほど、それがより多く現れる)です。

ブログを書いて一年間、私は多くの優れたブログサイトを発見しました。以前は技術的な問題を調べるために訪問して、問題を見てすぐに出て行っていました。しかし、自分のブログについて考えることが増えるにつれて、他の人のブログから得られる情報量も増えました。

例えば、私はこの種のブログの様々な細部に徐々に注意を払うようになりました。 デザインの観点から、サイト全体のレイアウトを評価し、UI デザインが先進的で明確で美しいか、クリック可能なコンテンツやリンクのデザインが冗長でないか、アバウトページにブロガーに連絡する方法があるか、サイト全体の読み込み状況や表示状況はどうか、対応する技術スタックは何か、サイトの訪問トラフィックはどうか、各記事の訪問数はどれくらいかなどを見て、このサイトを評価します...

例えば、diygod 大佬がオープンソースした xlog、見てください https://diygod.cc

picture 7

同様に、仕事の中でも、ブログをいじっているときに、どのような技術を使って低コストで自分のニーズを実現するかを考えるようになり、仕事の中でのいくつかのオペレーション技術、例えば Nginx の設定、Docker のデプロイ、DNS の解析や CDN の加速などに徐々に注意を払うようになりました。以前は「使えればいい」という基準から、徐々に「どうやって最適化するか」というレベルに達しました。

そのため、私はこの理念を物を入れるためのかごの理論(適当に作ったものです。ハハハ)に拡張しました。私たちは生活の中で、出かけるときに物を入れるためのかごをいくつか持っていく必要があります。ハンマーのような有用な道具を持っていると、もっと多くの生活の中の釘を発見できるかもしれません。

picture 8

私は学びました。ハハハ。

基盤施設のコスト削減の必要性#

最初は、ブログは無料のデプロイプラットフォームを使えばいいと思っていたので、他のパフォーマンス最適化の手段は考えていませんでした。しかし、最近使用シーンが増えるにつれて、最適化を行うには本当にお金がかかることに気づきました。OSS はお金がかかり、CDN もお金がかかり、クラウドサーバーもお金がかかり、帯域幅もお金がかかります。以前は作業をするために予算を申請する必要がありましたが、この予算が実際に自分の財布に影響を与えると、その体験は全く異なります。ハハハ。

字節で働いていたとき、開発した抖音の動画ストリームのポップアップクーポンスタイルを思い出します。同僚がコードをレビューしているときに、内部の分割線に使われている PNG を SVG に変更するように提案されました。

picture 9

若い私はその時に変更しましたが、心の中では「このクーポンの背景の線は、PNG で数 KB に過ぎないのに、わざわざ一大塊の SVG に変更する必要があるのか?」と思っていました。たとえ全てのユーザーが一度見ても、そんなに多くのトラフィックはかからないだろうと思っていました。しかし、後で気づいたのは、これは一つの考え方であり、小さなことから大きなことを見出すことです。もしサイズの差が大きければ、ユーザー数が今の 8 億人を掛けると、そのトラフィックの使用コストは天文学的な数字になります。避けられるなら、なぜ変更しないのでしょうか。ハハハ。

アーキテクチャの調整#

得られるものがあれば、当然支払うものもあります。例えば、いくつかの落とし穴にハマることもあります。👀

調査の前に行った作業はすでにかなり整っていましたが、長期的な使用の中で、いくつかの問題が残りました。例えば:

  • CD の Fly.io へのデプロイプロセスが非常に時間がかかる
  • 便利な機能がまだ拡張されていない
  • リソースが多すぎると、アクセス速度が明らかに低下する

これらの問題を解決するために、以前の簡易アーキテクチャをいくつか調整しました。以下にそれぞれ説明します。👀

省流のポイントは:やはりいじる必要があり、技術を理解し、デバッグし、メンテナンスする必要があるということです。🤣

デプロイロジックの最適化#

元のデプロイロジックは Astro + Github CD + Fly.io でした。

ブログ自体の技術スタックは変わっていませんが、Astro の更新とメンテナンスは非常に頻繁で、コミュニティも非常に活発です。唯一の不満は、Astro の更新が早すぎることと、いくつかの簡単な汎用コンポーネントエコシステムが比較的不足していることです。例えば、画像プレビューや Markdown 自動生成メニューなどは自分で開発する必要があります。👀

最初に直面した問題は、Github デプロイの時間が特に長いことです。詳しく見ると、問題は Fly.io にあり、実行されるデプロイプロセスの時間が非常に長いです。

picture 10

Fly.io のリモートランナーはパフォーマンスが悪く、Astro プラグインが画像圧縮を実行する際に非常に遅くなります。最後には、フォルダ全体を Docker イメージにパッケージ化してリモートに送信し、サーバーで起動する必要があります。この過程は実際にはそんなに複雑にする必要はありませんでした。Fly.io の国内アクセス機能を利用するために、そう設計したのです。ハハハ。

しかし、最近ドメインを登録したので、国内の OSS サービスを利用できるようになりました。突然、実際には直接ビルドして OSS に投げるだけでよく、こんなに複雑にする必要はなかったことに気づきました。🤣

picture 11

現在、全体を最適化した後、デプロイにはわずか 2 分しかかからなくなりました(ローカルで実行、理由は後述します。👀)。

便利な機能の拡張#

ブログは記事の質 > ユーザー体験であるという点では、hackernews がその例です。この関係は確かに存在します。

picture 12

しかし、これは矛盾しません。記事の質が短期間で向上できない場合、ユーザー体験を向上させることも良い選択です。ハハハ。ユーザー体験が良ければ、インタラクション率が高まり、執筆のモチベーションも生まれます。これも一種の最適化です。ハハハ。

アクセス数#

アクセス数の統計について、最初は MongoDB が提供する無料で使用できる Functions を使用しようと思っていましたが、実際には通りました。しかし、問題はこのサーバーが海外にあり、viewCount を読み込むたびに 10 秒以上かかるため、ユーザー体験が確かに良くありませんでした。

picture 13

現在のプランは、N8N のワークフローを使用して Webhook を提供し、ページ初期化時に Webhook を呼び出し、ロジックを実行して内容を PostgreSQL に保存します。具体的な内容は次の記事で詳しく説明します。ハハハ、その中には少しの工夫があります。

picture 14

コメント機能のサポート#

ここで reorx 大佬に感謝の意を表します。彼のブログを即刻で見かけたとき、彼が多くの技術実現プランを調査し、最終的に remark42 を解決策として選んだことに気づきました。詳細は記事原文を参照してください。

ブログにコメントを追加することは確かに解決が難しい問題です。ユーザー体験を重視すれば、国内では使えない;国内で使えるものを選べば、ユーザー体験が悪くなるという典型的なジレンマです。

picture 15

幸いなことに、remark42というオープンソースのコメントソリューションがこの問題を解決しました。現在、私は自分のクラウドサーバーにコメントサーバーをデプロイしており、全体的には比較的安定しています。しばらく使ってみて問題は見つかっていませんので、皆さんも記事の最後にコメントを残してテストしてみてください。ハハハ。

画像リソースの読み込み速度が遅い#

この問題は、私が《進撃の巨人》最終話の図録を投稿したときに最初に気づきました。画像が多くなると、Fly.io が提供する無料の帯域幅では明らかに足りなくなり、アップロードしたのはすべて原画で、読み込み速度が確かに遅くなります。ハハハ。

picture 16

しかし、偶然にも、かごの中の道具が役立ちました。デプロイを OSS に移した後、直接 CDN を追加することで問題が解決しました。

ここで私は七牛クラウドの OSS + CDN サービスを選びました。一言で言うと、安いです。以前、学校の edu メールアドレスを登録していたので、1 年間 40G の OSS を無料で使用できることができましたので、利用しました。

しかし、使ってみると、やはり高いものの唯一の欠点は高いことで、安いものの唯一の利点は安いことです。 現在、アップロードは比較的面倒で、qshell のキャッシュ戦略に問題があり、失敗したファイルはリトライをサポートしていないなどの問題があります...

また、Github Actions で OSS にアップロードするのは非常に遅く、ランナーが海外にいるためです... したがって、現在のロジックはローカルでデプロイを実行し、公開後に手動で処理する必要があり、少し面倒です。後で最適化する予定です。

現在のキャッシュ戦略は HTML をキャッシュしないことですが、ホームページはキャッシュしています。これはパフォーマンスのためではなく、バイパスできないからです。🤣

前述のように、リソースは国内の OSS に移され、相対的に海外のアクセスが遅くなりました。ここでは、グローバル CDN を直接開設し、アクセス量が少ない場合は価格も完全に受け入れられます。もし折りたたむことを望むなら、DNS を境外に分割して vercel に移し、vercel の CDN を使用すればかなり速くなるはずですが、現在は海外のトラフィックがあまりないことを考慮して、ここで止めておきます。👀

picture 17

ブログのまとめ#

昨年を振り返ると、いくつかの記事を書いたことがわかります。技術に関連するものはあまり多くありませんが、次回は... 次回は必ず...

picture 2

アクセス数が最も多かった記事#

昨年書いたブログのこの記事は、アクセス数が 1K を超えました。主な流入は即刻からのもので、2022 年になってもブログは依然として熱い話題のようです。ハハハ。

2022 年になり、私はついにもう一つのブログサイトを作りました

picture 18

まとめ#

実際、私がこの記事を書くことを始めたとき、単にブログの技術スタックをアップグレードする方法を記録したいと思っていました。しかし、ふと気づくと、ちょうどこれが私のサイト構築の再スタートの 1 周年であり、まとめることができるのではないかと思いました。そして、書けば書くほど、どんどん増えていきました。

だから、多くの場合、私たちは非常に強いアウトプット能力と欲望を持っているのですが、それを考え整理する機会が不足しているだけです。日記を書くことでもブログを書くことでも、非常に良い形式です。重要なのは書くことです。👀

ここまで読んでくださった方、サイトを作りたくなりましたか?もしそうなら、ぜひお話ししましょう。ハハハ。興味があれば、about の Discord で私を見つけて、気軽にお話ししましょう。

次回の更新では、zeabur のインスピレーションを受けて、私が個人的にいじっているいくつかの小さなものについてお話しします。👀興味のある方は RSS を購読してください。👀

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。