AstroとCloudflareとGitHubで無料サイトを公開するまで
Web制作開発記録
- 開発環境の準備
最初はLinux Mintで開発しようと考えたが、外付けSSDの価格を考え、一旦Windowsで開発することにした。 PowerShellが使えず、コマンドプロンプトを使用することになった。
その後、
OneDriveとの同期を解除 環境変数やpathなどいろいろ準備に時間がかかった Projects フォルダを作成 VSCodeを使用 cloudflareアカウント用意 GitHubアカウント用意 開発環境を整理
これでとりあえず開発できる環境が完成した。
- Astroをインストール
Astroプロジェクトを作成
npm create astro@latest
設定は
Basic Starter Dependenciesをインストール Gitを初期化
を選択
- 開発サーバー起動
ローカルホスト環境で書いたHTMLがきちんと動作するか確認のために起動した。
npm run dev
何もかも初めてだが、AIがわからないことを詳しく教えてくれるので、 ゆっくりだが進めることができた。 Windowsファイアウォールの警告が出るが、許可しておく。
VS Codeで Astro拡張機能 Git を利用開始。 Gitのコミットも経験 まだよくわかっていない部分が大半を占める。
##ついにHTMLを触る
テーマ（テンプレ）をつかってさっさと作り終える予定が、 なぜか一から作り始めることになってしまった。 これも経験だとAIの通りにぽちぽちしはじめる。
こんにちは！私のホームページです！
これを書いてローカルホストで確認したところ、文字化けしていた。 早速直す。作る、直すを繰り返して一日潰す。 公開前にすでに面倒になってきた。 しかし、とりあえず公開までこぎつけたい。 中身は何でもいい、公開するまで頑張ろう。 自分の忘備録としての記録を残すだけなので、別に毎日更新でもないので問題ない。 たまに更新すれば上等といったぐあいである。
CSSを書いて、ページを装飾。 普段何気なく見ているWebサイトもこんな風に作られているのかと感心。 トップページを作るだけでライフはゼロ。 これはテンプレートを使った方が絶対にいい。早いと思う。 仕組みを知るという点では、無駄にはならないと思う。 興味があるものはすべて試してみたいという欲求に駆られ、こんなめんどうなことをしているのだ。 自業自得である。それにしても、私そのものはかなりの面倒くさがりであり、非常に飽きっぽい。 ページを公開した時点で飽きていてもまったくおかしくはない。
AIだけではなく、Qiitaなども参考にcloudflareやGitHubへアップロードする方法を探していく。 どうやらcloudflareにはPagesとworksなるものが存在しているようだ。 その違いもよくわからずセッティングしていたが、接続と切断を繰り返し、ようやくアップロード成功。 長かった。どれも初めての単語ばかりで頭が爆発するかと思ったが、とりあえず、公開まで成功。 もっと詳しく解説したいところだが、とりあえずこれで。 できれば加筆修正を行いたいところである。
今後追加したいこと
記事一覧 Markdown記事 カテゴリー タグ 検索 画僧挿入
現在、カテゴリーなどはあるが、そこはなにもない。やる気があれば追加予定。
現状と今後
とりあえず公開が目標なので、デザインなどはそのうち改修予定（未定）。
① ファビコンをオリジナルにする ② OGP（SNSで共有したときの画像・説明）を設定する ③ Google Search Consoleに登録する ④ Google Analytics（またはCloudflare Web Analytics）を導入する ⑤ 独自ドメインを取得する（必要なら）
前から興味はあったが、サーバー代などでとどまっていたが、 静的HTMLであれば無料でできることが判明してしまった。 AIに手伝ってもらい、公開までこぎつけることができた。 どうせならAIにデザインとかさせればいいかとも考えたが、それはまた今度。