このサイトの概要

このサイトは、Webページをデザインし、それを公開する方法を見ていきます。ut.code(); LearnではRenderにデプロイする方法が紹介されていましたが、ここではGitHub Pagesで公開する方法と、Cloudflare Pagesで公開する方法を見ていくんじゃないかと思います。ut.code(); Learnで学んだことを活かして、ホームページ作成にチャレンジしてみましょう！

GitHub Pagesとは

GitHub Pagesは、静的なWebサイトを無料でホスティングしてくれるサービスです。つまり、サーバー側の処理以外なら、Webページをタダで公開することができます。GitHubの個人アカウントか組織アカウントがあれば誰でもページを作成、公開できます。

注意点としては、ビルドは1時間に10回までなこと、サイトは1GB以内でないといけないこと、月100GBまでの帯域幅制限と月100000リクエストまでの制限があること、商用利用(広告も含む)が認められていないことなどがあります。写真などを使うときは解像度を控えめにして容量を抑え、またお金儲けはしないようにしましょう。

Cloudflare Pagesとは

同じく無料で静的なWebサイトをホスティングしてくれますが、こちらは帯域幅にもリクエストの数にも制限はありません。どれだけ沢山の人に見られても大丈夫です。すごいですね。注意点としては、ビルドの回数が月500回までなことです。一人で普通に開発する分には問題ないですが、大人数でGitHubにプッシュしまくってたら割とすぐに使い切っちゃうと思うので、何らかの対策が必要です。

本編

以下の3つの方法を紹介します。下に行けば行くほど内容は高度になりますが、順番はないので好きなものを選んでください。

1.ViteでTypeScriptで開発(準備中)

2.Astroで開発(準備中)

3.SvelteKitを用いて開発

1.ViteでTypeScriptで開発では、Viteというものを使って便利に開発していきます。TypeScriptとは書いていますが、JavaScriptでも同じ事ができます。

2.Astroで開発では、Astroというフレームワークを使って、便利に開発していきます。これはWebアプリというよりはWebサイトを作るのに非常に適しているフレームワークとなっており、手軽で便利だと思います。

3.SvelteKitを用いて開発では、最近勢いのあるフレームワークSvelteKitを使い、便利に開発していきます。Webアプリを作りたいときにもってこいの、人気のフレームワークです。このサイト自体もこの方法で作られています。(SvelteKitのいいところはあまり活かせていませんが……)

また、おまけとして、生のHTMLとCSSとJavaScriptだけで作ったページをCloudflare Pagesで公開する方法も紹介しておきます。