自作blogサイトを作った話

これはKCSアドベントカレンダーの記事です。

19日目 ← 20日目 → 21日目

はじめに

あなたがこの記事を読んでいるということは、このブログサイト lemolablog が(一応)完成したということでしょう。
現在2022年12月22日の23時45分です。おそらくみなさんが目にする頃には23日になっているでしょう。3日遅刻です。(すみません)クリスマスも近いですがみなさんいかがお過ごしでしょうか。
この記事では、自作ブログを作った話をします。これは「自作ブログを作った話を自作ブログ上に載せたらおもしろいんじゃね!!」という思いつきで生まれました。

目次

  • 実装した機能
  • どんな技術を用いたか
  • 私のイチオシ機能
  • おわりに

実装した機能

lemolablog 次のような機能があります。

  • googleアカウントで認証して、それに基づいてブログ記事をweb上で編集、一次保存、公開ができる。
  • 公開されたブログ記事を読むことができる。

blog記事web上編集機能について

ブログ記事はマークダウンで書くことができて、内部でZennのライブラリを使っているので、Zennの記法が使えます。
https://zenn.dev/zenn/articles/markdown-guide

ヘッダーの右上にあるEditを開くと、編集画面が開きます。

編集画面
編集中の画面
上の灰色のタブからマークダウン表示とプレビュー表示が切り替えられます。これはログインしていなくても試せるので、この記事を読み終わったらぜひ試してみてください。

どんな技術を用いたか

単純にそれっぽい列挙をしてみると

  • typescript (javascriptに型を足していい感じにしたやつ)
  • Next.js (React.jsを基にしてルーティングをはじめとして様々な機能を全部備えたやつ)
  • styled-component (CSSをtypescriptファイルに書ける、ただのライブラリ)
  • supabase (firebase alternativeのOSS、データベース、ストレージ、認証、など様々なバックエンドの仕事を担ってくれる)
  • zenn-markdown-editor (Zennの内部でも使われているマークダウンパーサで、マークダウンをhtmlに変換してくれる)

具体的には、Reactstyled-componentでフロントエンド部分をつくり、認証、ブログ記事のデータのストア、画像のホスティング、にはsupabaseを使い、Next.jsを用いているのでvercelへデプロイしています。
今のところすべて無料プランでいけてます!!

ソースコードはここにあります。
https://github.com/lemolatoon/lemolablog
またdeploy先はここにあります。(今あなたが見ているページです。)
ここからは個人的に言いたいことがある項目について書きます。

styled-componentについて

いままで、CSSを真面目に書いたことがなかったのでこれを使ってみました。ただ、CSSを適用したい要素が出てくるたびに新しいコンポーネントを作っていたのでお作法として合っているのかはまだ良くわかってないです。フロントエンドのデザインパターン(?)的なやつに気持ちがある人からの指摘をお待ちしています。
↓ 乱立するstyled componentたち
https://github.com/lemolatoon/lemolablog/blob/master/pages/edit.tsx

supabaseについて

用いた技術の中でsupabaseが一番マイナーな気がするので使った感想を書きます。firebaseもまともに使ったことないので比べられませんが、結構便利でした。特に次の点がよかったです。

  • データベースがPostgreSQLなので、supabase以外の情報も参考にできる。row-level-security(これはPosgreSQLの機能)が良い。
  • データベースのアクセスには生のSQL文を書くのでなくライブラリ(@supabase/auth-helpers-react)を介してできる。selectなどで型の補完がちょっと効く。
    ちょっと補完が効いている例
    ちょっと補完が効いている例

私のイチオシ機能

markdownの中で画像を挿入するにはリンクを貼る必要があります。そのため、ローカル環境にある画像をブログに載せたい場合、その画像を指すリンクが必要になります。これはsupabaseのストレージで画像をホストすることで解決しました。
画像をアップロードする方法として、2つの手段を用意しました。

  • 上部のタブにある画像アイコンをクリックして画像ファイルを選択する方法
  • 画像ファイルがクリップボードにコピーされている状態で、エディターへペーストする方法

個人的には後者の方法が気に入っていて、特にwindowsで画面を矩形選択でキャプチャしたときに最初にクリップボードに保存されるので、モニターをスクリーンショットしてブログに載せるのがめっちゃやりやすくなってます!!
個人的に↓みたいな感じでUploadingって出すのも気に入ってます。

おわりに

ある程度のサイズのwebアプリケーションを作り上げたことがなかったのでおそるおそる作っていきました。個人的にはノリで作った割には今後も自分のブログプラットフォームとして使っていけそうなのができてよかったです。
自分の思うままに書いたので設計やデザインなどいろいろやばいところがあると思いますが、なにかありましたらissueに書いたり、twitterやvrcで教えてもらえると助かります!!
https://github.com/lemolatoon/lemolablog/issues

ここまで読んでくれてありがとうございます😊

© 2022 lemolatoon