Hexoのセットアップ
ROOXIM株式会社COO 上原です。
前投稿では、Hexoを選んだ理由について紹介しました。
今回は、セットアップ手順についてご紹介します。
なお、技術的なお話になるので時間が経過するとこれから記載する手順ではうまく行かない場合もあると思います。
なので、まずは時期と環境からから紹介します。
環境
セットアップは2024/05/30に行いました。
各バージョンは以下となります。
| 項目 | バージョン |
|---|---|
| node | v18.17.1 |
| hexo-cli | v4.3.2 |
| hexo | v7.2.0 |
ちなみに開発環境はMacBook Pro(Apple M1 Max) MacOS 14.4.1(Sonoma)です。
Hexoのセットアップ手順
1. Node.jsのインストール
Node.jsの公式サイトから最新のNode.jsをダウンロードしてインストールします。
※ パッケージマネージャーからのインストールをおすすめしますが、ここでは簡単な方法として公式のインストーラからインストールする方法としています。
2. Hexo-cliのインストール
ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。
1 | npm install -g hexo-cli |
3. Hexoプロジェクトの作成
先ほどインストールしたHexo-cliを使ってHexoのプロジェクトを作ります。
任意のディレクトリに移動し、新しいHexoプロジェクトを作成します。
1 | hexo init myblog |
このコマンドでcurrentディレクトリにmyblogというフォルダが生成されているはずです。
以降生成されたmyblog内で作業するため、以下のコマンドでディレクトリを移動しておきます。
1 | cd myblog |
4. パッケージ（ライブラリ）をインストール
Hexoプロジェクトディレクトリ内で、以下のコマンドを使用して必要なパッケージ（ライブラリ）をインストールします。
1 | npm install |
5. サーバーの起動
Hexoサイトをローカルでプレビューするには、以下のコマンドを実行してHexoサーバーを起動します。
1 | hexo server |
6. ブラウザで確認
ブラウザで http://localhost:4000 にアクセスしてHexoサイトを確認します。
7. 投稿の作成
新しい投稿を作成するには、以下のコマンドを実行します。
1 | hexo new "My New Post" |
これにより、source/_posts ディレクトリ内に My-New-Post.md という名前のMarkdownファイルが作成されます。
初期設定
セットアップは完了しました。
次に基本的な設定をしていきたいと思います。
hexoの基本的な設定は_config.ymlで変更できます。
ここでは主な変更箇所を紹介します。
title,subtitle,description,keywords,authorの設定
1 | title: Hexo |
↓
1 | title: ルークシム技術ブログ |
言語の設定
Hexoの言語設定は、_config.ymlで変更できます。
下記では、日本語に対応していれば日本語、そうでなければ英語が表示されるようになります。
※記事を日本語で書いている場合、翻訳されるわけではありません。
1 | language: en |
↓
1 | language: |
タイムゾーンの設定
タイムゾーンを変更します。
wikiに記載されているタイムゾーンが利用できるらしいです。
https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
日本向けなので japanとしています。
1 | timezone: '' |
↓
1 | timezone: 'japan' |
urlの設定
公開するURLに変更します。
1 | url: http://example.com |
↓
1 | url: https://blog.rooxim.com |
投稿毎に画像などのassetフォルダを分ける
デフォルト設定だと、投稿毎にフォルダがsource/images以下にすべての画像を置くようになっています。
この設定でもいいですが、投稿が多くなると、すべての画像が1箇所に集まってしまって管理が大変になる可能性があります。
そこで、投稿毎にフォルダを作ってアセットを管理できるようにします。
1 | post_asset_folder: false |
↓
1 | post_asset_folder: true |
これでhexo new new-postとした際に、new-post.mdといっしょにnew-postというフォルダが生成される用になります。
しかし、new-postフォルダ以下にimg.pngという画像をおいて、マークダウン上でimgとしてもそのままでは参照できません。
そこで追加で以下の設定を_config.ymlの最後に追加します。
1 | marked: |
次回: Hexoのカスタマイズ
以上でHexoの基本的なセットアップは完了します。
しかしながら、これではシンプルなブログサイトです。
そこでもっとカスタマイズをしていきたいと思います。