ブログ執筆環境を求めて

2018.04.28

どのブログサービスも重く,無駄な機能がてんこ盛りでうんざりする. GitHub Pages(Jekyll)などを使って使いやすい執筆環境を整え, スクリプトを作って自動化した.

理想のブログ執筆環境

  • エディタはVimを使う
  • 書式はMarkdownを使う
  • Gitで管理できる
  • かんたんなコマンドで更新ができるようにする

GitHub Pages

ブログホスティングサービスはGitHub Pagesを使う. 無料で,容量はバイナリ1ファイル100MB以外は特に制限がなく,HTTPSで,バージョン管理システム付き(本体) という,静的ホームページホスティングサービスとして考えれば,どのサービスにも劣らないのではないか.

Jekyll Now

GitHub PagesだったらJekyllだよね. 今回は軽量でシンプルなJekyll Nowを使った. ただし,jekyll-paginatejekyll/taggingを使うので, 直接GitHubにプッシュして展開させることができない. そのため,ブログ執筆用のblogリポジトリと展開用のnoyuno.github.ioリポジトリの 2つを用意して,執筆したらスクリプトでblogには_site以外のファイルを, noyuno.github.ioにはjekyll buildした_site内のファイルを同時にプッシュするようにした.

今回使用したプラグインは次のとおりである.

  • jekyll-sitemap
  • jekyll-feed
  • jekyll-paginate
  • jekyll/tagging

圧縮はpenibelst/jekyll-compress-htmlを使った. 改行の圧縮は,1文字でも編集するとファイル全体が変わったものとされ,Gitではrewrite mode になって精神衛生上よろしくないので,行わなかった.

スクリプト

記事をGitHubにプッシュして公開するスクリプトを作った.

dotfiles/blog at master · noyuno/dotfiles

コマンド一覧

blog <command>
    blog management tool

<command>:
    init|i: init repository
    new|n <title>: new article with url-title
    push|p: build and push blog
    compress|c: compress images
    edit|e: edit found file
    show|s: show
    stop|t: stop service
    keyword|k: edit files including specified keyword
    help: show this help

ワークフロー

  1. blog n urlnameで記事を新規作成して,$EDITOR で開く.
  2. 記事を執筆する
  3. blog sで見た目をブラウザで確認する.
  4. blog cですべての画像を見た目はおなじまま圧縮する.
  5. blog pでGitHubにプッシュして記事を公開する

特にblog e vimと打つとURLにvimが含まれる記事をすぐに編集できる機能を気に入っている. もし,それが複数あれば,編集したい記事を番号で選択することができる.

[noyuno@ld ~/blog] $ blog e vim
1: ./2017/2017-05-15-vim-statusline.md
2: ./2017/2017-10-16-nvim-mapping.md
which do you want edit:

高速な表示

色々といじって高速に表示できるようにした. ブログいじりは時間を溶かすので注意する必要がある.

PageSpeed Insights での最適化の結果

一覧:パソコン89%,モバイル99%

PageSpeed Insights 界隈で有名なThe DEV Community (パソコン88%, モバイル99%)以上の値である. ただし,PageSpeed Insigts の王者である阿部寛のホームページ (パソコン93%, モバイル99%)を超えることはできなかった.

※肝心の速度は雑魚ページランクなので取得できなかった.

まとめ

理想どおりにできたと思う😁

執筆:noyuno/blog: blog

展開:noyuno/noyuno.github.io: blog deploy repo