ウェブサイトの公開

どんな選択肢があるのか

ウェブサイトの公開には、さまざまな方法があるため、複雑なテーマです。この記事では、すべての可能な方法を説明するつもりはありません。その代わりに、初心者にとって実用的な 3 つのアプローチのメリットとデメリットを説明します。そして、多くの読者がすぐに使える方法を紹介します。

ホストとドメイン名を手に入れる

コンテンツやウェブサイトの見え方をより自由に制御するために、多くのプロやビジネスは、ウェブホスティングとドメイン名の購入を選択します。

• ウェブホスティングとは、ホスティング会社のウェブサーバー上のファイルスペースを借りることです。ウェブサイトのファイルはウェブサーバー上に置きます。ウェブサーバーは、ウェブサイトのコンテンツをウェブサイトの訪問者に提供します。
• ドメイン名 は、https://www.mozilla.org や https://www.bbc.co.uk のように、ウェブサイトを見つけるための固有のウェブアドレスです。ドメイン名は、ドメインレジストラーから何年でも借りることができます。

ウェブホスティングとドメイン名の両方を同じ会社から取得している場合、両者が連携するように自動的に設定される傾向があります。しかし、別個の会社から取得している場合や、ホスティング会社を別の会社に変更したい場合は、ドメイン名を正しいサーバーを指すようにするためのちょっとした設定を行う必要があります。これは、ユーザーがそのウェブアドレスにアクセスした際に、ウェブサイトが表示されるようにするためです。通常、この設定を行うのが最適で、ドメイン登録業者のウェブサイトにログインし、ドメインのネームサーバーを、ホスティング会社が指定したものに設定します。

企業は、ウェブサーバーにファイルを転送するためにさまざまな仕組みを使用しています。多くの企業では複数の選択肢を持ち、代表的なものとしては次のようなものがあります。

• ドラッグ＆ドロップインターフェイス（これについては、後ほど GitHub 経由での公開で例をご紹介します）。
• FTP（ファイル転送プロトコル）プログラム。FTP プログラムにはさまざまな種類がありますが、一般的には、ホスティング会社から指定された情報（通常はユーザー名、パスワード、ホスト名）を使用してウェブサーバーに接続する必要があります。その後、プログラムは 2 つのウィンドウにローカルファイルとウェブサーバー上のファイルを示し、ファイルのやり取りを行う方法を提供します。
• ウェブサイトのソースコードを GitHub のリポジトリー（下記参照）に保管し、ホスティング会社にアクセス権限を付与して、ソースコードを取得し、必要に応じてビルドを行い、公開する方法。
• 一部の企業では、ファイルの転送に使用できるコマンドラインツールを提供しています。

ホスティングとドメインを見つけるためのヒント

• MDN は、特定の商用ホスティング会社やドメイン名レジストラーを推奨してはいません。ホスティング会社やレジストラーを見つけるには、「ウェブホスティング」や「ドメイン名」で検索してください。どのレジストラーにも、希望するドメイン名が利用可能かどうかを確認する機能があります。
• 自宅やオフィスのインターネットサービスプロバイダーが、小規模なウェブサイトのための限定的なホスティングを提供している場合もあります。利用できる機能は限られていますが、初めての試みには最適かもしれません。
• Neocities、Google Sites、WordPress のような無料のサービスもあります。こうしたサービスの範囲は限定的である場合もありますが、初期の実験を行うには十分です。

オンラインツールの利用

ウェブサイトをオンラインで公開できるツールもあります。

• GitHub は、「ソーシャルコーディング」サイトです。コードリポジトリーをアップロードして Git バージョン管理システムに保存することができます。このシステムは既定でオープンソースになっており、世界中の誰もが GitHub のコードを見つけ、それを使い、そこから学び、改良することができます。また、 GitHub には GitHub Pages という便利な機能があり、ウェブサイトのコードをウェブ上で公開することができます。
• Netlify は、GitHub リポジトリーから直接静的ウェブサイトをホスティングできるウェブホスティングプラットフォームです。同時に、デプロイプレビュー、サーバーレス機能、フォーム処理など、数多くの追加機能も提供しています。
• Fly.io は、アプリケーションやデータベースをユーザーの近くに展開することができるプラットフォームです。バックエンドサービスが要求されるウェブアプリケーションを保有している場合に、特に適しています。

これらのオプションは、一般的に無料で利用できますが、機能には制限があります。

CodePen のようなウェブベースの IDE の利用

ウェブアプリの開発環境をエミュレートするウェブアプリは数多くあり、HTML、CSS、JavaScriptを書き込むことができる上に、それらがレンダリングされて出力ペインに表示されます。一般的に、これらのツールは簡単で、学習にも適しており、コードを共有するのにも適しています（例えば、別のオフィスにいる同僚とテクニックを共有したり、デバッグの助けを求めたりする場合など）。また、（基本的な機能については）無料です。レンダリングされたページを、固有のウェブアドレスでホスティングしてくれます。ただし、機能は限られており、通常は資産（画像など）のホスティングスペースは提供されていません。

これらを試してみて、一番合ったものを見つけてみましょう。

• Scrimba ^{MDN 学習パートナー}
• JSFiddle
• JSBin
• CodePen

GitHub 経由での公開

では、GitHub Pages 経由でサイトを公開する方法を試してみましょう。

1. まず、 GitHub にサインアップして、メールアドレスの認証を受けましょう。

2. 次に ファイルを入れるためのリポジトリーを作成しましょう。このページで次のようにします。

   1. このページ上の、 Repository name ボックスに ユーザー名.github.io と入力してください。 ユーザー名 はあなたのユーザー名です。例えば、Bob Smith であれば bobsmith.github.io と入力します。
   2. ページの最下部にある Create repository ボタンをクリックしてください。

3. 次のページで、uploading an existing file というリンクを探してクリックしてください。これでファイルのアップロードページが表示されます。

4. この時点で、ローカルファイルシステムからウェブページ上にファイルをドラッグ＆ドロップして、GitHub リポジトリーにアップロードするのが最適です。その手順は次のとおりです。

   1. お使いのコンピューターで、ファイルエクスプローラーまたは Finder のウィンドウを開いてください。
   2. ファイルエクスプローラーとウェブブラウザーのウィンドウの両方が見えるようにしてください。画面上でそれらを隣り合わせに配置してください。
   3. ファイルエクスプローラーのウィンドウで、サンプルウェブサイトが含まれているフォルダーまで移動してください。

      メモ: フォルダーの中に index.html ファイルがあるかを確認しましょう。

   4. サンプルウェブサイトのファイルをすべて選択します（例えば、キーボードショートカットの Ctrl + A を使用するか、macOS では Cmd + A を使用します）。
   5. ファイルエクスプローラーからファイルをドラッグし、GitHub ページの "Drag files here to add them to your repository" というセクションにドロップしてください。
   6. このセクションの境界線とテキストが変化し、ファイルをドロップできる状態であることを示します。この場所でファイルをドロップしてください。
   7. ページ下部の Commit changes ボタンをクリックしてください。

5. ウェブサイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザー名が chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

   メモ: ウェブサイトが公開されるまで、数分かかることがあります。すぐに表示されない場合は、数分待ってから再度試してください。

もっと詳しく知りたい人は GitHub Pages Help を見てください。

参考文献

• ウェブサーバーとは何か
• ドメイン名を理解する
• ウェブサイトで何かするのにいくらかかるか?
• Deploy a Website: Codecademy の良いチュートリアルで、もう少し詳しく追加のテクニック含めて示しています。

• 前のページ
• Overview: 初めてのウェブサイト
• 次のページ