Hexo で画像を扱う

asset ディレクトリーを有効にする

設定ファイル _config.yml の post_asset_folder の値を変更する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
>git diff _config.yml
diff --git a/_config.yml b/_config.yml
index ca61901..0fc9eb2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -41,7 +41,7 @@ external_link:
   exclude: ''
 filename_case: 0
 render_drafts: false
-post_asset_folder: false
+post_asset_folder: true
 relative_link: false
 future: true
 highlight:

post_asset_folder の値を true にすると、新規記事作成時に記事に対応したディレクトリーが自動的に生成されるので、記事で使用する画像をそのディレクトリーに保存する。

記事のトップに画像を表示する

記事の Front-matter に下記を追記する。

1
photos: /2019/12/26/hexo-photos/photos.jpg

記事中に画像を表示する

以下の3種類の書式で画像を表示することができる。

Hexo 書式

1
{% asset_img image.jpg 画像貼付けテスト %}

HTML

1
<img src="{% asset_path image.jpg %}" title="画像貼付けテスト" />

Markdown 書式

1
![alt](/2019/12/26/hexo-photos/image.jpg "画像貼付けテスト")

alt

Hexo の下書きを公開状態にする

下書き記事を公開状態にするには、hexo publish コマンドを実行する。

1
> hexo publish [layout] <記事ファイル名>

hexo publish コマンドを実行すると、source/_drafts ディレクトリーに保存されていた記事ファイルが、source/_posts に移動する。

Hexo の記事をプレビューする

Hexo で作成した記事をローカル環境でプレビューするには、Hexo のビルトインサーバーを利用する。

1
2
3
4
> cd <Hexoプロジェクトのディレクトリー名>
> hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

記事が公開前で下書きの状態の場合は、–drafts オプションを付与してビルトインサーバーを起動する。

1
2
3
4
> hexo server --drafts
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
`

作成された記事を確認するには、ブラウザーからコマンド実行時に表示された http://localhost:4000 にアクセスする。

ビルトインサーバーの実行中は、次の Hexo コマンドを入力できないので Ctrl + C でビルトインサーバーを停止しないといけない。

Hexo の新しい記事を作成する

Hexo で新しい記事を作成するには、hexo new コマンドを使用する。

1
> hexo new [layout] <記事名>

layout は、記事の種別を指定する

post
記事
page
固定ページ
draft
下書き

コマンドを実行すると、layout の指定に対応したディレクトリーにファイルが作成される。

ページ作成コマンド

1
2
3
> hexo hexo new post "1st post"
> hexo hexo new draft "2nd post"
> hexo hexo new page "3rd post

作成されたファイル

1
2
3
4
5
6
7
source/
  +- 3rd-post/
  |  +- index.md
  +- _drafts/
  |  +- 2nd-post.md
  +- _posts/
     +- 1st-post.md

作成されたファイルを開くと、Front-matter と呼ばれる記事の内容を説明するメタ情報が記述されているので、必要に合わせて追記・編集する。

1
2
3
4
5
---
title: 1st-post
tags: 
keyeord:
---

他に使用できるメタ情報としては、以下がある。

項目名 説明
title タイトル
date 投稿日
tags タグ
photos 記事のトップの画像

Front-matter の下に Markdown 記法で記事内容を追記することで記事を作成できる。

Hexo をインストールする

Hexo をローカル環境にインストールしたメモ。

環境の確認

node.js と npm がインストール済みかを確認する。

1
2
3
4
5
D:\working>node -v
v10.16.0

D:\working>npm -v
6.9.0

バージョンは古い？がとりあえず、インストール済みであることを確認した。

Hexo をインストールする

テスト環境を何度もインストールすると思うので、グローバルでインストールすることにした。

1
D:\working>npm install hexo-cli -g

Hexo プロジェクトを生成する

Hexo コマンドを使って、ブログのプロジェクトを作成する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
D:\working>hexo init blog
D:\working>cd blog
D:\working>dir
 ドライブ D のボリューム ラベルがありません。
 ボリューム シリアル番号は 02DB-55FE です

 D:\working\temp\hexo のディレクトリ

2019/12/25  14:19    <DIR>          .
2019/12/25  14:19    <DIR>          ..
2019/12/25  13:53                71 .gitignore
2019/12/25  14:27            25,830 db.json
2019/12/25  13:53    <DIR>          node_modules
2019/12/25  13:53           134,409 package-lock.json
2019/12/25  13:59               581 package.json
2019/12/25  14:19    <DIR>          public
2019/12/25  13:53    <DIR>          scaffolds
2019/12/25  14:16    <DIR>          source
2019/12/25  13:53    <DIR>          themes
2019/12/25  14:03             2,516 _config.yml
               5 個のファイル             163,407 バイト
               7 個のディレクトリ  996,374,118,400 バイトの空き領域

とりあえず表示してみる

新規の記事を作成する前に、実際にブラウザーから画面を確認する

1
2
3
D:\working>hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Chrome や Edge から http://localhost:4000 を開くと Hexo の初期画面が表示された。