HexoとGitHubとCloudflareでブログ運用「カスタマイズ編」

HexoとGitHubとCloudflareでブログを運用するための初期設定は以前の投稿で紹介しました。今回はHexoで作成したブログサイトの見た目やタイトルなどをカスタマイズする方法を紹介します。

テーマの変更

概要

Hexoでサイト構築すると初期設定で「landscape」というテーマが設定されています。

Hexo公式サイトには、色々なテーマが公開されています。

これを「Butterfly」に変えてみましょう。

インストール

Butterflyの公式サイトに従ってインストールします。

VSCodeのターミナルで、次のコードを入力します。

1	npm install hexo-theme-butterfly

次にVSCode上で、_config.ymlを開き、１００行目あたりにあるthemeで始まる行を次のとおり書き換えます。

1	theme: butterfly

上書き保存したら、ターミナルで次のコマンドを入力します。

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

次に、「_config.landscape.yml」を右クリックし、「名前の変更」を選択したら、「_config.butterfly.yml」に書き換えます。

次の順にフォルダを開きます。

node_modules
hexo-theme-butterfly
_config.yml

このファイル内のデータを「CTRL+A」「CTRL+C」で全コピーし「_config.landscape.yml」に「CTRL+V」で貼り付けます。

上書き保存します。

確認

VSCodeのターミナルで次のコードを入力します。

hexo s

ターミナルに表示される最後の行にあるリンク「http://localhost:4000/」を「CTRL」を押しながらクリックします。

ブラウザが起動し、ローカルサーバーで構築されたWebサイトが表示されます。先ほどとは、見た目が変わっていることが確認できます。

ターミナルに戻って、「CTRL+C」とキー入力すると、ローカルサーバーが終了します。ブラウザも閉じましょう。

Hexoの設定ファイル「_congfig.yml」の編集

VSCodeでルートディレクトリにある「_config.yml」を開きます。

初期段階でタブをみると４という赤文字があるかもしれませんが、無視して問題ありません。

書き換え作業

次の項目をそれぞれ書き換えます。

Site
- title: ブログのタイトル
- author: あなたの名前（または会社名）
- language: ja
- timezone: Japan
URL
- url: https://myblog.pages.dev
- permalink: /:title/

上書き保存します。

確認

VSCodeの左側メニュー上から３つ目のアイコンをクリックします。

メッセージに任意の文字列を入れて「コミット」をクリックします。

「変更の同期」をクリックします

１分ほどでサイトが更新されているはずです。

📌NOTE
サイトタイトルやパーマリンクは変更されているはずですが、まだ日本語表示になっていないはずです。言語ファイルは「node_modules >> hexo-theme-butterfly >> languages 」のとおり、英語と中国語（２種類）しかありません日本語の言語ファイル作成は下記サイトが参考になります。 https://fewlight.net/81aa54c593d4/

📌NOTE

サイトタイトルやパーマリンクは変更されているはずですが、まだ日本語表示になっていないはずです。
言語ファイルは「node_modules >> hexo-theme-butterfly >> languages 」のとおり、英語と中国語（２種類）しかありません
日本語の言語ファイル作成は下記サイトが参考になります。
https://fewlight.net/81aa54c593d4/

Butterflyの設定ファイル「_config.butterfly.yml」の編集

事前準備として画像を保存（ファビコン、アバター、ロゴ）

設定ファイルを編集する前に、画像ファイルを準備する必要があります。

sourceフォルダの下にフォルダを新規作成し、フォルダ名を「img」とします。

ファビコン画像を用意し、ファイル名を「favicon.png」とします。

アバター、ロゴ画像も同じフォルダに保存しておきます。

書き換え作業

VSCodeで「_config.butterfly.yml」を開き、次のとおり書き換えます。

nav
- logo: /img/xxxx.png
avatar
- img: /img/avatar.jpg
101行目のvalue をコメントアウト
158行目 false
194行目 2
211行目のvalue
- プライバシーポリシー
212行目 false(Framework Hexo Theme Butterfly を消す)
222行目 left
231行目 false
236行目 false
263行目 false
271-273 false
330行目（右下フローティングボタンの設定）true
332行目 show: darkmode,toc #chat,comment
364行目 local search true
- 下記の処理をしないとエラーが発生する場合があります。
- プラグインをインストールするため、ターミナルに下記コードを入力する。
  1
  npm install hexo-generator-searchdb
- Hexoの設定ファイル「_config.yml」に次のとおり書き足す。
  1
  2
  3
  4
  5
  search:
  path: search.xml
  field: post
  content: true
  format: html
- 参考にしたサイト
  - https://theme-next.js.org/docs/third-party-services/search-services
733行目 font-family
- YuGothic, “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, “メイリオ”, “Meiryo”, “sans-serif”;
734行目 code-font-family
- “PT Mono”
794行目 false
905行目 inject head
- <link rel="stylesheet" href="/css/styles.css">

CSSファイルの作成と設定

上記905行目に修正のとおり、フォルダ「source」の直下にフォルダ「css」を作成し、ファイル「styles.css」を作成します。

作成したファイルに下記のとおり書き込みます。

/*横幅の調整*/
.layout{
  max-width: 1700px;
}
h1{
  font-size:1.8rem !important;
}

h2{
  border-bottom: 3px solid #00c4b6;
  font-size: 1.3rem;
  margin: 30px 0;
}
h3{
  border-left: 6px #00c4b6 solid;
  font-size: 1.2rem;
  margin: 25px 0;
  padding: 2px 5px;
}
h4{
  border-left: 2px #00c4b6 solid;
  font-size: 1.15rem;
  margin: 25px 0;
  padding: 2px 5px;
}
h5{
  border-left: double 3px #00c4b6;
  font-size: 1.1rem;
  padding: 0 5px;
}
h6{
  font-size: 1.0rem;
  padding: 0.1em 0;
}
.post-content{
  font-size: 1.0rem;
}
table{
  font-size: 0.85rem;
}
.a
.archive .collection-title {
  display: none !important;
}

/*リンクの色*/
.post-body a:link { color: #0000ff; }
.post-body a:visited { color: #0000ff; }
.post-body a:hover { color: #ff0000; }
.post-body a:active { color: #ff8000; }

CSSで設定した文字の大きさなどは、自分の好みとなっています。