これはKCSアドベントカレンダーの記事です。
あなたがこの記事を読んでいるということは、このブログサイト lemolablog が(一応)完成したということでしょう。
現在2022年12月22日の23時45分です。おそらくみなさんが目にする頃には23日になっているでしょう。3日遅刻です。(すみません)クリスマスも近いですがみなさんいかがお過ごしでしょうか。
この記事では、自作ブログを作った話をします。これは「自作ブログを作った話を自作ブログ上に載せたらおもしろいんじゃね!!」という思いつきで生まれました。
lemolablog 次のような機能があります。
ブログ記事はマークダウンで書くことができて、内部でZennのライブラリを使っているので、Zennの記法が使えます。
ヘッダーの右上にあるEditを開くと、編集画面が開きます。
編集中の画面
上の灰色のタブからマークダウン表示とプレビュー表示が切り替えられます。これはログインしていなくても試せるので、この記事を読み終わったらぜひ試してみてください。
単純にそれっぽい列挙をしてみると
具体的には、React
とstyled-component
でフロントエンド部分をつくり、認証、ブログ記事のデータのストア、画像のホスティング、にはsupabase
を使い、Next.js
を用いているのでvercel
へデプロイしています。
今のところすべて無料プランでいけてます!!
ソースコードはここにあります。
またdeploy先はここにあります。(今あなたが見ているページです。)
ここからは個人的に言いたいことがある項目について書きます。
いままで、CSSを真面目に書いたことがなかったのでこれを使ってみました。ただ、CSSを適用したい要素が出てくるたびに新しいコンポーネントを作っていたのでお作法として合っているのかはまだ良くわかってないです。フロントエンドのデザインパターン(?)的なやつに気持ちがある人からの指摘をお待ちしています。
↓ 乱立するstyled componentたち
用いた技術の中でsupabase
が一番マイナーな気がするので使った感想を書きます。firebase
もまともに使ったことないので比べられませんが、結構便利でした。特に次の点がよかったです。
PostgreSQL
なので、supabase
以外の情報も参考にできる。row-level-security
(これはPosgreSQL
の機能)が良い。@supabase/auth-helpers-react
)を介してできる。select
などで型の補完がちょっと効く。markdownの中で画像を挿入するにはリンクを貼る必要があります。そのため、ローカル環境にある画像をブログに載せたい場合、その画像を指すリンクが必要になります。これはsupabase
のストレージで画像をホストすることで解決しました。
画像をアップロードする方法として、2つの手段を用意しました。
個人的には後者の方法が気に入っていて、特にwindowsで画面を矩形選択でキャプチャしたときに最初にクリップボードに保存されるので、モニターをスクリーンショットしてブログに載せるのがめっちゃやりやすくなってます!!
個人的に↓みたいな感じでUploading
って出すのも気に入ってます。
ある程度のサイズのwebアプリケーションを作り上げたことがなかったのでおそるおそる作っていきました。個人的にはノリで作った割には今後も自分のブログプラットフォームとして使っていけそうなのができてよかったです。
自分の思うままに書いたので設計やデザインなどいろいろやばいところがあると思いますが、なにかありましたらissueに書いたり、twitterやvrcで教えてもらえると助かります!!
ここまで読んでくれてありがとうございます😊