ゼロから始めるHexoブログ構築ガイド（2024年版）

#ブログ構築

ブログサイトの無味乾燥なインターフェースにうんざりしていませんか？際限なく送られてくるサイトの通知にうんざりしていませんか？ずっと前から自分だけのブログを持ちたいと思っていたのに、複雑なチュートリアルや頭を悩ませるコードのせいで諦めていませんか？そんなあなたに朗報です！この記事では、誰でも簡単に自分だけのブログを立ち上げられるよう、手取り足取り解説していきます。必要なのは、ほんの少しの忍耐力と、手順通りに進めることだけです。

Hexoは、高速でシンプル、そして高効率なブログフレームワークなので、初心者の方にはまさに救いの手となるでしょう。さらにGitHubを活用すれば、別途サーバーをレンタルしてデプロイする手間も省けます。そこで、この記事ではHexoとGitHubを使ってブログを構築する方法をご紹介します。

以前、2018年にゼロから始めるブログ構築ガイドという記事を書きました。しかし、プラグインの更新により一部変更が必要になったため、2024年版の簡易ガイドとして改めてご紹介する次第です。

準備作業

ローカル環境でHexo静的ブログを構築

$ npm install -g hexo-cli
$ hexo init
$ npm install

これでブログの本体部分は完成です。さっそく動作を確認してみましょう。以下を実行してください。

$ hexo server

ブラウザを開いて localhost:4000 と入力すると、現在のブログの様子が表示されます。ちょっと感動したら、Ctrl + C を押して次の操作に進みましょう。

初期のカスタマイズ設定

テーマの変更

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #または hexo generate
hexo server

サイト設定

# Site
title: 未知の世界                //ブログ名
subtitle:
description:  Do something cool //紹介文
author: LulalaP                 //著者
language: zh-Hans               //サイトの言語
timezone:

サイドバーにアバターを設定

avatar: 
    url: /uploads/avatar.jpg

ブログページの充実化

メニューの追加

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

カテゴリーページの作成

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

タグクラウドページの作成

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

「About（私について）」ページの作成

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

サイドバーのソーシャルリンクを設定

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

ブログとGitHubを連携

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

これで、ブラウザを開いて http://your-name.github.io にアクセスすると、あなたのブログが表示されるはずです。おめでとうございます、これでブログの構築は完了です！

ドメインの紐付け

ここまでの手順でブログは完全に構築され、GitHubのドメインからアクセスできるようになりました。このブログに短いカスタムドメインを紐付ければ、さらに完璧です。

ドメインの購入

ドメインのDNS設定

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

ドメインのDNS設定が完了したら、ブログディレクトリに移動し、source ディレクトリ内に CNAME という名前のファイル（大文字で、拡張子なし）を新規作成します。メモ帳などで開き、購入したドメイン（例：www.philoli.com）を書き込んで保存します。

hexo g
hexo d

さあ、ブラウザを開いてドメインを入力し、エンターキーを押してください。おめでとうございます！これであなた専用の独自ドメインブログが完成しました。

新しい記事の公開

title 記事のタイトル
date 作成日（ファイルの作成日）
updated 更新日（ファイルの更新日）
comments コメントを有効にするか true
tags タグ
categories カテゴリー
permalink URL内の名前（ファイル名）
hexo g
hexo d

詳細なカスタマイズ設定（上級者向け）

ここからは、より高度なブログのスタイルカスタマイズ設定をいくつかご紹介します。初心者の方は、まずこのセクションをスキップしても問題ありません。

RSSの追加

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

トップページでの記事の途切れ

    <!--more-->

記事内の引用テキストを中央揃えに

{% centerquote %}
引用正文
{% endcenterquote %}

{% centerquote %} 引用正文 {% endcenterquote %}

コードブロックのスタイル変更

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

サイトの開設時間を設定

since: 2024

記事内のリンクスタイルを改善

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

ブログに背景画像を追加

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //画像が敷き詰められない場合の繰り返し方法
    background-attachment:fixed;    //画像がスクロールに追従するかどうか
    background-size: cover;         //カバー
    background-position:50% 50%;    //画像の位置
}

ブログコンテンツの背景を半透明に設定


//ブログコンテンツの透明化
//記事コンテンツの透明度設定
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


//サイドバーの透明度設定
.sidebar {
  opacity: 0.9;
}

//メニューバーの透明度設定
.header-inner {
  background: rgba(255,255,255,0.9);
}

//検索ボックス（local-search）の透明度設定
.popup {
  opacity: 0.9;
}

インラインコードブロックのスタイルを最適化

// Codeコードタグの美化
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

ウェブサイトのフッターに訪問者数を追加

# copyrightタグのセクションを見つけ、そのタグ内に以下のコードを追加します。

<div class="copyright">
# ......ここには既に設定があります
# ここに新しいコードを追加します
</div>

# 追加後はこのようになります。
<div class="copyright">
  # ......ここには既に設定があります
  # ここに新しいコードを追加します
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# 問題がないことを確認してから公開
hexo d

リポジトリにREADME.mdファイルを追加

各プロジェクトには通常 README.md ファイルがありますが、Hexoを使ってリポジトリにデプロイすると、プロジェクト内の README.md ファイルが上書きされてしまいます。そのため、上書きされないように設定ファイルで指定する必要があります。

Hexo ディレクトリの source ルートディレクトリに README.md ファイルを追加し、サイト設定ファイル _config.yml を編集して、skip_render パラメータの値を以下のように設定します。

skip_render: README.md

保存して終了します。これで、次に hexo d コマンドでブログをデプロイする際に、README.md ファイルがレンダリングされなくなります。

いくつかの便利なプラグイン

ソースファイルのバックアップ

# 以前設定したブログのリポジトリURLを追加
git remote add https://github.com/your-name/your-name.github.io.git

# 現在の変更を追加・保存し、コメントを記録
git add .
git commit -m "ソースファイル更新"

# 新しいブランチを作成して切り替える
git checkout -b source

# ローカルのsourceブランチの全内容をリモートリポジトリのsourceブランチにプッシュ
git push origin source:source

異なるPCでブログを執筆する

npm install -g hexo-cli
# リポジトリをローカルにクローン
git clone https://github.com/your-name/your-name.github.io.git

# ローカルに既にクローンしている場合、ブログを更新する前に毎回最新のブランチ内容をプルする必要がある
git pull origin

# 該当ブランチに切り替える
git checkout source

# Hexo設定下のすべてのプラグインをインストールした後、ブログコンテンツの更新・編集を開始できる
npm install

# 内容変更後は忘れずに一連のバックアップ作業を行う
git add .
git commit -m "ブログ更新xxx"
git push origin source:source

# 最新のブログコンテンツをドメインサイトに公開・プッシュ
hexo clean
hexo g  # 静的ファイルを生成
hexo s  # ローカルでブログ効果をプレビュー
hexo d  # 最新のブログコンテンツを公開

いくつかのよく使うコマンドまとめ

hexo g
#または hexo generate、ソースファイルに基づいて静的ページを生成
hexo d
#または hexo deploy、GitHub Pagesに公開・プッシュ
hexo s
#または hexo server、ローカルでデプロイテスト
hexo clean
# 静的ページのキャッシュをクリアし、その後 hexo d で再生成