ブログを始めた🌱

AWSで遊ぶためにブログを始めました。

なぜ今更なのか

そもそも、私は文字を書くのも読むのも遅いので、今までブログには一切興味がありませんでした。 しかし、最近仕事の関係で、AWSでのドメイン取得周りを触る必要が出てきたので、 「せっかくなら先に個人で触ってしまおう」「なんならドメインを使って何かを公開しよう」 ということで、AWSのS3やCloudFrontにブログをデプロイして、個人のドメインで公開してしまおうと思いました。

第1回ブログのテーマ

初回のブログのテーマは、このブログサイトを作るまでの話です。

このブログサイトはNext.jsで作って、それを静的ファイルにビルドしたものをS3にデプロイしています(これを書いている時点ではデプロイしていません)。 いつもの開発と同様にChatGPTと共にジタバタもがきながら、壁にドスドスぶち当たりながら作成しています。 そのため、現時点では配色もキモくなってます。

今回はここまでの足掻きを残していこうと思います。

ブログってどう作るんだよ...

Webページが HTMLとCSSとJavascriptで構成されているのは分かる。

サイトにアクセスした人のブラウザに、サーバーからこの3種のファイルが送られて、 ブラウザが頑張って表示してるのも分かる。

問題はHTMLを書くのがダルいということ。

HTMLは下のサンプルコードのように<○○>と</○○>の形式のタグで、各文章・見出しを囲まないといけない。 このタグがあるおかげで、ブラウザはどれが見出しで どれが通常の文で どれが太字かが判別できるわけだが、ただ文章を書くだけの場合、先頭と末尾にこれを付けるのが面倒くさい...

<h2>こんにちは</h2>
<p>これはブログの最初の投稿です。</p>
<p><strong>AWS</strong>で遊びたくて始めました。</p>

お店のホームページとか文字の配置とかが型にはまっていないならまだしも、 ほとんど形式が同じブログなのであれば、これは面倒くさい。

特に末尾側のタグが面倒くさい。

そんな面倒くさがりの私の前に現れた救世主は、gray-matterとremarkでした。 gray-matterは、Markdownファイルの先頭に書かれたメタ情報（タイトルや日付など）を読み取ってくれるやつで、 remarkはMarkdownの本文をHTMLに変換してくれるやつです。 これらは、今回使用したNext.jsと一緒に使えるモジュールです。 おかげで、HTMLよりは書きやすい 以下のようなマークダウン形式で記事が書けました。

## こんにちは
これはブログの最初の投稿です。
**AWS**で遊びたくて始めました。

コードのほとんどはChatGPTに書いてもらいました。

CodeCommit が使えなかった😭

AWS版のGitHubである AWS CodeCommitを使いたかった。

CodeCommitであれば、AWSのサービスとも連携しやすそうだと思ってたけど、 使えなかった。

AWSマネジメントコンソールからCodeCommitのページに行くと、青色の注意書きで、 以下が書かれていました。

AWS CodeCommit is no longer available to new customers. Existing customers of >AWS CodeCommit can continue to use the service as normal.

(AWS CodeCommit は新規のお客様にはご利用いただけなくなりました。既存の AWS >CodeCommit のお客様は引き続き通常通りサービスをご利用いただけます。)

私のアカウントでは使えそうになかったので、代わりにGitHubのプライベートリポジトリを使いました。

App Routeだとダメだった😭

今回使ったNext.jsは、ウェブアプリ開発でもよく使われているフレームワークで、最近は「App Router」という新しい構成方法が主流になってきているようです。

しかし、私が今回やりたかったのは「ブログを静的なHTMLに書き出してS3にアップロードして公開する」という、 いわゆる "サーバー不要な静的サイト" のスタイル。

App Routerでは next export が使えないという制限があり、静的出力（HTMLだけを吐き出すやつ）ができませんでした。

せっかくなら最新の構成に触れておこうと思ったのに、目的が目的だけに断念せざるを得ず。 結局、従来の Page Router を使うことにしました。

ただフォルダの名前が変わるだけかと思ってたら、ちゃんとできることに違いがあったのか...

Tailwind は苦手だった😭

見た目の調整には最初、流行りの Tailwind CSS を試そうとしました。

ただ、クラス名が呪文みたいで全然覚えられなかった。 たとえば text-white bg-black font-semibold px-4 py-2 rounded-md みたいな感じで、1行に詰め込まれたCSSっぽい英単語たち。

書けば書くほど、これ本当に読みやすくなってるんだろうかと疑問が湧いてしまい、 最終的には SCSSに切り替えて書くことにしました。

SCSSだと .header { background: black; color: white; } みたいに構造でまとめられるので、後から読み直すときのストレスが少ないと感じました。 ちゃんと調べたらTailwindの方が良かったりするのかもしれないけど、今回は見慣れているSCSSを使うことにしました。

おわりに

この記事が読めているということはS3へのデプロイも成功したということで、 これから時々記事を追加していくかもしれないです。

ここまでテキトーな文章を読んでいただきありがとうございました🐸