HexoとGitHub Pagesを使った技術ブログの作成手順

ブログ運営

はじめに

技術ブログの作成を考えているなら、Hexoは最適な選択肢となるだろう。その軽量さと拡張性、さらにはGitHub Pagesとの高い互換性が魅力だ。この記事では、Hexoをインストールし、Icarusテーマを用いてカスタマイズし、日本語対応とデプロイまでの流れを解説する。


スポンサーリンク
スポンサーリンク

手順

1. Hexoのインストールとセットアップ

Hexo CLIをインストール

以下のコマンドを実行してHexo CLIをインストールする。

npm install -g hexo-cli

プロジェクトの初期化

作業ディレクトリを作成し、Hexoプロジェクトを初期化する。

mkdir my-blog
cd my-blog
hexo init
npm install

2. Icarusテーマの導入

(1) テーマのダウンロード

以下のコマンドでIcarusテーマをダウンロードし、themesディレクトリに配置する。

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

(2) テーマを有効化

_config.ymlthemeを以下のように変更する。

theme: icarus

(3) テーマの依存パッケージをインストール

cd themes/icarus
npm install
cd ../../

3. 日本語化の設定

サイト全体の言語を日本語に設定

_config.ymllanguageを以下のように変更。

language: ja

Icarusテーマの日本語対応

themes/icarus/languages/ja.ymlを作成し、以下を記述。

Home: ホーム
Archives: アーカイブ
Categories: カテゴリー
Tags: タグ
About: 概要

4. 日本語フォントの適用

カスタムCSSの適用

themes/icarus/source/css/custom.cssを作成し、以下を記述する。

body {
font-family: 'Noto Sans JP', 'Roboto', 'Arial', sans-serif;
}

Webフォントの読込

themes/icarus/layout/_partial/head.ejsに以下を追加する。
“`html

<pre><code><br />—

### 5. ブログ記事の作成

#### 新しい記事を作成
以下のコマンドで新規記事を生成。
“`bash
hexo new “My First Post”

記事の編集

生成されたMarkdownファイル(例: source/_posts/My-First-Post.md)を開き、内容を編集する。


6. GitHub Pagesへのデプロイ設定

Hexoデプロイプラグインをインストール

npm install hexo-deployer-git --save

デプロイ設定を追加

_config.ymlに以下を追加。

deploy:
type: git
repo: https://github.com/ユーザー名/リポジトリ名.git
branch: main

7. 静的ファイル生成とデプロイ

静的ファイルを生成

hexo clean
hexo generate

GitHub Pagesにデプロイ

hexo deploy

8. 動作確認

GitHub Pagesで公開されたサイト(例: `https://ユーザー名.github.io`)にアクセスし、正しく表示されるか確認する。


9. トラブルシューティング

  1. デプロイが失敗する場合

_config.ymlrepobranchの設定を確認する。
– GitHubリポジトリの権限が適切か確認。

  1. 日本語フォントが適用されない場合

head.ejsへのフォントリンク追加が正しいか確認。
– ブラウザキャッシュをクリアし再読み込み。


まとめ

Hexoを使えば、手軽に高品質な技術ブログを構築可能だ。さらに、Icarusテーマを活用すれば、デザイン性の高いサイトに仕上がる。この記事の手順を参考に、自分だけのオリジナル技術ブログを作成し、情報発信を楽しもう。

コメント