GatsbyJSをYouTubeで学べる「The Great Gatsby Bootcamp」をやってみたら最高だった

こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。

Webサイト高速化のための　静的サイトジェネレーター活用入門 (Compass Booksシリーズ)

Next.js(静的サイト)をFirebaseにホスティングする + ブラウザリロード時の対応

こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。

Next.jsにTailwind CSSを導入する + styled-componentsと一緒に使う

こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特に熱いのがTailwind CSSです。

ReactでTypeScriptの型定義を拡張する

こんにちはかみむらです。最近は、React + TypeScriptをよく書いているのですが、下記のようなエラーが発生しました。

ここでやりたかったことは、Chromeでサポートされたimgのプロパティで、Loading Attributeを使って画像を遅延読み込みしようとしました。
Reactでも使えそうだったので実装してみたところ、imgプロパティに型定義がないと怒られました。そこでDefinitelyTypedで、imgプロパティの型定義を確認したところ、やはりありませんでした。

GitHub Actionsでブランチ毎にワークフローを分ける

こんにちはかみむらです。前回は、GitHub ActionsでNowにデプロイする記事を書きました。

code-log.hatenablog.com

この記事でも言及しましたが、NowのCLIにはpreview deploy(プレビュー用)とrelease deploy(リリース用)の2つがあります。実際にWEBサイトを運用する場合は、ブランチもしくはタグでデプロイを分けたほうが都合がいいです。

GitHub ActionsでNowにNext.jsをデプロイする

こんにちはかみむらです。現在Next.js + microCMSでポートフォリオを作成していて、ホスティングサービスにNowを利用しています。

NowはNext.jsと同じZeit社が運営しています。特徴として、NowのCLIライブラリを使えば、Next.jsアプリケーションを1コマンドで簡単にデプロイできます。

例えば、ホスティングしたいプロジェクト上で、下記のCLIコマンドを打つだけでデプロイできます！！素晴らしい！！

$ now

そんなわけで、今回はGitHub Actionsを使ってCI/CD経由でNowにデプロイしてみます。

振り返りノート(2020年1月)

こんにちはかみむらです。今年から振り返りノートとして、一ヶ月の振り返りをまとめてみます。最近ではブログのアウトプットも増えてきたので、自分への見つめ直しとしていい機会だと思いました。