Vercel に Hugo を導入するためのステップバイステップ ガイド

このガイドでは、Hugo Web サイトを Vercel に展開する手順を説明します。
少なくとも 1 つのよくある間違いは避けていただきます。

1. Hugo サイトをローカルに作成する

Hugo がすでにインストールされていると仮定します:

hugo 新しいサイト

---

2. Hugo サイトを GitHub にプッシュする

次に、サイトの Git リポジトリを設定します。

git init

コミットを追加してプロジェクト ファイルをプッシュします:

git add .
git commit
git Push -u オリジンマスター

---

3.Hugo サイトのテーマを追加します。

たとえば、hugo-blog-awesome のような、Nno jQuery、No Bootstrap の超高速テーマを使用できます。

github モジュールとして:
git サブモジュール追加 https://github.com/hugo-sid/hugo-blog-awesome.git

または Hugo モジュール
Hugo Mod を入手 github.com/hugo-sid/hugo-blog-awesome

---

4. vercel設定の追加(vercel.json)

ルート ディレクトリに vercel.json を追加します。ここで、hugo のバージョン、Go のバージョン、および buildCommand を定義します。vercel でフレームワーク プリセットとして Hugo を定義した後、これらの構成は自動検出されます。


vercel.json

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.135.0",
      "GO_VERSION": "1.19.5"
    }
  },
 "buildCommand": "hugo --gc --minify"
}

- 使用している Go と Hugo のバージョンを表示するには、 Hugo env を使用します

次に、更新を Github にプッシュします:
git add .
git commit -m "verceldeploy"
git Push -u オリジンマスター

---

５． Vercel にサイトを展開する

インポート プロセス中に、プロジェクトが Hugo リポジトリに正しく接続されていることを確認してください。

Vercel は環境を検出し、コマンドをビルドします:

または、ここで Vercel 環境変数に手動で設定することもできます

導入ログ:

ビルドが成功すると、Vercel からライブ Hugo Web サイトを表示できるプレビュー リンクが提供されます。 Vercel のプロジェクト設定を通じてカスタム ドメインを構成することもできます。

---

6. ドメインの追加

ドメイン名をお持ちの場合は、プロジェクト設定のドメイン セクションの Vercel にドメイン名を追加できます。次に、vercel ドメインを指すように CNAME をドメイン プロバイダーに追加します。

---

?️ 展開に関する一般的な問題を修正する

主な問題は、たとえ vercel がノード イメージを更新して Hugo を含めたとしても、hugo のサポートがそれほど良くないことです。デフォルト設定では、hugo レイアウトが見つからないというエラーが発生し、デプロイメントでは XML が生成されてしまいます。ページ。
これは、環境パラメータ Hugo と Go のバージョンを json ファイル vercel.json

で定義する必要があるためです。

Hugo と Vercel を使用して個人サイトをセットアップするのは、いくつかの小さな問題はありますが、非常に簡単です。この記事があなた自身のサイトの立ち上げに役立つことを願っています。サイトに加えた変更の詳細については、サイトのコミット履歴を参照してください。

---

いくつかのソース:
https://vercel.com/guides/deploying-hugo-with-vercel
https://vercel.com/docs/projects/project-configuration
https://blog.gusibi.site/article/Best-Practices-for-Deploying-Hugo-on-Vercel

以上がVercel に Hugo を導入するためのステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。