静的サイトジェネレーターとGitリポジトリでブログ
Pagent
それほど記事数は多くないのに、Hexoのサイズが大きくなって来た。
最初、数MBだったのが20MB以上になっている。
.deploy/.git/objectsが12.4MBあって、一番容量をくっているようだ。
ちょこちょこ記事を修正してその度にdeployしているせいだろう。
大した容量ではないが、Dropboxの同期に時間が掛かるのが困る。
GitHubでは、必要性の低いオブジェクトが多数あったりすると、自動的にパックファイルを作って掃除（pack up）してくれるようだが、git gcコマンドにより手動でpack upすることも出来るらしい。
.git/objectsについて少し調べてみた - 煙と消えるその前に
GitHubではないが、BitbucketのFAQにはgit gcしてもリポジトリに悪い影響はないと書いてあった。
私のリポジトリで git gc (保全作業) を実行する必要がありますか？ - Bitbucket ドキュメンテーション - アトラシアン日本語ドキュメント
.deployディレクトリで端末を開いて、git gcしてみた。
$ git gc
Counting objects: 5328, done.
Delta compression using up to 8 threads.
Compressing objects: 5% (153/3046)
Compressing objects: 100% (3046/3046), done.
Writing objects: 100% (5328/5328), done.
Total 5328 (delta 2157), reused 0 (delta 0)
少し待たないといけなかったが、objects下にたくさんあったフォルダが消えて、4つだけになった。
objects/pack内にはpack-〜.idxとpack-〜.packというファイルが出来てる。
objectsのサイズは12.4MB→1.8MBに縮小した。
静的サイトジェネレーターは有名なものしか知らなかったが、かなりの数が公開されているようだ。
https://staticsitegenerators.net/
https://www.staticgen.com/
Metalsmith（An extremely simple, pluggable static site generator.）というのが人気急上昇中のようなので、試してみた。
Hexo同様、プログラミング言語がJavaScriptなので、早さも期待できる。
テストするにあたり、下記サイトを参考にさせて頂いた。
Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO
metalsmith - シンプルな静的サイトジェネレーター - Layman’s Web Creation.
先ずはpackage.json を用意して導入するプラグインを指定、一括インストールするのが良いようなのだが、本体やプラグインのバージョンがよく分からない。
なのでmetalsmith-testという作業フォルダを作り、そこで端末を開いて一個一個インストールした。
~/metalsmith-test$ npm install metalsmith
~/metalsmith-test$ npm install metalsmith-templates
~/metalsmith-test$ npm install swig
~/metalsmith-test$ npm install metalsmith-markdown
~/metalsmith-test$ npm install metalsmith-permalinks
~/metalsmith-test$ npm install metalsmith-sass
~/metalsmith-test$ npm install metalsmith-watch
~/metalsmith-test$ npm install metalsmith-drafts
次に作業フォルダ内にmetalsmith.jsonを作成する必要があったが、これはjekyllの構成に倣ったexampleのものをほぼそのまま使わせてもらった。
https://github.com/segmentio/metalsmith/blob/master/examples/jekyll/metalsmith.json
{
"source": "./_posts",
"destination": "./_site",
"metadata": {
"title": "My Jekyll-Powered Blog",
"description": "My second, super-cool, Jekyll-powered blog."
},
"plugins": {
"metalsmith-drafts": {},
"metalsmith-markdown": {},
"metalsmith-permalinks": {
"pattern": ":title"
},
"metalsmith-sass": {
"outputStyle": "expanded"
},
"metalsmith-templates": {
"engine": "swig",
"directory": "_layouts"
}
}
}
_layoutsフォルダを作り、そこへ下記内容のpost.htmlを配置。
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>プログラム音痴がMetalsmithを試してみた</h1>
<time>2014-11-28</time>
</body>
</html>
_postsフォルダを作り、テスト用の記事test-post-1.mdを配置。
---
template: post.html
title: テスト投稿１
date: 2014-11-28
---
##今日の天気
本日は晴天なり。
node node_modules/.bin/metalsmithとコマンドを打つと、自動的に_siteフォルダ、その下にtest-post-1フォルダ、その中にindex.htmlが生成された。
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>テスト投稿</h1>
<time>2014-11-28</time>
<h2 id="-">今日の天気</h2>
<p>本日は晴天なり。</p>
</body>
</html>
ローカルホスト上でプレビューを可能にするプラグインmetalsmith-serveというのがあったのでインストールしたが、どう使えばいいのかよく分からない。
metalsmith.jsonの"plugins":の箇所に無理やり
"metalsmith-serve": {
"port": "8081",
"verbose": "true"
}
と加えてみたら、node node_modules/.bin/metalsmithのコマンドで、生成と共にローカルホストが立ち上がった。
ブラウザでhttp://localhost:8081/test-post-1/にアクセスすると、CSSは当たっていないが表示はされた。
たぶん正しい使い方ではないのだと思うが、プラグインの説明の
var metalsmith = require('metalsmith');
var serve = require('metalsmith-serve');
metalsmith(__dirname)
.use(serve())
.build();
というのを何処で設定するのか分からない。
トップページの生成の仕方やCSSの当て方なども勉強する必要がありそう。
それに、新規記事作成やgenerate、プレビューなど、それぞれコマンドに割り当てて操作したいところ。
Metalsmithのサイトの上方に記載してある
Metalsmith(__dirname)
.use(drafts())
.use(markdown())
.use(permalinks('posts/:title'))
.use(templates('handlebars'))
.build();
というのも、いったいどこの記載のことなんだか。
「Everything is a Plugin」と謳われているようにカスタマイズ性は高そうだが、Jekyllの使い方が分からずOctopressに移った自分のようなプログラム音痴には、少々ハードルが高そうだ。
静的サイトジェネレーターの仕組みを勉強するには良さそうだが。
しばらく前に静的サイトジェネレーターをOctopressからHexoに乗り換えた。
カスタマイズもわりと容易だしgenerateも早いし、気に入って使っている。
公開されているカスタムテーマを見ていて、なぜかデモサイトに中国語が多いなと不信に思っていが、オフィシャルテーマ３つのLICENSEを見ると３つとも中国人っぽい名前が記載されている。
よく見ると、リポジトリもオフィシャルサイトもこの中国人らしい人のものだった。
なんとHexoは中国製だったんだね。
中国と聞くと正直ちょっと心配になってしまう。
中国製のパソコンに不正プログラムが入っていたなんてニュースもあったし。
ただ、cloneしてくるHexoのソースはGitHub上で公開されているものだし、大丈夫なのだろう。
中国人、なかなかやるね。
ちょっとくやしい気がする。
日本製の秀逸な静的サイトジェネレーターが出てきてくれないものだろうか。
Hexoのデフォルト設定で新規記事を作成する際、記事タイトルに大文字アルファベットを使うと、そのままファイル名としてソースが作成される。
$ hexo new New-Post
[info] File created at /.../source/_posts/2014-11-26-New-Post.md
URLに大文字アルファベットが入ってしまう。
URLに大文字は使いたくないので、Octopressのように大文字→小文字でファイル出力して欲しい。
_config.ymlのWritingの項目filename_case:の値をデフォルトの「0」から「1」に変更することで設定出来た。
$ hexo new New-Post
[info] File created at /.../source/_posts/2014-11-26-new-post.md
filename_case: 0（そのまま出力。New-Post→New-Post）
filename_case: 1（大文字を小文字に変換。New-Post→new-post.md）
filename_case: 2（すべて大文字に変換。New-Post→NEW-POST.md）
ーー
（追記）
出来たと思ったら、generateした際にtagsまでがすべて小文字になってしまった。
これでは困るので、filename_case: 0に戻した。
当面、大文字のファイル名は手作業で小文字にするしかなさそうだ。
Hexoの作業フォルダはWindows領域のDropboxフォルダに置き、他のPCとも同期をとっている。
これでソースを消失してしまう危険はかなり低いと思うが、Dropboxと同期する際、結構時間がかかってしまう。
普段はDropboxを起動しておらず時々立ち上げる、という形をとっているせいもあるかもしれない。
Bitbucketにソースを置いたらpushするのはそれほど時間は掛からないだろうし、過去の履歴も残ってくれてやはり便利だろうと思い、HexoのソースをBitbucketに置くことにした。
OctopressのソースをBitbucketに置いた時と同様、Bitbucketにhexoという名前のリポジトリを作り、
$ git remote add bitbucket git@bitbucket.org:ユーザー名/hexo.git
$ git push -u bitbucket source
とやったが、エラーになる。
新規リポジトリを作成後に表示されたRepository setupの指示に倣い、
$ git init
$ git remote add bitbucket git@bitbucket.org:ユーザー名/hexo.git
$ echo "ユーザー名" >> contributors.txt
$ git add contributors.txt
$ git commit -m 'Initial commit with contributors'
$ git push -u bitbucket source
としても、やはり
error: src refspec source does not match any.
error: failed to push some refs to 'git@bitbucket.org:ユーザー名/hexo.git'
とエラーになる。
pushするbranchをsourceではなく、masterにしてみた。
$ git push -u bitbucket master
Counting objects: 3, done.
Writing objects: 100% (3/3), 239 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To git@bitbucket.org:ユーザー名/hexo.git
* [new branch] master -> master
Branch master set up to track remote branch master from bitbucket.
上手く行ったようだ。
だが、その後も
$ git add .
warning: You ran 'git add' with neither '-A (--all)' or '--ignore-removal',
whose behaviour will change in Git 2.0 with respect to paths you removed.
Paths like 'contributors.txt' that are
removed from your working tree are ignored with this version of Git.
* 'git add --ignore-removal <pathspec>', which is the current default,
ignores paths you removed from your working tree.
* 'git add --all <pathspec>' will let you also record the removals.
Run 'git status' to check the paths you removed from your working tree.
と言われたり、
$ git push
warning: push.default is unset; its implicit value is changing in
Git 2.0 from 'matching' to 'simple'. To squelch this message
and maintain the current behavior after the default changes, use:
git config --global push.default matching
To squelch this message and adopt the new behavior now, use:
git config --global push.default simple
When push.default is set to 'matching', git will push local branches
to the remote branches that already exist with the same name.
In Git 2.0, Git will default to the more conservative 'simple'
behavior, which only pushes the current branch to the corresponding
remote branch that 'git pull' uses to update the current branch.
See 'git help config' and search for 'push.default' for further information.
(the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
'current' instead of 'simple' if you sometimes use older versions of Git)
と言われたり。
git add .は使われなくなったのでgit add -Aにしないといけないということか？git add .でもすんなり通る時もあるのは、状況の違いからだろうか。
（追記：そう言えば、Initial commitの時に作成されたcontributors.txtという中身が自分のユーザー名だけのファイルを、リポジトリとHexoの作業フォルダ両方から手動で削除したんだった。
これのせいだったのかもしれない。）
push.defaultもmatchingにした。
$ git config --global push.default matching
これでようやくpush出来るようになった。
gitの仕組みがいまいちよく分からない。
HexoからOctopressに記事ソースを変換するrubyスクリプト「Hexo to Octopress Converter」を試してみた。
「Download ZIP」からzipファイルをダウンロードし展開。converterファイルを作業したい場所に移し、端末から操作。
$ ./converter <hexo_posts_dir> <octopress_posts_dir>
で変換出来る。<octopress_posts_dir>は適当に作ったフォルダでも可。
変換が終了すると、ファイル名に日付けが付加されたものがOctopressのフォルダに出力される。（拡張子は.mdのまま。）
出力されたファイルのFront Matter部分はtags:がcategories:に変換されており、また上部の---およびlayout: post、comments: trueが追加される。
だが、Octopressのソースを「hexo-migrator-octopress」などでHexoに取り込んでいた場合は、Front Matter上部に既に---が
ついている。
この状態からだとtags:がcategories:に変換されないので、上部の---を消しておく必要がある。
またtitle:の項目で記事タイトルが「”」で挟まれていると、さらに「”」で挟まれtitle: ""（記事タイトル）""のようになってしまう。
これではOctopressでgenerateする際エラーになってしまうので、これも削除し、
title:
date:
tags:
---
のような形にしておく必要がある。
Octopress→Hexo移行のプラグイン「hexo-migrator-octopress」を試してみた
なお、変換出力されるのは拡張子が.mdのものだけで、.markdownのもの（Octopressのソースをコピペで取り込んだような場合）は変換出力されず無視される。
変換後のファイル名には日付けが付加されるので、Hexoの運用をOctopress式に日付けをつけたファイル名で行っている場合は、日付けが2重になってしまう。
この場合はconverterファイルをエディタで開き、41行目
file_name = “#{prefix}-#{base_name}”
の#{prefix}-を削除し、
file_name = “#{base_name}”
にしておくと、日付けが付加されない。
それから、Hexoは漢字、ひらがな含め日本語のURLやtagsを使用可能だが、Octopressはデフォルトの状態では日本語を使用できない。
HexoからOctopressに移行する際には、この点も注意が必要。
ーー
HexoもOctopressも、共にmarkdown形式のファイルをhtmlに変換するという点では同じなのだが、細かいところが微妙に違っていて少し不便。
記事ソースの形式くらいは合わせられなかったものだろうか。
OctopressとHexoでは記事ソースのファイルの形式やFront Matter（---で区切られた、title、dateなどの部分）が微妙に異なる。
OctopressのcategoriesはHexoではtagsに相当したり。
Octopressの記事ソースをHexoに取り込む「hexo-migrator-octopress」というHexo用プラグインがあったので、試してみた。
（Hexoの記事ソースをOctopress用に変換するスクリプト「Hexo to Octopress Converter」とは逆向き。）
デスクトップ上にhexo-test（Hexoフォルダ）とoctopress-test（Octopressフォルダ）を作った。
hexo-testで端末を開き、プラグインをインストール。
$ npm install hexo-migrator-octopress
コマンドhexo migrate octopress <source>で記事ソースが変換され、Hexoに取り込まれる。（<source>はOctopressフォルダへのパス）
今回のテスト環境では
$ hexo migrate octopress ~/Desktop/octopress-test
octopress-test/source/_posts/2014-10-25-cosmos.markdownがhexo-test/source/_posts/cosmos.mdとして取り込まれた。
（Hexoのデフォルト設定に従い、日付けが削除さるようだ。）
Front MatterはOctopressの
---
layout: post
title: "畑一面のコスモスはなぜ？"
date: 2014-10-25 15:41:22 +0900
comments: true
categories:
- 未分類
- 写真
---
から
---
layout: post
title: "畑一面のコスモスはなぜ？"
date: 2014-10-25 15:41:22 +0900
comments: true
tags:
- 未分類
- 写真
---
に変換されたが、変更はcategories:がtags:になっただけのようだ。
この状態でもHexoで使えるのだが、これを「Hexo to Octopress Converter」でOctopress用に再変換すると
---
layout: post
comments: true
---
layout: post
title: "畑一面のコスモスはなぜ？"
date: 2014-10-25 15:41:22 +0900
comments: true
tags:
- 未分類
- 写真
---
となってしまい、tags:がcategories:に変換されない。
上部の---を削除しておくとcategories:に変換はされたが、タイトルの部分がtitle: ""畑一面のコスモスはなぜ？""と「”」が重複しまい、rake generateでエラーになる。
結局、Octopress用に再変換する場合には、「hexo-migrator-octopress」でHexo用に変換したものを手作業で
title: 畑一面のコスモスはなぜ？
date: 2014-10-25 15:41:22 +0900
tags:
- 未分類
- 写真
---
のように変更しておく必要がありそうだ。
それにOctopressでcategoriesとtagsを両方使っていた場合は変換後tags:が重複してしまう。
それから、Hexoの新規記事ソースはデフォルトでは日付けがつかないが、_config.ymlのnew_post_name:で日付けをつけることが出来る。
日付けがあった方が同じタイトルの記事を複数書けたり、過去記事編集の際に探し易かったりと、なにかと都合が良い。
Octopressの方のファイル拡張子が.markdownではなく.mdなら「Hexo to Octopress Converter」で変換しても日付けが削除されないので、前もって.mdに変えておいた方が良いかもしれない。
拡張子が.mdでもtags:はcategories:に変換される。
拡張子の一括変換は/_postsディレクトリで
$ rename 's/.markdown/.md/' *.markdown
とするか、ファイルマネージャーThunarを使えば簡単のようだ。
Windows 7にインストールしたHexoだが、作業フォルダはLinuxと共用なので、そのままdeploy出来ると思っていた。
だがdeployしようとすると、
Run
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
と言われてしまった。
メールアドレスとGithubユーザー名を設定して、再度deployしようとしたが、
Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
とrejectされる。
よく考えたら当たり前だが、WindowsでもSSHキーの設定が必要らしい。
Linuxで設定したSSH秘密鍵と公開鍵の両方をC:\Users\（ユーザー名）\.ssh内にコピペしたら、ようやくdeploy出来た。
これで無事WindowsでもHexoを使えるようになった。
Hexoにはローカルホストで使う管理画面プラグインもあるようなので、もう少し導入が簡単になればWindowsユーザーにも静的サイトジェネレーターが広まる可能性があるんじゃないだろうか。
ーー
（関連記事）
WindowsでHexoを使う（インストール） | Pagent
以前、静的サイトジェネレーターnanocをWindowsにインストールしたが、なんとかインストールは出来たものの、compile（generate）してhtmlファイルを生成する際、エラーになり使えなかった。
最近使い始めたHexoは、nanocやOctopressと違い、RubyではなくJavaScript（Node.js）を用いているそうなので、Windowsでも使えるかもしれないと思い、試してみた。
結果、Windowsで実用可能だった。
Node.jsのインストール
Node.jsは下記からWindows用インストーラー付きのWindows Installer (.msi)をダウンロードし、デフォルトの設定のままインストールした。
http://nodejs.org/download/
インストールされたバージョンはXubuntuに入れたのと同じv0.10.33だった。
msysgitのインストール
Windowsでgitを使うためmsysgitをインストールした。
インストールオプションは下記サイトを参考にさせて頂いた。
Windows に msysgit をインストールして git 環境を作る - xykの日記
「Select Components」ではすべてのチェックを外した。
「Adjusting your PATH environment」は上から2番目の「Run Git from the Windows Command Prompt」。
「Configuring the line ending conversions」は上から2番目の「Checkout as-is, commit Unix-style line endings」でインストールしが、あとで実際にdeployする際、
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.
The file will have its original line endings in your working directory.
...
と、改行コードが変更されるという警告が大量に表示されたので、結局上から3番目のオプション「Checkout as-is, commit as-is」（autocrlf = false）にした。
Windowsでしか使わないのであれば、あまり気にしなくても良さそう。
後からC:\Users\（ユーザー名）\.gitconfigで変更することも可能。
Hexoのインストール
コマンドプロンプトを開き、
>npm install hexo -g
でインストール。
Linuxの時と同様、
npm WARN optional dep failed, continuing fsevents@0.2.0
という警告が出たが、インストール完了。
テスト用にHexoの作業フォルダを作成。
任意のフォルダを選択した状態で「SHIFT」キーを押しながら右クリック。
「コマンド ウィンドウをここで開く」でコマンドウィンドウを立ち上げ、
>hexo init hexo-win
>cd hexo-win
>npm install
>hexo g
>hexo s
ローカルホストに無事、新規ブログが立ち上がった。
2回目のhexo gからは、なぜか
[delete] Deleted: archives\2014\11\index.html
[delete] Deleted: archives\index.html
...
[create] Generated: archives/index.html (124ms)
[create] Generated: archives/2014/index.html (63ms)
...
と、一旦すべてのファイルを削除してからまたファイルを生成したというメッセージが表示される。
あまり気持ち良くはないが、実用上問題は無さそう。
この後deployで少し躓いてしまったが、WindowsでHexoを使うことが出来た。
ーー
（関連記事）
WindowsでHexoを使う（deploy） | Pagent
Hexoで新規記事を作ると、初期状態ではtitle、date、tagsの項目しか無いが、categoriesも使いたいので変更。
/scaffolds/post.mdに項目を追加するだけで出来た。
（---で区画された部分は「Front Matter」と言うらしい。）
またOctopressに戻ることもあるかもしれないので、Octopressの書式に倣ってlayout、commentsも加えた。
---
layout: post
title: ｛｛ title ｝｝ ## ｛｛ ｝｝は実際には半角英数
date: ｛｛ date ｝｝
comments: true
tags:
categories:
---
hexo n testすると下記内容のファイルが生成された。
layout: post
title: test
comments: true
date: 2014-11-23 09:15:51
tags:
categories:
---
Octopressではcomments: trueが無いとDisqusが表示されない。
Hexoではcommentsの項目が無くてもDisqusは表示されるが、comments: falseにするとその記事だけDisqusの表示は消える。
記事によってコメント禁止にする時に便利かもしれない。
/scaffolds/post.mdで上部にも---を加えたが、生成ファイルでは下部にしか---が無い。
これだとOctopressでは記事をちゃんとgenerate出来ないようだが、上部に---を付ける方法が分からない。
もしまたOctopressに戻ることがあったら、手作業するしかなさそうだ。
ーー
（追記）
Hexoの/source/_posts内の記事ソースをOctopress形式のFront Matterに変換出力するスクリプトが公開されていた。
ciffel/Hexo-to-Octopress-Converter
これを使うと上部の---、layout: postそしてcomments: trueを付加してくれる。
さらにHexoのtags:がcategories:にリネームされる。
（Hexoのtags:はOctopressのcategories:に相当するようだ。）
なので/scaffolds/post.mdは元の記載に戻した。
title: Hexoの新規記事テンプレートを変更
date: Sun Nov 23 2014 08:20:38 GMT+0900 (JST)
tags:
---
OctopressからHexoへの移行には下記プラグインが対応していて、これを使うとOctopressのソースのcategories:がtags:に変換される。
hexo-migrator-octopress
骨折り損だったが、Hexoでコメント禁止にしたい時はcomments: falseを加えれば良いというのが分かったのが収穫だった。
早めに気がついて良かった。