![見出し画像](https://assets.st-note.com/production/uploads/images/141660128/rectangle_large_type_2_d55a6e89a938b39ec90cc02b7398d376.png?width=1200)
ブログの作成とか……その②
前回に続き今回はGitHub+CloudFlareとの連携を行いたいと思います。
そういえば私はエディタ/IDEにJetBrainsを使用していますが、今回の記事では無料で使えるVSCodeで作業を行っています。
JetBrainsを使いたいよって人はひとまず「IntelliJ」がおススメかな?
全部入りはそこそこ高いので。(2倍くらいします)
あ、DBをさわる人はDetaGripが本当におススメです。
もはやこれを使わずにDB触るのがあり得ないくらいな神ソフトだと個人的には思っています。
それでは本題、まずGitをインストールします。
VSCode上でGitの設定をします。
VSCodeを起動し、ターミナルを開きます。
ターミナルで以下のコマンドを実行し、Gitの設定を確認します。
git config --global user.name
git config --global user.email
これらのコマンドで、現在のユーザー名とメールアドレスが表示されない場合は、以下のコマンドで設定します。
git config --global user.name "Your Name"
git config --global user.email "your@email.com"
作業ディレクトリ内で以下のコマンドを実行
git init
次にGitHubにリモートリポジトリを作成します。
アカウントがない人はここから作ってください。
Create a new repositoryを以下の設定で作成します。
![](https://assets.st-note.com/img/1716516614321-sC238JIOFp.png?width=1200)
リポジトリが出来たら画面中央部の以下の画面の一番上のURLをメモしておきます。
![](https://assets.st-note.com/img/1716517702116-Xk7LsqtwmY.png?width=1200)
VSCodeに戻り、左のメニューバーからソース管理を選ぶと、変更の入ったソースコードの一覧が出ます。
今回はまだ1度もコミットしていないので全てのファイルが表示されていると思います。
![](https://assets.st-note.com/img/1716516972921-ToEkYz5SwV.png)
インストール時に自動生成されたファイルはステージングされているのですが、前回の作業で新規に作成したファイルはステージングされていないため、ファイルの右のプラスボタンを押してステージングします。
![](https://assets.st-note.com/img/1716517087465-f6okFoBV8R.png)
全部のファイルがステージングされたら、コミットメッセージを入力してコミットします。
![](https://assets.st-note.com/img/1716517141793-lQh0kaOCdo.png)
「…」よりプッシュをクリックしてGitHubのリモートリポジトリにプッシュします。
![](https://assets.st-note.com/img/1716517327047-xyS31pcQns.png?width=1200)
まだリモートリポジトリが選択されていないので、先程メモしたURLを入力します。
![](https://assets.st-note.com/img/1716517415443-sbdwhos5Iy.png)
プッシュを実行するとGitHubの方に反映されます。
![](https://assets.st-note.com/img/1716524688034-wO71xFcYTd.png?width=1200)
以上がローカルで構築し、動作確認したAstro製のブログのGitHubへの反映方法になります。
次にCloudFlareとの連携を行います。
アカウントがない場合は作成します。
Pagesから「Gitに接続」を選びます。
![](https://assets.st-note.com/img/1716520859563-BqxhlVKTRz.png?width=1200)
順番に進めていきます。
![](https://assets.st-note.com/img/1716520942525-rIObSxFj5H.png?width=1200)
![](https://assets.st-note.com/img/1716521216961-yzVWrLr2Ya.png?width=1200)
ビルドの設定は以下のように設定します。
![](https://assets.st-note.com/img/1716521268989-A7IuQIZu2H.png?width=1200)
「保存してデプロイする」を選択。
ビルド&デプロイに成功しました。
![](https://assets.st-note.com/img/1716521409328-n0n4L7xKrI.png?width=1200)
![](https://assets.st-note.com/img/1716521460946-qa2vaGCodi.png?width=1200)
URLにアクセスすると、CloudFlareにデプロイされたページが表示されます。
![](https://assets.st-note.com/img/1716524256448-IqWtm65uFa.png?width=1200)
これでGitHubにプッシュした変更がCloudFlareでもビルド&デプロイするようになりました。
今度は違うフレームワークを使って作ろうかなぁ、なんてね。
読んでくださり、ありがとうございました。
#Blog #ブログ #Nodejs #Javascript #TypeScript #Astro #GitHub #CloudFlare