VuePressを使って"Laravel+TDD"の導入記事を書いてみた

Laravel+TDDの基礎

こういうサイトを作りました。(ドキュメントとしては、作成中です。)

VuePressという、Vue.jsをベースにした静的サイトジェネレータを使って作っています。

2019/09/11 更新
VuePress 1.x に Google Adsense を組み込むための記事を作成しました。
VuePress に Vue-Google-AdSense を導入する手順解説

最近、LaravelというPHPフレームワークをよく使っているので、それに関しての勉強とその情報発信をしたいなぁ、と思っておりました。

また、最近「テスト駆動開発」という書籍を改めて読みまして、「自然にテストコードを書く」ための導入コンテンツが必要だなぁ、と感じました。

その二つが合わさって、Laravel+TDDの基礎といテーマを思いつきました。

このブログ(WordPress)ではなく、なぜ静的サイトジェネレータを使ったのか？というと、一番は「独立したコンテンツ」にしたかったからです。
そこそこボリュームがあるのはわかっていましたし、ブログで書いた後に更新をかけていくのも微妙だなぁ、とも思ったので。

WordPressの固定ページでやっていく方法もあるとは思いましたが、
ローカルでMarkdownファイルを書いてそのままデプロイできる方が便利だなぁ、という考えもありました。

ということで、静的サイトジェネレータを使う方向で検討しました。

いくつか調べつつ最初はGitBookを使ってみたのですが、いまいちしっくりこずに断念しました。(ツールの更新も止まっているっぽい?)

gitbook-cliで、Google Analyticsのプラグインがうまく動かなくて速攻断念。
他の静的サイトジェネレータは、、ということで、この前SaCSSで聞いたVuePressを試してみよう。
— Takuya KIHARA (@tacck) April 30, 2018

という呟きのとおり、ちょうど勉強会で知ったVuePressを使ってみました。

基本的なこと(Markdownを書いて表示する)分には、何も難しいことなくできます。
(これは、大抵のツールがそうだと思いますが。)

サイドバー周りの調整などは、構造によっては頑張って設定しないといけないですが、基本的には難しいことなく作ってくれるので、とても楽です。

最初にその辺りを多少頑張る必要はありますが、その後はドキュメントを書くことに集中できそうです。

レイアウトをカスタマイズしようとすると、、ちょっと簡単ではなさそうです。
これは、VuePressの知識とあわせてVue.jsの知識も必要になってきて、若干ハードルがあがります。

標準のレイアウトで見栄えも気に入っているので、大きく困りはしないのですが、「作者情報」や「Google AdSense」あたりを埋め込むのに、カスタマイズをしました。
この辺りは、今後も研究が必要そう。

書いてリリースするまでの簡単な流れを紹介。
ドキュメントは、GitHubで管理しています。

という感じです。
ビルド+デプロイ部分を自動化していることで、マージボタンを押せばきちんと本番に反映されて、ストレスフリーでリリースができます。
これは、最初にやってよかったですね。

LaravelとTDDを少しでもわかりやすく、実際に開発で使えるような、そんなドキュメントを頑張って書いていきたいと思います。