このサイトの概要

このサイトは、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.GitHubのソースコードを直接配信

2.ViteでTypeScriptで開発したものを配信

3.SvelteKitを用いて開発したものを配信

1.GitHubのソースコードを直接配信では、難しいことは一切せずにHTMLとCSSとJavaScriptで書いたページをとりあえず配信できればいいというときにおすすめです。が、解説することは少ないので1ページで終わると思います。

2.ViteでTypeScriptで開発したものを配信では、少しレベルアップして便利に開発したいときにおすすめです。TypeScriptとは書いていますが、JavaScriptでも同じ事ができます。

3.SvelteKitを用いて開発したものを配信では、最近勢いのあるフレームワークSvelteKitを使い、便利に開発していきます。新しく覚えることも多いですが、実務に一番近いですし便利な機能も多いので、チャレンジしてみて損はありません。このサイト自体もこの方法で作られています。