はじめに

この記事では、HexoのButterflyテーマを使用して静的サイトを作成し、Netlifyにデプロイする手順をステップバイステップで説明します。

目次

  1. 環境の準備
  2. Hexoのインストールと初期設定
  3. Butterflyテーマのインストール
  4. GitHubリポジトリの設定
  5. Netlifyの設定とデプロイ
  6. カスタマイズ設定
    • ロゴとアバターの設定
    • ホーム画面のトップ画像の変更
    • SNSやGitHubリンクの追加
    • 固定ページのタブ表示

1. 環境の準備

まず、Node.jsとGitがインストールされていることを確認してください。これらはHexoの動作に必要です。

2. Hexoのインストールと初期設定

Hexo CLIをインストールし、新しいHexoプロジェクトを初期化します。

1
2
3
4
npm install -g hexo-cli
hexo init my-blog
cd my-blog
npm install

3. Butterflyテーマのインストール

Butterflyテーマをインストールし、必要なレンダラーパッケージを追加します。

1
2
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に設定します。

1
theme: butterfly

4. GitHubリポジトリの設定

GitHubで新しいリポジトリを作成し、ローカルリポジトリを初期化してリモートリポジトリを追加します。

1
2
3
4
5
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ファイルを編集し、ロゴとアバターのパスを指定します。

1
2
3
4
5
6
7
logo:
  enable: true
  path: /images/logo.png

avatar:
  enable: true
  path: /images/avatar.png

ホーム画面のトップ画像の変更

_config.ymlファイルでトップ画像を指定します。

1
2
3
index:
  top_img: /images/top-image.jpg
  top_img_height: 400px

SNSやGitHubリンクの追加

_config.ymlファイルのsocialセクションを編集して、SNSやGitHubのリンクを追加します。

1
2
3
4
5
6
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ファイルでナビゲーションバー設定を編集し、固定ページのタブを追加します。

1
2
3
4
5
6
menu:
  Home: /
  Archives: /archives/
  Categories: /categories/
  Tags: /tags/
  About: /about/

固定ページを作成し、内容を編集します。

1
hexo new page 'about'

source/about/index.mdを編集し、ページの内容を追加します。

1
2
3
4
5
6
---
title: About
date: 2023-07-22
---

ここに自己紹介やサイトの説明を記載します。

まとめ

これで、HexoのButterflyテーマを使用して静的サイトを作成し、Netlifyにデプロイする手順が完了しました。各設定をカスタマイズすることで、より魅力的なブログサイトを構築できます。SEO対策として、適切なメタタグやキーワードを追加することも忘れずに行いましょう。