目次
astro-notion-blogはREADMEのクイックスタートの通りに設定するだけで、30分と掛からずにブログの公開が可能です。
READMEではGitとNode.jsが必要な要件とされていますが、WindowsとVSCodeでやろうとしたら上手く行かないことが多すぎて苦労したので記録を残します。
詰まったところ
READMEに書かれているexportコマンドによる環境変数の設定ができなかった。
.envに環境変数を入れるとnpm run devが問題なく走るようになったが、npm run buildがAPIエラーになった。
VSCodeのターミナルがコマンドプロンプトだった。
Git Bashに変更したらexportコマンドによる環境変数の設定ができるようになり、npm run buildのときに読み込むようになった。
npm run devとnpm run buildでは環境変数の読み込み方が違うらしい。
環境変数の管理は.envで行いたいのでdirenvを使うことにした。
ビルド高速化の設定を行ったところ、Cloudflare Pagesでは成功してRemote Cache Hitになるが、ローカルではnpm run cache:fetchの実行後にターミナルが文字化けして処理が止まる。
Windowsなのが良くないと思ってLinuxで実行するようにした。
Gitpodというサービスがあるのですが、GitHubと連携してリポジトリを読み込み、Linuxでのビルド環境を構築できるという、上で挙げた問題を簡単に全て解決できるものになっています。
Linux環境にリモートアクセスしてるだけなのですが、ブラウザからでもデスクトップ版のVSCodeからでも同じように使うことが出来ました。
無料プランだと1ヶ月あたり50時間という制限があるだけで、非常に手軽で端末も選ばないのでいいと思います。
僕はGitの管理がコマンドかVSCode上の機能のみとなる(SourceTreeが使えない)ため結局使っていません。
Gitpodでの環境構築
GitHubアカウントでログインすればOKです。
GitHubアカウントに紐づいた自分のリポジトリを読み込むことができます。
プライベートリポジトリは初期状態だと読み込めないので、何か追加で設定した気がします。パブリックなら何もしなくても問題ありません。
ワークスペースは14日後に削除されるみたいなことが書かれているので、ワークスペースを固定します。これで削除されなくなるようです。
exportでシェル変数を設定できます。
READMEのカスタマイズするにはの通りです。
また、Gitpodの機能でリポジトリごとに環境変数を設定する方法もあります。
参考
僕は.envで一括管理しています。
.envはnpm run devにしか対応していないので、npm run buildに対応させるためにdirenvを使います。
.envに加えて.envrcを作成します。
気になるようなら.gitignoreに.envrcを追記しておきます。(.envrcに公開するとマズい情報は入ってないのでやらなくても問題ありません)
リセットしてリポジトリを読み込ませた直後のターミナルでも、direnvと入れてEnter押したらコマンドが出てくるので最初から入っているはずです。
(確認できないので勘違いだったらごめんなさい。僕がどこかでインストールするコマンドを実行したのが残ってるんだと思います。)
direnv allowを実行し、.envから環境変数を読み込みます。
npm run devの開発環境だけでなく、npm run buildの本番環境でも共通の環境変数を読み込み、正常に実行できるようになりました。
キャッシュにも対応できています。
適宜やります。
Git 改行 インストール
などで検索すれば出てくると思いますが、改行コードの設定は先にやっておくと後で困りません。
これも適宜やります。
僕はGit管理をVSCodeの拡張機能で始めてみたのですが、CUIだけでやろうとすると分かりづらくて挫折しました。
CUIのコマンド類はGitの概念すら理解出来ていなかった初心者には難しすぎたので、GUIでGitを管理できるSourceTreeを使用しています。
使うならインストールします。この先の手順で必須ではありません。
適宜やります。僕はMicrosoft Storeの普通のUbuntuでやっています。WSL2ならどれもそんなに変わらないと思います。
ユーザー名とパスワードを設定したら完了です。閉じます。
WSLの拡張機能が必要です。追加しておきます。
左下のボタンからリモートウィンドウを開きます。
WSLへの接続を選択
少し待つと
WSLへの接続が完了します。
VSCodeにGitHubアカウントでログインしていれば、リポジトリが選択できます。
クローン先のフォルダを選択します。良くわからないのでこのままOKにしてます。
開くか新しいウィンドウで開く を選択します。
信頼すれば準備OKです。
node -vで確認できる通り、Node.jsが入っていないのでインストールします。
astro-notion-blogでの必要要件は
Node.js v18 かそれ以上
です。
これを見ながらやります。
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm cache clean --force
↑--forceを付けないとエラー出るので付けました
sudo npm install n -g
sudo n stable
sudo ln -sf /usr/local/bin/node /usr/bin/node
これでv18.17.1(2023/08/15時点)が入りました。
最新版を入れるだけならこれで良いと思います。
バージョン指定の方法もあるらしいですね。
exportでシェル変数を設定します。
READMEのカスタマイズするにはの通りです。
これで良ければこれで終わりです。
僕は環境変数をファイル上で管理したいので.envに記述しています。
.envはnpm run devにしか対応していないので、npm run buildに対応させるためにdirenvを使います。(開発環境と本番環境の読み込み方の違いによるものらしいです。詳しく知りません。)
sudo apt install direnv.envに加えて.envrcを作成します。
Gitに変更として読まれるのが気になるなら、.gitignoreに.envrcを追記しておきます。(.envrcに公開するとマズい情報は入ってないのでやらなくても問題ありません)
direnv allowで.envrcの読み込みを許可します。
そしてフックの設定
.bashrcの末尾に書き足します。
eval "$(direnv hook bash)"
コマンドでやるのが面倒だったので、Windows側から直接開いてメモ帳で書き足しました。簡単です。
一行上にあるのはターミナルでのホスト名表示の変更ですね。
最後にもう一度
direnv allowをしておきます。
こんな風に環境変数が読み込まれたことが分かります。
npm installを実行します。色々とモジュールが入ります。
そしてnpm run devを実行します。
LocalのURL部分をCtrl+左クリックで、ブラウザ上で開発中のページを開けます。
VSCode内でプレビューする方法もありますが、ブラウザでやったほうが実際の環境に近いので僕はやりやすいです。
npm run buildを実行します。
こんな風に処理が走り始めたら成功です。
終わったら、npm run previewからビルド後のページが確認できます。
この通りにやるだけです。
僕の場合はこの通りにやってエラーになって困っていたのですが、これまでの手順で構築したWSL2の環境であれば、成功します。
この通りにやります。特に、SourcetreeをWSLで利用する際のエラーの解消が大事です。
右上のターミナルにて下記を実行。
git config --global --add safe.directory '*'結構長く手順を書いてきましたが、astro-notion-blogの使用者のレベル想定が難しくて、どこまで書けばいいのか分からなくなりました。
僕自身はGitの概念も理解していないような初心者でしたが、VSCodeやターミナルは使っていたのでそこは平気です。人によって違うのでスクショ多用するしか無くなってしまいました。
公式のREADMEとクイックスタートの手順が初心者でも分かりやすいので、あれくらいシンプルで分かりやすく書けるようになりたいです。