InkPaperでブログを生成して, Github Pagesで公開する

2024/05/28 追記: 現在はInkPaperを使っていません。また、昔の記事なので正しくない可能性があります。

InkPaperとは？　使い方は？

Go言語で書かれた静的ブログジェネレータです。HugoとかJekyllとかの静的サイトジェネレータのブログ特化版みたいな感じです。 InkPaper は最初からブログ用に作ってあるので、面倒な設定とかしないでとりあえずブログを書き始めることができます。

使い方は InkPaperのREADME に書いてあるのでここを参照します.

InkPaperをインストール

http://www.inkpaper.io/から自分の環境に合ったものをダウンロードします. zipファイルを解凍すればインストールは完了です.

設定ファイルを編集する

blog/config.ymlを編集します.

site:
    title: ジェット・ゾウ #ブログのタイトル
    subtitle: サブタイトル #タイトルの下にチョロンと表示されます
    # logo: -/images/avatar.jpg #トップページに表示される自分のアイコン
    limit: 10 
    theme: theme
    disqus: somebody
    lang: en
    url: http://jetzou.com/
    # root: /blog

authors:
    me:
        name: dozen
        intro: どぜんと読みます
        avatar: -/images/avatar.jpg

build:
    port: 8000
    # Copied files to public folder when build
    copy:
        - theme/bundle
        - theme/favicon.ico
        - theme/robots.txt
        - source/images
    # Excuted command when use 'ink publish'
    publish: |
        git add . -A
        git commit -m "update"
        git push origin

urlとrootだけ気をつければあとは適当で大丈夫. 今回はhttp://jetzou.com/で公開したいのでurl: http://jetzou.com/"としました. disqusはコメント機能を提供してくれるDISQUSのアカウントを指定するんですが, 今回はスキップ.

langは今のところ中国語と英語にしか対応していないみたいなので, enを指定しました.

設定ファイルはこんな感じで大丈夫そうです.

記事を書く

記事を置く場所はblog/sourceです.

インストールした状態ではサンプルページのblog/source/ink-blog-tool-en.mdとblog/source/ink-blog-tool.mdがあります. 記事を書くまえにこのファイルをみて, 参考にするといいです. 公開する前にこの2つのファイルは消しておきます.

dateは投稿日時, updateは更新日時です. updateは不要ですがdateは必須です. トップページなどを生成する際にdateをもとに記事をソートするためです. フォーマットは2016-06-01 12:00:00みたいな感じです. ちゃんと秒まで指定しないとエラーが出ます.

authorはblog/config.ymlで指定したauthorsを指定します. デフォルトだとmeです.

coverはよくわかんないです. アイキャッチかな?

draft: trueを追加すると書きかけの記事とみなされて, ページが生成されません.

top: trueとすると, トップページの一番上に張り付く記事になるみたいです. 使ったこと無いからわからないけど.

previewはトップページで表示される記事の概要を指定します. これを指定せずに, 記事の本体の適当な場所に<!--more-->を置くとその部分までを記事の概要として表示してくれます. ただし, Markdownを処理してくれないので<!--more-->は使わずに, previewを指定することをおすすめします.

tagsでPCとか食べ物とか指定してあげるとタグごとのアーカイブページとか作ってくれます.

以上が記事の情報です. ---より下が本文となります. ここから下はMarkdown記法が使えます.

これを踏まえると一番簡単な書式はこうなります.

title: タイトル
date: 2016-06-05 7:00:00
preview: テストです

---

テスト

これをblog/sourceの下に置いて, ファイル名をタイトル.mdなどとして保存してもいいのですが, それだと今後記事が増えた時にひっちゃかめっちゃかになる可能性が高いです.

そこで, blog/source/年/月/日というふうにサブディレクトリを作るのがおすすめです. サブディレクトリを作っても記事のURIには何の影響も出ないので, 好きなように変更できます. 私は今のところblog/source/年/月くらいにしてます.

ちゃんと生成されてるかチェックする

記事を書いたら, ちゃんとページが生成されるかテストしてみます. ./ink previewというコマンドを実行することで, ページを生成して簡易的なサーバが起動します. http://localhost:8000でアクセスできます. ポート番号が8000だと都合がわるい場合はblog/config.ymlで変更します.

テーマを修正する

ブログが生成されているかチェックすると, あることに気づきます. 投稿した時刻がおかしいんです. 設定ファイルで英語を指定したはずなのに,分钟前とか表示されます. どうもこの投稿時刻の表示はJavascriptで行われており, ここだけ言語の設定が反映されないみたいです.

まじめに直す

テーマはblog/themeにあり, 編集すべきファイルはblog/theme/source/index.coffeeです.

timeSince = (date) ->

    seconds = Math.floor((new Date() - date) / 1000)
    interval = Math.floor(seconds / 31536000)
    if interval > 1
        return interval + "年前"
    interval = Math.floor(seconds / 2592000)
    if interval > 1
        return interval + "个月前"
    interval = Math.floor(seconds / 86400)
    if interval > 1
        return interval + "天前"
    interval = Math.floor(seconds / 3600)
    if interval > 1
        return interval + "小时前"
    interval = Math.floor(seconds / 60)
    if interval > 1
        return interval + "分钟前"
    return Math.floor(seconds) + "秒前"

こんな記述があるので, 以下のように変更します.

timeSince = (date) ->

    seconds = Math.floor((new Date() - date) / 1000)
    interval = Math.floor(seconds / 31536000)
    if interval > 1
        return interval + "年前"
    interval = Math.floor(seconds / 2592000)
    if interval > 1
        return interval + "ヶ月前"
    interval = Math.floor(seconds / 86400)
    if interval > 1
        return interval + "日前"
    interval = Math.floor(seconds / 3600)
    if interval > 1
        return interval + "時間前"
    interval = Math.floor(seconds / 60)
    if interval > 1
        return interval + "分前"
    return Math.floor(seconds) + "秒前"

編集が終わったら, webpackを実行します.

blog/themeに移動して, 以下のコマンドを実行します.

npm install

./node_modules/webpack/bin/webpack.js

次にinkとかblogがあるディレクトリに戻って, ./ink previewを実行して確認してください. 10分前みたいなかんじになっているはずです.

適当に直す

nodeとか入れてないしjsファイル直接編集するだけでいいでしょ, って言う方はこっちで.

blog/theme/bundle/index.jsの1行目に, 个月前とか天前とか書いてある部分があるはずなので, 修正します.

./ink preview で変更が反映されていることを確認します.

コマンドまとめ

記事を書いたら./ink previewで確認して, ./ink publishでGithubにプッシュ, という流れになります. ./ink buildはテーマからcssやjsファイルをコピーしてくるコマンドですが, previewやpublishのときにこのコマンドが走っているみたいなので自分で実行する必要がなく, 余り使いません

Github Pagesの使い方

https://help.github.com/categories/github-pages-basics/を読めばだいたい分かる.

リポジトリの作成とCNAMEの設定

githubでblogとか適当な名前のリポジトリを作ります. そうしたら, blogディレクトリに移動して先ほど作ったリポジトリをcloneします. 次にblog/publicを削除し, cloneしたリポジトリのをpublicにリネームします. リネームしたらgit checkout -b gh-pagesを実行します.

blog/public/CNAMEファイルを作成し, 使用するドメインをファイルの1行目に書き込みます. jetzou.comとか, blog.jetzou.comみたいな感じです. 書き込んだら, git add CNAME, git commit -m "add CNAME"というふうにCNAMEファイルを追加し,コミットしてください.

コミットしたら, git push --set-upstream origin gh-pages を実行しておきます.

Custom Domainを使わずにdozen.github.io/blogみたいな感じで使う人はCNAMEファイルの設定は不要です.

DNSの設定

Custom Domain使う人だけが必要な設定です. https://help.github.com/articles/setting-up-an-apex-domain/ここを参考にします.

参考にするページにも書いてありますが, CNAMEレコードは使わないようにします. で, 今回はALIAS, ANAMEレコード非対応のDNSサービスを利用するため, Aレコードを使った設定をします.

DNSに192.30.252.153と192.30.252.154のAレコードを追加すればいいっぽいので, 追加します.

InkPaperの設定ファイルを修正する

blog/config.ymlのutlを変更します. 必要な場合はrootをアンコメントします.

記事をGithub Pagesに反映

ここまでの設定を終えて, 記事を書いたら./ink publishを実行します. これで, Github Pages上のブログにアクセスできるようになっているはずです

InkPaperとGithub Pagesの使い方はざっとこんな感じです.

InkPaperに関する日本語の記事があんまりないのが悲しいです. 日本で使ってる人が増えたらいいな. 🐘