この記事に書いてること
- ブログの作成動機
- 構成概要と採用理由
- 現在実装している機能と追加予定のもの
- 具体的な実装は次回から
なぜブログを作ったか
友人からJAMstackとheadlessCMSでブログを作るという話を聞いた。
その時点でこの２つの言葉をあまり知らなかったため調べると、技術的にはなんとかなりそうなレベルだった。
というわけで、興味が湧いたので後追いで作ってみた。
人がやってること、話していることはやってみたくなるね。
後は文章書く練習とか何か一つくらい継続してやってるものを持ちたいとかいったところ。
技術選択
かなり適当な理由で始めたが、作るからには学びがあってなおかつ使いやすい構成にしたい。
というわけで、興味のある技術を盛り込みつつ安定した運用ができる形にした。
headlessCMSはcontentfulなどのWebサービスを使うか、自分でサーバーを建てるかの選択になった。
趣味としてインフラとバックエンドはある程度作りたかったので、後者を選択。
インフラはKubernetes(k8s)を使いたかったので自宅のIntel NUCのUbuntu上にバックエンドを載せることにした。
最初はmicrok8sを使っていたが、コンテナが立ち上がらない不具合にハマってどうしようもなくなったのでminikubeで運用した。
クラウドでのマネージドk8sは費用面で却下。
バックエンドは１から作るのも辛いのでオープンソースのStrapiを導入。
https://strapi.io/
導入したのはいいけど、想像以上にいじるところが無くてあまり面白みはなかったのでそのうちプラグインとか作ってみたい。
フロントに関しては、以前Nuxt+markdownで静的サイト構築はしたことがあるので、Nuxtはできれば避けたかった。
そこでReactを使っている静的サイトジェネレーターであるGatsbyを使うことにした。
https://www.gatsbyjs.com/
かなりメジャーらしいので無難な選択。だったのだがサイト作成自体はNuxtの方が楽だったかもしれない。
プラグインが充実していたのはかなり助けられたので、Gatsbyの個別記事ではそのあたりにも触れようと思う。
デプロイ先に関しては、前から使っていたFirebase Hostingを使用。
ファイル置いとくだけなので、出来るだけ面倒なことにならないところにしておいた。
構成概要
雑だけどこんな感じ。
世界がGithubを中心に回っている。
フロントがオレンジ、バックエンドが青の線でデータの流れを書いている。
基本的にPushしたら自動で動くようになっているが、minikubeへのマニフェスト適用は手動。とはいえpullしてapplyするだけなので楽。
実装している機能と追加予定のもの
TOP・記事ページ・カテゴリページが実装済み。
サイドメニューも一応ある。ロゴは適当なのでどうにかしたい。
内部的にはタグが存在するのでページと一覧は後で作る。
ページネーションが存在しないのがヤバいですね☆
後はサイドバーがソースに直書きなのでStrapiに管理させたい。変更が想像以上に面倒だった為。
AboutMeページ作ったり検索作ったりもしたいのでやりたいことは盛りだくさん。けど記事も増やしたい。辛い。
終わりに
次回からは構築方法を順を追って書いていく。
1年後の自分が見て分かる程度には細かめにやっていきたい。
開発中のリポジトリ
https://github.com/Tim0401/dreamer-gatsby
https://github.com/Tim0401/dreamer-strapi
https://github.com/Tim0401/dreamer-strapi-webhook
ローカルファイル構造
dreamer
├── dreamer-gatsby
│ ├── LICENSE
│ ├── README.md
│ ├── articles
│ ├── content
│ ├── firebase-debug.log
│ ├── firebase.json
│ ├── gatsby-browser.js
│ ├── gatsby-config.js
│ ├── gatsby-node.js
│ ├── gatsby-ssr.js
│ ├── node_modules
│ ├── package.json
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── types
│ └── yarn.lock
├── dreamer-strapi
│ ├── app
│ ├── db
│ ├── docker-compose.dev.yml
│ ├── docker-compose.prod.yml
│ └── manifest
└── dreamer-strapi-webhook
├── Dockerfile.dev
├── Dockerfile.prod
├── docker-compose.dev.yml
├── index.ts
├── node_modules
├── package.json
├── tsconfig.json\
└── yarn.lock
