Vercel を使用して Hexo の静的なブログを無料でデプロイする
Hexo のインストール#
- 公式ドキュメントを参照 ドキュメント | Hexo
- 理論的には、「概要」と「ウェブサイトの構築」の 2 つの手順を行えば十分です
- テーマのインストール:後述を参照
GitHub のリモートリポジトリを作成する#
- GitHub で新しいリポジトリを作成し、任意の名前を付けます。他の設定は変更せず、プライベートに設定することもできます
- アカウント設定でパーソナルアクセストークンを生成し、適切に保管します。
ローカルの git リポジトリを作成し、GitHub にプッシュする#
- Hexo のルートディレクトリに移動します
# gitリポジトリを作成
git init
git add .
git commit -m "first commit"
git branch -M main
# GitHubに接続します。例:https://github.com/<ユーザー名>/<リポジトリ名>.git
git remote add origin <リモートリポジトリのアドレス>
# アカウントとパスワードを保存するように設定します。--globalパラメータを削除すると、現在のパラメータのみが保存されます
git config --global credential.helper store
git push -u origin main
# アカウントとパスワードを入力するように求められます。パスワードは、以前に生成したパーソナルアクセストークンであり、GitHubアカウントのパスワードではありません
Vercel を使用してデプロイする#
- GitHub アカウントで vercel.com にログインします
- GitHub からプロジェクトを追加し、作成したリポジトリを選択します
- 自動的に Hexo プロジェクトとして認識され、設定を変更する必要はありません。そのまま確定します
- その後、vercel が提供するドメインでアクセスできるようになります。また、独自のドメインを使用することもできます
- ローカルのプロジェクトに変更がある場合は、
git add .
、git commit
、git push
を行うと、vercel が自動的に更新されます
注意事項#
テーマについて#
git clone
とgit submodule add
のそれぞれに利点と欠点があります。詳細を理解した上で、自分で選択してください
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# または
git submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
ファイル名について#
- 他の場所から貼り付けた md ファイルの場合、ファイル名から特殊文字を削除することを忘れないでください。そうしないと、ローカルでは動作するかもしれませんが、vercel では 404 エラーが発生します
hexo new
で作成されたファイルの場合、特殊文字が含まれていても、ファイル名から自動的に削除されます(Front-matter は影響を受けません)。そのため、特殊文字を安全に使用できます