ウェブサイトをなるたけ安く公開したい

  • 技術
  • 目次
    1. 前提
    2. どうするか
    3. Github Pages
    4. Gitlab Pages
    5. Firebase Hosting
    6. Render
    7. Netlify
    8. Vercel
    9. Cloudflare Pages
    10. 使い方
      1. Github Pages
      2. Gitlab Pages
      3. Firebase Hosting
      4. Render
      5. Netlify
      6. Vercel
      7. Cloudflare Pages
    11. 比較
    12. 終わりに
    13. 余談
    14. 参考

    前提

    • HTML+CSS(+JS)がある(またはそれらをビルドできる)
    • PHPなど動的ファイルを使っていない
    • メールアドレスを作らない
    • データベースを作らない
    • お金はない

    どうするか

    静的サイトをホスティングできるサービスを使用します。xfreeやXREAなどの無料レンタルサーバーを使っても良いですが、これらは制約事項が多く、あまりお勧めしません。

    これ以降の解説では、Github(またはGitlab)にプッシュする作業が必要になることがあります。
    リポジトリの作成やファイルのプッシュ方法などは解説しません。

    Github Pages

    https://pages.github.com/

    Githubが提供しているホスティングサービスです。

    Githubリポジトリのファイルをそのままウェブサイトとして公開することができます。

    Gitlab Pages

    https://about.gitlab.com/stages-devops-lifecycle/pages/

    Gitlabが提供しているホスティングサービスです。

    Github Pagesと同様、Gitlabリポジトリのファイルをウェブサイトとして公開できます。

    Firebase Hosting

    https://firebase.google.com/docs/hosting

    Googleが提供しているFirebaseというサービスの一部です。

    自動ビルドはできないので、Github Actionsなどであらかじめビルドしておく必要があります。

    Render

    https://render.com/docs/static-sites

    ある場所では次世代Herokuと呼ばれているRenderというサービス。

    Netlify

    https://www.netlify.com/

    比較的簡単にデプロイすることのできるサービスです。

    残念ながら日本リージョンがないため、日本からの接続は遅くなりがちです。

    Vercel

    https://vercel.com/

    Next.jsを開発しているVercelが運営しているサービスです。

    Cloudflare Pages

    https://pages.cloudflare.com/

    CDNやDDoS対策で有名なCloudflareが提供しているサービスです。

    使い方

    Github Pages

    まずはリポジトリのSettingsからPagesを開きます。

    デプロイするブランチとフォルダを選択してSave。

    するとウェブサイトのリンクが表示されます。簡単ですね。

    Gitlab Pages

    作成したリポジトリからファイルを追加ボタンを押す。

    Select a template typeから.gitlab-ci.yml を選択し、Apply a templateのPagesセクションからデプロイする物の種類(HTMLファイルであればHTML)を選択。

    問題なくコミットできるとこのようにリンクが表示されます。

    Firebase Hosting

    Node.jsをインストールしており、firebaseプロジェクトを作成した前提で話を進めていきます。

    まずはfirebase-toolsをインストールします。

    $ npm install -g firebase-tools

    次にログイン。

    $ firebase login

    使用するディレクトリに移動し、firebaseプロジェクトを初期化。

    $ firebase init hosting

    Are you ready to proceed? には Yes
    Select a default Firebase project for this directory: は使用するプロジェクトを選択
    What do you want to use as your public directory? は公開するディレクトリを選択
    Configure as a single-page app はすべてのリンクをindex.htmlに移動させるか

    これが終わったら、次はデプロイします。

    $ firebase deploy

    デプロイが終わると、Hosting URLにデプロイ先URLが書いてあるのでそちらからアクセスできます。

    (firebaseapp.comはweb.appでもアクセスできます)

    Render

    New Static Siteを選択。

    まず公開リポジトリのURLまたはGitHub/GitLabのアカウントを接続し、リポジトリを選択します。

    Nameに適当な名前を付け、デプロイするブランチやフォルダ、ビルドコマンドなどを指定します。

    Create Static Siteを押して…

    In ProgressがLiveになれば完了です。

    Netlify

    まずは下のSitesからImport an existing projectを選択(またはdeploy manuallyにフォルダをドラッグアンドドロップ)します。

    Renderと同じようにブランチやフォルダなどを選択する画面があるので、必要に応じて変更します。

    リンクが緑色になったら完了です。

    Vercel

    連携したいGitプロバイダを選択し、使用するリポジトリを選択。

    Deployを押下。

    完了するとSTATEがReadyになり、リンクが表示されます。

    Cloudflare Pages

    ダッシュボードの下側にあるページを選択。

    プロジェクトを作成。

    使用するリポジトリを選択してセットアップの開始。

    ブランチやプロジェクト名などを確認し、保存してデプロイを押下。

    成功するとリンクが表示されます。

    比較

    ビルド数最大ビルド時間(/月)帯域幅最大容量チーム(1人ごと)SSR
    Github Pages10/時間100GB1GB無料×
    Gitlab Pagesなし400分無制限10GB無料×
    Firebase Hosting360MB/日10GB無料×
    Render100GB無料
    Netlify3/分300分100GB100GB$15/月
    Vercel32/時間6000分100GB1万2500ファイル$20/月
    Cloudflare Pages500/月無制限2万ファイル無料〇(Cloudflare Workers)

    終わりに

    どのサービスにも良し悪しがあるので、使用する用途に合わせて選択していくことをお勧めします。

    余談

    よくPHPでお問い合わせフォームを作る人を見かけますが、PHPを使わずにお問い合わせフォームを作ることもできます。

    https://formspree.io/

    https://getform.io/

    詳しいことは解説しませんので、自分で調べてみてください。

    参考

    https://zenn.dev/catnose99/scraps/6780379210136f

    https://jace.pro/post/2020-12-17-cloudflare-pages-netlify-zeit-github-pages-and-gitlab-pages-where-to-host/

    アバター

    著者:wamo

    記事一覧

    ウェブ開発とか翻訳とかやってる人。

    コメントを書く

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    日本語が含まれない投稿は無視されますのでご注意ください。