解説2023/12/09

サイトの作り方①ホスティングサービスを使って公開してみる

Noratetsu Houseの作り方

　Noratetsu Houseの作り方（概要）の続きです。
　今回はホスティングサービスを実際に使ってみるところまで。

（問い合わせフォームにいただいたコメントは拝読しております。ありがとうございます！）

　手順としては三つの工程があります。

  1. HTMLを用意する
  2. GitHubのリポジトリを用意する
  3. ホスティングサービスにGitHubを紐づける

　手順さえ分かればあとはそれぞれキーワードで検索すればよろしいかと思いますが、多少ショートカットできるようにわかりやすそうなページを貼っていくことにします。親切な先人が労力を割いて解説してくれているわけなので、新たに書くよりそちらにアクセスしてもらった方がみんなハッピーでしょう。

HTMLを用意する

　HTMLとは、というところからスタートすると果てしなく話が広がってしまうので、詳しい書き方をここで解説することはしません。参考になるサイトのリンクを貼っておきます。

　私もHTMLに詳しいわけではないので、これらのサイトの内容を読むとあちこちで「へえー」と思ったりします。必要な分だけその都度知っていけば良いでしょう。
　さて、今回必要なのはホスティングサービスが利用できることを確認するためのファイルなので、超簡単なHTMLをサンプルとして置いておきます。表示したいファイルが既にあるならそちらをお使いください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport' />
    <title>Sample</title>
    <link rel="stylesheet" href="https://unpkg.com/sanitize.css"/>
    <style>
        body {
            padding: 20px 50px;
        }

        .hello {
            color: #444;
            font-size: 24px;
        }
    </style>
</head>

<body spellcheck="false">
    <p class="hello">Hello World!</p>
</body>

</html>

GitHubのリポジトリを用意する

　私が使っているホスティングサービスは、GitHubに作ったリポジトリ内のファイルを用いてサイトを構築します。なので、GitHubのアカウントを取得し、リポジトリを用意する必要があります。
　まずアカウント取得について。

　リポジトリの作成について。公式ドキュメントが十分親切なのでこれだけ貼っておきます。

　リポジトリ名は適当なもので大丈夫です。また、今回使うホスティングサービスではリポジトリがPrivateでも問題ないので、とりあえず公開設定はPrivateにしておくとよいでしょう。
100%
（左端の真ん中あたりに余計なボタンが写っていますが気にしないでください。）
　なお、ここではGitについては省略します。Gitが分かる方はGitHubとの連携方法はすんなりわかるでしょうし、ホスティングサービスの利用にGitは直接は関係ないので（今必要なのはGitHubのリポジトリにファイルがあることだけなので）、ひとまず置いておくことにします。今回はGitHub上で直接ファイルを追加します。

　リポジトリを用意できたら、「index.html」を作成します。
　今作ったリポジトリはこうなっています。
100%
　緑の「Code」ボタン左の「Add File」から「Create new file」を選択します。既にローカルにファイルがあるなら「Upload files」でもいいです。
50%
　「Create new file」を選んだ場合はエディタが表示されるので、ファイル名を「index.html」とし、用意したHTMLをペーストしましょう。
100%
　右上の緑の「Commit changes...」をクリックします。するとコミット（バージョン管理のための履歴を新たに作ること）の画面になります。以後もファイルを更新する度にコミットメッセージを記述することになります。後々更新作業をした時はその内容をここにわかりやすく書いておくのが望ましいです。descriptionは必要なければ省略できます。記述したら右下の「Commit changes」をクリック。
100%

　GitHubについてはこれで最低限の用意ができました。
　ちなみに、GitHubは「GitHub Pages」という静的サイトホスティングサービスを提供しています。

　あんまりあっちこっちにアカウントを作りたくないという人はこちらを試してみてもよいでしょう。ずっと使う本拠地としては頼りないですが、気軽にページを作れるので「ちょっと公開してみたい」という場合には十分かもしれません。

ホスティングサービスにGitHubを紐づける

　静的サイトのホスティングサービスとしてメジャーなのは、「Cloudflare Pages」「Netlify」「Vercel」の三つかなと思います。私はNetlifyは試したことがあり、Noratetsu HouseではCloudflare Pagesを使っています。Vercelは使ったことがありません。

　Cloudflare Pagesの長所短所はこちらの記事が詳しく解説してくれています。

　ホスティングサービスの比較記事や違いが見える記事はこちら。

　ただし情報は最新のものとは言えません。正確な情報は適宜お調べになってください。

　ここではCloudflare Pagesの導入について紹介します。

　こちらの記事はわかりやすく参考になりますが、今回はHugoは使わないので、その部分だけ飛ばして読んでください。
　先程作ったリポジトリで実際にサイトを作ってみましょう。GitHubのリポジトリを選択すると、このような画面に遷移すると思います。
100%
　プロジェクト名はサイトのURLになるので気をつけて設定してください。後から変更はできないと思います。（自分が契約しているドメインと紐付けることならカスタムドメイン設定にてできます。）
　上記の記事内では「フレームワーク プリセット」にHugoを指定していましたが、今回は何も使わないので「なし」のままでいいです。そのまま右下の「保存してデプロイする」をクリックしてください。ファイルの中身に問題がなければ数秒でデプロイ（＝ユーザーが実際に使えるようにすること）は完了します。

　今回できたサイトはこちらです。

　以後はGitHubのファイルを更新する度に自動でサイトの内容も更新されます。ファイルが有効でないなど何らかの理由でデプロイが上手くいかなかった場合は、公開データは前バージョンのまま維持されます。
　色々と機能などはありますが、最低限のところはこんな感じになります。お疲れ様でした。