Hexoの初期設定

インストール直後には localhost:4000 で動作確認をする…と,あるが
面倒くさいし,最終的にWebで公開するのが目的なので,まず先にそれを
確認したい.なので,とりあえずInternet reachableな場所(URL)で
ブログとして閲覧できるように設定をする.

以下のWebページを参照しつつ,作業を進める
Hexo Setup
https://hexo.io/docs/setup

このWebページによると,コマンドを3つ実行する必要があると書いてある

  1. hexoをinstallするディレクトリを決める.(今回は”myMemo”とした)
    自分のHomeディレクトリ配下にこのディレクトリを作成し,
    そこにHexoのインストールをする.このディレクトリがHexoでの執筆・作業環境となる.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ mkdir myMemo
$ hexo init myMemo
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into '/home/zetaka/myMemo'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
Receiving objects: 100% (161/161), 31.79 KiB | 346.00 KiB/s, done.
Resolving deltas: 100% (74/74), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
...
大量のWARNが表示される...
...
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename '/home/zetaka/myMemo/node_modules/nunjucks/node_modules/fsevents/node_modules/yallist' -> '/home/zetaka/myMemo/node_modules/nunjucks/node_modules/fsevents/node_modules/.yallist.DELETE'

added 367 packages from 473 contributors and audited 2613 packages in 12.045s

5 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

INFO Start blogging with Hexo!

で,Setup処理は終わったようだ.
((大量のWARNは無視する…))

  1. 残りの2つのコマンドは以下の通り
1
2
3
4
5
6
7
8
9
10
11
12
13
$ cd myMemo
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/nunjucks/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 2613 packages in 3.583s

4 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

で,とりあえず終わったみたい
((やはり,WARNは無視する…))

インストールされたものを確認する

1
2
3
4
$ cd
$ ls myMemo
./ _config.yml node_modules/ package-lock.json source/
../ .gitignore package.json scaffolds/ themes/

と,作業環境である”myMemo”ディレクトリ内に,色々とインストールされたようだ.

で,このままではWebの公開領域に何も生成物を置いていないので,
当然ブログとして見られるコンテンツは何もないままである.
Hexoは,Static Site Generator(静的サイト生成) なので,Hexo内の環境で
コンテンツを生成し,それをWebの公開領域にコピーしてコンテンツを公開する.
という処理になる.なので,以下の対応が必要になる.

  1. Hexoでコンテンツの生成
  2. Web公開領域へコンテンツをコピー(コンテンツ設置)

$ hexo server を実行して,まずlocalhost環境で動かして見ましょう,
とあるが,私はせっかちなので,少しでも早く「公開Webサイト」でどういう
ふうにページが見られるのかを確認したかった.なので,その対応方法を書く.
この時に必要なのは,Hexoで作るブログをどういうURLで公開するか?
という情報が必要になる.自分は以下のようなURLで公開することにした

想定URL: http://<yoursite.com>/blog/

このときのURLにおけるPATH情報がHexoの設定に必要となる.
((上の場合, “/blog“が該当)
これを_config.ymlの”root”欄に設定しないと,CSSが適用されていない,
のっぺりとしたBlogページが表示されてしまうので注意

1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://<yoursite.com>
root: /_blog_ (<= ここを環境に合わせて修正)

Hexoで公開用データを生成する

1
2
3
4
5
6
$ cd 
$ cd mymemo
$ hexo g (<= Hexoで公開用データを生成)
$ ls
./ _config.yml .gitignore package.json public/ source/
../ db.json node_modules/ package-lock.json scaffolds/ themes/

この作業により,db.jsonというファイルやpublic/というディレクトリが増える.
このpublic/ディレクトリ内のファイル群をWeb公開領域に設置(コピー)すれば
Internet reachableなURLでHexoで作成したブログが見られるようになる.

Hexoで生成したコンテンツをWebサーバで公開する

1
2
3
4
5
6
7
$ cd 
$ cd mymemo
$ ls public
./ ../ 2020/ archives/ css/ fancybox/ index.html js/
$ cp -rf public/* /<RootDirectory>/_blog_/
$ ls /<RootDirectory>/_blog_$ ls
./ ../ 2020/ archives/ css/ fancybox/ index.html js/

publicディレクトリ内のファイル群がHexoで生成されたコンテンツなので,これを公開領域にコピーするだけ.これで,生成されたブログコンテンツがWeb上に公開されたことになる.あとはWebブラウザで,自分で決めたURLにアクセスすればHexoで生成したブログが見られるはずである.

注意:
上の例は,Hexoの執筆環境とWebサーバの公開領域が同一計算機内にある想定です.
なので,コンテンツの公開作業が,単なるファイル群のコピーになっている.
コンテンツの公開方法については,環境に応じて色々な方法がありうる.
事例としては,以下のWebを見るのが良いかと思う.

Hexo One-Command Deployment
https://hexo.io/docs/one-command-deployment

((公開作業自体は,Hexoのdeploy機能にとらわれる必要はないかと思う))

— ends here

Author

T.T

Posted on

2020-03-08

Updated on

2020-12-12

Licensed under