Vercel で Hugo をホストする方法

私は Hugo と一緒に個人的なウェブサイトを構築することにしました。私が選択に基づいた唯一の基準はビルド時間でした。コンテンツ管理の特典に関しては、Hugo は Astro と同じレベルにあると思っていましたが、まだそこまでではありません。あるいは、これまで私が出会った他のほとんどの静的サイト ジェネレーターよりも古いため、独自の道を歩んでいるとも言えます。さらに、これは Go アプリケーションであるため、テクノロジーの選択を評価する際に考慮すべきもう 1 つの重要な要素となります。

何が追加できるのか！

はい、Hugo の機能を拡張することができます。ビルド プロセスを変更するモジュールを通じて、不足している機能を追加できます。たとえば、Hugo では MDX サポートが不足していました。ビルド時に MDX をレンダリングするモジュールを通じてこの問題に対処できます。私自身は試したことはありませんが、可能だと思われます。
また、並列ビルド パイプラインを追加することもできます (そう呼ぶことができるのであれば)。これには、Vite、Turbo、Webpack などのツールの使用が必要になる場合があります。ただし、このアプローチではビルド プロセスが複雑になり、Hugo の主要なビルド メカニズムが遅くなる可能性があります。これらの統合は、Tailwind およびその他のフロントエンド ライブラリを組み込むために使用されています。興味深いことに、Hugo の今後の機能を見ると、Tailwind と他のテクノロジーを統合する計画が示されています。

ヴェルセルを基礎にして構築する

私はいくつかのサードパーティの Hugo ツール、特に HugoMods を使用しました。フォント全体をインポートせずにウェブサイトにアイコンを追加したかったので、アイコン モジュールに注目しました。検索中に最初に表示されたのは Icons モジュールでした。 Bootstrap、Font Awesome、Feather アイコンなど、さまざまなアイコン ベンダーを提供しています。
ローカルでは、すべてが完璧に機能しました。しかし、変更をプッシュした後、何も変わっていないようでした。 Vercel のビルド ページを確認すると、次のことに気づきました...

[12:10:48.021] Running build in Washington, D.C., USA (East) – iad1
[12:10:48.210] Cloning github.com/mohessaid/mohessaid (Branch: main, Commit: eaeecd1)
[12:10:48.449] Cloning completed: 238.727ms
[12:10:49.038] Restored build cache from previous deployment (5i5sCdjnY3KZXgGBqbqfgJUjrwYB)
[12:10:49.132] Running "vercel build"
[12:10:49.714] Vercel CLI 39.0.2
[12:10:50.440] Total in 3 ms
[12:10:50.441] Error: failed to load modules: failed to download modules: binary with name "go" not found in PATH
[12:10:50.446] Error: Command "hugo --gc" exited with 1
[12:10:50.625]

Hugo がビルドに必要なモジュールをインストールしようとしたとき、Go バイナリが見つかりませんでした。私は迅速な解決を期待してクロードと GPT に助けを求めましたが、彼らは直接支援を提供することができませんでした。私は彼らを各ステップごとにガイドしなければなりませんでしたが、最終的には彼らが私を助けてくれるという希望を失いました。
Vercel 入力フィールドの制限がなければ、ほぼ成功する解決策として Claude を使用したこともありました。

何がうまくいきましたか?

Vercel ダッシュボードで自分の Web サイトの設定ページに移動しました。 [環境変数] タブで、「HUGO_VERSION」という名前の変数を追加し、その値を利用可能な Hugo の最新バージョンに設定しました。

「全般」タブで、フレームワークのプリセットとして Hugo を選択します。次に、ビルド コマンドを次のようにオーバーライドします:

curl -L https://go.dev/dl/go1.22.2.linux-amd64.tar.gz -o go1.22.2.linux-amd64.tar.gz && tar -C /usr/local -xzf go1.22.2.linux-amd64.tar.gz && export PATH=$PATH:/usr/local/go/bin && go env GOTPATH  &&  hugo --gc --minify 

注: 私は Go バージョン 1.22.2 を使用しています。これは、執筆時点で最新です。特定の要件に合わせてバージョンを変更できます。

ビルド コマンドを使用する理由

あなたの疑念はわかります。あなたと同じように、私も賢い解決策があると思っていました。最初に、[インストール コマンド] フィールドで Go をインストールしようとしましたが、惨めに失敗しました。私の徹底的なトラブルシューティングにも関わらず、Vercel のビルド プロセスはバイナリを見つけることができませんでした。
無数の潜在的な解決策を模索しましたが成功しませんでした。私は、誰かがインストール プロセス全体をビルド フィールドに直接配置していたという GitHub の問題に遭遇しました。彼らのアプローチを真似して、私は最終的に成功を収めました。この時点で、解決策はすべてを物語っています。
これらの手順をインストール コマンド フィールドに入力しようとすると、エラーが発生する可能性があります。

またはこれ

Amazon Linux Extras をインストールしても、Go インストールの課題は解決されません。この方法で利用できる Go のバージョンはかなり古いです。このアプローチを徹底的にテストしましたが、一貫して失敗しました。インストール コマンドで yum と dnf の両方のパッケージ マネージャーを使用しようとしましたが、どちらの方法でも Go バイナリの問題を解決できませんでした。

---

最後に、この投稿をさまざまなプラットフォーム間で共有して、どのプラットフォームが検索結果で最初に表示されるかをテストしました。私は数か月前にこれを行うつもりでした。しかし、適切な投稿ができませんでした。ここから実験をフォローできます。

以上がVercel で Hugo をホストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。