2018-11-09

Nuxt.jsを使ってブログをリニューアルしました

今まではJekyllを使って作成していたのですが、ローカル環境でbuildできなくなることがあったり、デザインをいじるのが面倒だなと思ったので自分でJekyll相当のツールを作りました。

リポジトリ https://github.com/ta2mo/blog-maintenance

自分が気に入っている技術を集めて好きなようにブログを書ける環境をつくりましたが、ふんわりと考えた要件としては

  • 投稿内容はmarkdownで書いてgit管理→GitHub管理
  • そこそこリッチかつ、ベストプラクティスを踏襲したページにしたい→Nuxt.js
  • 配信とかビルド周りといった足回りは無料でやりたい→GitHub Pages、CircleCI

使っているフレームワーク、ライブラリ、サービス

  • Nuxt.js
  • bulma
  • golang
    • text/template
    • cli
  • CircleCI

詳細はリポジトリの方をご確認ください。

大まかな概要

  1. /post ディレクトリ以下にmarkdown形式で書いて配置
  2. GitHubにpush
  3. CircleCIでビルド
    1. markdownファイルを元にvueのcomponentをgolangで生成
    2. Nuxt.jsのgenerateを利用して静的サイトを生成
    3. 生成した静的サイトをGithub Pagesのリポジトリにpush
  4. Github Pagesから配信される

今後の課題

  • 自動生成された文章のレイアウトを見やすくしたい
  • 検索機能やタグで分類するとか追加したい機能があるがどこまでやるか問題
  • Disqusをつかってコメント機能を入れていたが削除した。github issuesに集約して大丈夫か悩み
  • 腕試しがてらアニメーションとか無駄につけてオシャレ感だしたい
  • いろいろ細かい知見が溜まったのでブログに書き起こす