技術やその他雑多なことを書いていきますhttps://nekoking-ou.com/jahttps://nekoking-ou.com/posts/post2/https://nekoking-ou.com/posts/post2/Tue, 15 Apr 2025 00:00:00 GMT<p>記事2つ目（執筆中）</p> https://nekoking-ou.com/posts/article1/https://nekoking-ou.com/posts/article1/Astroで作る、爆速個人サイトSun, 16 Feb 2025 00:00:00 GMT<h1>初めてのAstro</h1> <p>Astroで、今話題のJAMSTACKブログなるものを作ったので、自身の成果物公開も兼ねてこのサイトを公開する。</p> <p>成果物：このサイト。</p> <p>:::note フロントエンドは日が浅いので、理解不足や誤りなどが多少あるかもしれません。何卒ご容赦ください。 :::</p> <h2>技術スタック</h2> <ul> <li> <p>Astro</p> </li> <li> <p>Cloudflare Pages</p> </li> </ul> <h2>手順</h2> <p>手順は至ってシンプル。 Astroの公式サイトにテンプレートが公開されており、よさげなものを選定。 今回は<a href="https://astro.build/themes/details/fuwari/">Fuwari</a>というテンプレートを採用。 ・上記ページからGithubに飛び、fuwariのリポジトリをもとに新しいリポジトリを作成。 git repo cloneなどでローカルに環境をクローンしてくる。</p> <p>astro.config.mjs config.ts</p> <p>あたりの設定を自分用にカスタマイズする。</p> <p>・記事の追加は、Markdownファイルを作成してsrc/content/posts 配下に配置するだけでOK。mdファイルはそのまま扱えるのがAstroの強みらしい。 記事を追加したら、 npm run dev で動作確認。問題なければ、 変更したファイル群をリポジトリにプッシュする。</p> <p>・サイトをインターネット上に公開するには、当然ながらサーバーが必要だ。 Astroは静的サイトジェネレーターなので、ビルドすれば普通のHTML/CSS/JavaScriptになる。公開したい場合は、ビルドして任意のサーバーに配置して公開すればよい。 ただ、最近はリポジトリに変更があるたびに自動でデプロイ・公開までをやってくれる便利なサービスが溢れている。 その一つがCloudflare Pagesだ。</p> <p>Cloudflareに登録したら、追加→Pages</p> <p><img src="../../assets/images/cloudflarepages-1.png" alt="alt text" /></p> <p>Githubと接続し、↑で作成したリポジトリをインポートする。 画面の指示通りに操作すれば、自動的にビルドが実行され、公開が完了する。</p> <p>・ここまでで公開は完了しているが、独自ドメインを利用するには、まずドメインを購入しておく必要がある。これもいくつかパターンがあるが、自分は元々お名前.comでかっていたドメインをCloudFlare Registrarに移管した。 移管後、デプロイ済みのページにカスタムドメインを設定。この辺りも画面の指示通りにぽちぽちやったら終わっていた。自動でSSL化までやってくれるのが素晴らしい。</p> <h2>まとめとTODO</h2> <p>ここまでで、とりあえず独自ドメインでブログを作成し、記事を公開することまではできた。ただ、まだ色々とやってみたいことや技術的課題が残っているので、ちまちまとやっていきたい。</p> <h3>TODO</h3> <ul> <li>URLのカード化（試したが上手くできず）</li> <li>問い合わせフォーム作成（AWS Lambdaとか使いたい）、SSR化</li> <li>Google Analytics導入</li> <li>reCaptcha導入</li> <li>広告表示</li> <li>SEO対応</li> <li>いいねボタン</li> <li>コメント欄</li> <li>SNSに投稿ボタン</li> </ul> <p>とりあえず、今回はここまで。</p>