こんにちは。まぁじです。
前回はGandi.netを使って独自ドメイン『hals.one』を取得しました。⇒Gandi.netで独自ドメイン『hals.one』を取得した - はるすえすしーのぶろぐ
ドメイン名を取得しただけでは自由にサイト運営とかはできません。おそらく取得したドメインにアクセスすると [your domain].oooは既にGandi.netによって登録されています。 みたいなページに飛ぶかと思います。スクショは撮り忘れました。
とりあえず無料で、形のあるサイトを簡単に使いたいなら、GitHubのリポジトリを作成するだけで簡単に静的サイトのホスティングできるGitHub Pagesを使うのがいいと思います。今回はGitHub Pagesを使って独自ドメイン(今回は hals.one )に静的サイトをホスティングさせてみます。
GitHub Pagesとは
GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.
訳: GitHub Pages は、GitHub上のリポジトリからHTML、CSS、JavaScript のファイルを直接取得し、オプションでビルドプロセスを実行し、ウェブサイトを公開する静的サイトホスティングサービスです。You can host your site on GitHub's github.io domain or your own custom domain. For more information, see "Using a custom domain with GitHub Pages."
訳: GitHubのgithub.ioドメインや独自のカスタムドメインでサイトをホストすることができます。詳しくは、"Using a custom domain with GitHub Pages" をご覧ください。
というわけで、HTML・JS・CSSからなる静的サイトをホスティングしてくれるサービスで、デフォルトはgithub.ioドメインで公開されるってことらしいです。
じゃあ作成していきましょう。
GitHubリポジトリの作成
GitHubのアカウントを作成／ログインします。以下GUIで操作しますが、CUIで操作できた方がいいと思います。"git Windows"とか"git VSCode"とかで検索してみてください。
Newボタンを押して新しいリポジトリを作成します。リポジトリ名はあなたのドメイン名とかmy-siteなどわかりやすいものがいいです。
リポジトリはPublicにしないといけなかった気がするので、Publicにします。他にこだわりがなければそのまま「Create repository」ボタンを押します。
すると空っぽのリポジトリが生成されるので、https://github.com/[your account]/[repository name]/new/mainにアクセスしてGUIから、もしくはコマンドラインからindex.htmlを作成してcommit, pushします。
GUIから
ファイル名にindex.htmlを指定し、HTMLをちょろっと書きます。
書けたらコミットしてやります。詳細は空欄でいいですがコミット名は一応埋めておきます。するとリポジトリにindex.htmlが追加されます。
コマンドラインから
公式を参考にするとこんな感じです。
echo "<h1>Welcome to my website!</h1>" >> index.html git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/[your account]/[repository name].git git push -u origin main
GitHub Pagesを有効化
最低限のHTMLが用意出来たら、リポジトリのSettings＞Pagesに移動します。
Pagesのソース(どのブランチ・ディレクトリを発行するか)を選べます。今回はブランチはmain、ディレクトリはrootを指定します。
Saveボタンで保存し発行に取り掛かってくれます。
10秒もしないうちにサイトが[your account].github.ioもしくは[your account].github.io/[repository name]に発行されると思います。
カスタムドメイン設定
github.ioにサイト生成されていることを確認したら、Cusstom Domainの入力欄にあなたの独自ドメインを入力します。ただし必ずwwwを付けてください。僕が調べた限りではwwwがないとちゃんとカスタムドメイン設定できないです。
保存したらGandi.netの方のDNSレコードサイトに移動します。
テキストモードにしてDNSレコードをいくつか編集します。念のためバックアップを取得しておくといいです。 How to set up DNS records on gandi.net to use a custom domain on Github Pages · GitHubを参考にDNSレコードを編集します。
| DNSレコード | 追加・削除 |
|---|---|
| @ 1800 IN A 185.199.108.153 | 追加 |
| @ 1800 IN A 185.199.109.153 | 追加 |
| @ 1800 IN A 185.199.110.153 | 追加 |
| @ 1800 IN A 185.199.111.153 | 追加 |
| @ 10800 IN A 217.70.184.38 | 削除 |
| www 10800 IN CNAME [your account].github.io. | 追加 |
| www 1800 IN CNAME webredir.vip.gandi.net. | 削除 |
ゾーンファイルを保存したらDNSレコードが保存されるかと思います。
少し時間はかかりますが、http://www.[your domain].ooo か https://www.[your domain].oooにアクセスするとindex.htmlの内容が表示されてるかと思います。多分。
今後はGitHubのリポジトリにコミットするとあなたのサイトが更新されます。
ちなみにPagesの設定でHTTPSを有効化することもできます。ただし1日くらいかかるみたいです。
おわりに
独自ドメインに静的サイトを生成するやり方を書きました。GitHub Pagesは静的サイトのみですしリポジトリ内容が他人から見えてしまうので、アクティヴでクリエイティヴなサイトが作りたいのであればReactとかNuxtとか考えなきゃいけないんですかね？（今のところはp5.jsを導入して背景を動かしてるだけ）
面白いサイトを作るセンスをください、さようなら
