初心者がAstro+CloudFlareでブログを作る 1
個人サイトWebオンリーめぐる市開催によせて、このブログを作るにあたってすったもんだしている記録。解説ではない…!
はじめまして、か燃(Kanenn)と申します。 「個人サイトWebオンリー めぐる市」開催おめでとうございます。
ああ個人サイト!自分の城が欲しかった。ずっとあこがれでした。 ホームページを作った経験はあるけれど、こどもの頃に初心者用ソフトで簡単につくったものであこがれの形にはなりませんでした。大人になった今ならドメイン取得もレンタルサーバー借りるのも自由だな。ドメイン取っちゃった。作るしかない。 そんなことを考えているうちにこのイベント開催を知り、勢いで「めぐる市」の末席に加えていただくことと相成りました。
そして、なんと、イベント当日にこの記事を書いています。
このブログはAstro+GitHub+CloudflarePagesで作成しています。 ドメイン料以外は無料で公開されています。
お借りしたテンプレート(Chirping Astro)の力が絶大で、コードを書き換えるだけで実作業はほぼ終わっています。 それでも初心者にはけっこうなすったもんだがあり、翻訳や調べものやどうしても直らないエラー修正のためにCloude(チャット型AI)の助けを借りています。自分で内容を理解しながら作業したかったため、CloudeCodeではなくCloudeを採用しました。なので独学で完全自作サイトに挑戦!というものでは決してないのであらかじめご了承ください。
今回作ったのはシンプルなブログサイトですが、いずれ整えてここを「ホームページ」にしたいと思っています。 ドメインのkanenn.comはその日まで取っておいてあります。
ブログ記事をまだぜんぜん書けていないので、めぐる市開催に寄せて少しでも記事を更新できたらと思っています。
趣味や出先で撮った写真をドカドカとアップし、静かに好きなことを書く場所が欲しい。 それなりに良い見た目できびきびと動くブログがいい。 独自ドメイン・広告なし・できるだけ安く・ブログサービスを使わず・WordPress以外で。
そんな条件で何かないかとネットをただよう内にAstroの名前を目にした。 フレームワーク?というものらしい。どうやらHTMLとCSSの知識があればいいらしい。 そして「タダで爆速なwebサイト」を作る人がたくさんいる! Qiitaやはてなブログで語られる「静的・爆速・無料」な個人サイト開発談を読みまくるところから、このブログ作りは始まりました。
まずはデフォルトのブログテンプレートで作る手順を参考にする。 見よう見まねでパソコンにVSCode(Visual Studio Code)をインストールし、GitHubとCloudflareにアカウントを作った。
VSCodeは背景が黒くて、呪文をコピペするだけなのにターミナルの入力は緊張した。これをCLIと言うらしい。 私の時代ではコマンドプロンプトと呼ばれていた、パソコンを壊してしまいそうな画面との再会。 こちとらメモ帳でしかhtmlファイルを開いたことがないんだぞ。白い画面でしか文字を打ったことがないんだぞ。
コピペの後、なんとかローカルサーバーを起動した。呪文の意味はまだ知らない。 美しいテンプレートのおかげで見た目だけは立派だ。英語で書かれたタイトルやブログ記事を日本語で書き換えると、とても良い感じに見える。
これだけでも満足感があるから個人サイトを作ってみたい人はまずはローカルで試して欲しい。
次は「AstroプロジェクトをGitHubのリポジトリにデプロイする」らしい。
知らない横文字の連続で手が止まった。GitHubの使い方やGitという概念も始めて知る。 さらりと当たり前のように書いてあるが、こんなホームページの作り方は知らない。 リポジトリってなんだ。デプロイするとはなんだ。アップロードするんじゃないのか。
わたしはそもそもタグ打ちをはなから諦め、ジャストシステム製のホームページ製作ソフトで個人サイトを作っていた。 「ホームページビルダー」ですらない、初心者用の「ホームページミックス」で。 後年学校の授業でホームページを作るにあたり、メモ帳htmlとは一通り触れ合うことになるがそれくらいの知識しかない。知らない単語ごとにいちいち検索やAIに聞くことになったけど、結局それが一番手っ取り早い。 しかしそのたびに浮かぶ「WordPressにしようよ」とか「はてなブログでいいじゃん」というもっともな考えとこの後1年間にわたり戦うことになる。