はじめに
この記事では、HexoのButterflyテーマを使用して静的サイトを作成し、Netlifyにデプロイする手順を説明します。
使用環境
OS：Windows11
VS Code
node: v18.17.0
hexo: 7.3.0
hexo theme: butterfly
静的サイトジェネレーター（SSG）とは
ウェブサイトのページを事前に生成し、静的なHTMLファイルとして提供するツールです。これにより、サーバー側の処理が不要になり、表示速度が速く、セキュリティも向上します。Hexo以外にも代表的なSSGには、Next.js、Gatsby、Hugoなどがあります。
1. 環境の準備
まず、Node.jsとGitがインストールされていることを確認してください。これらはHexoの動作に必要です。
2. Hexoのインストールと初期設定
Hexo CLIをインストールし、新しいHexoプロジェクトを初期化します。
npm install -g hexo-cli
hexo init my-blog
cd my-blog
npm install
3. Butterflyテーマのインストール
Butterflyテーマをインストールし、必要なレンダラーパッケージを追加します。
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save
_config.ymlファイルを編集し、テーマをButterflyに設定します。
theme: butterfly
4. GitHubリポジトリの設定
GitHubで新しいリポジトリを作成し、ローカルリポジトリを初期化してリモートリポジトリを追加します。
git init
git remote add origin https://github.com/yourusername/your-repo.git
git add .
git commit -m "Initial commit"
git push -u origin master
5. Netlifyの設定とデプロイ
Netlifyにサインアップし、新しいサイトを作成します。GitHubリポジトリを選択し、ビルドコマンドと公開ディレクトリを設定します。
-
ビルドコマンド:
hexo generate -
公開ディレクトリ:
public
デプロイが完了すると、Netlifyが提供するURLでサイトが公開されます。
6. カスタマイズ設定
ロゴとアバターの設定
_config.ymlファイルを編集し、ロゴとアバターのパスを指定します。
logo:
enable: true
path: /images/logo.png
avatar:
enable: true
path: /images/avatar.png
ホーム画面のトップ画像の変更
_config.ymlファイルでトップ画像を指定します。
index:
top_img: /images/top-image.jpg
top_img_height: 400px
SNSやGitHubリンクの追加
_config.ymlファイルのsocialセクションを編集して、SNSやGitHubのリンクを追加します。
social:
fab fa-github: https://github.com/yourusername || Github || "#24292e"
fab fa-twitter: https://twitter.com/yourusername || Twitter || "#00acee"
fab fa-facebook: https://www.facebook.com/yourusername || Facebook || "#3b5998"
fab fa-instagram: https://www.instagram.com/yourusername || fab fa-instagram || "#E4405F"
fab fa-youtube: LinkedIn: https://www.youtube.com/channel/yourchannelid || Youtube || '#ff0000'
固定ページのタブ表示
_config.ymlファイルでナビゲーションバー設定を編集し、固定ページのタブを追加します。
menu:
Home: /
Archives: /archives/
Categories: /categories/
Tags: /tags/
About: /about/
固定ページを作成し、内容を編集します。
hexo new page 'about'
source/about/index.mdを編集し、ページの内容を追加します。
---
title: About
date: 2023-07-22
---
ここに自己紹介やサイトの説明を記載します。
公開したサイト
https://mwcportfolio.com/
まとめ
これで、HexoのButterflyテーマを使用して静的サイトを作成し、Netlifyにデプロイする手順が完了しました。各設定をカスタマイズすることで、より魅力的なブログサイトを構築できます。SEO対策として、適切なメタタグやキーワードを追加することも忘れずに行いましょう。
参考記事
https://sj-note.com/hexo
https://noitaro.github.io/hexo-github-netlify/