Web サイトの公開

サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。

どんな選択肢があるのか?

Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。

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

もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。

  • ホスト — つまり、ホスティング会社の Web サーバー上のファイルを置く場所のこと。あなたが、 Web サイトをその場所に置けば、 Web サーバーが、ユーザーのリクエストに応えて、コンテンツを扱ってくれます。
  • ドメイン名 — ほかの人があなたの Web サイトを見つけるための、他と同じもののないアドレスのことです。たとえば、http://www.mozilla.orghttp://www.bbc.co.uk などがそれにあたります。あなたはドメインレジストラー (ドメイン名を扱う管理者) から、何年の間ドメイン名を借りることになります。

多くのプロの手による Web サイトはこんな風にして、公開されているわけです。

加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、File Transfer Protocol (FTP) プログラムが必要です (詳しくは、どれくらいお金がかかるか: ソフトウェアのページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。

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

  • MDN は特定の商用ホスティング会社やドメイン名レジストラを宣伝していません。ホスティング会社やレジストラを探すには、「 Web ホスティング」と「ドメイン名」で検索してください。すべてのレジストラは、希望するドメイン名が利用可能かどうかを確認できる機能を持っています
  • あなたの家やオフィスの インターネットサービスプロバイダー では、小さな Web サイトのための限定的なホスティングを提供しているかもしれません。利用できる機能は限られていますが、最初の実験には最適かもしれません
  • Neocities、Google Sites、BloggerWordPress のような無料のサービスもあります。お金を払った分だけ得をすることもありますが、初期の実験にはこれらのリソースで十分な場合もあります
  • ホスティングやドメインを提供している会社も多いです

GitHub や Google App Engine のようなオンラインツールを利用する

特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。

  • GitHub は、「ソーシャルコーディング」サイトです。そこでは、あなたは Git バージョン管理システムの中のストレージで、コードリポジトリをアップロードできます。そうすることで、あなたはコードプロジェクトに協力することができて、このシステムは既定でオープンソースです。つまりは、世界のだれでも、あなたのコードを利用したり、そこから学んだり、改善したりすることができるのです。GitHub には GitHub Pages と呼ばれる、とても便利な機能があります。それはあなたに Web 上に、 Web サイトのコードを公開するのを助けてくれます。
  • Google App Engine は、アプリケーションを Google のインフラ上で、ビルドや実行させることができる強力なプラットフォームです。マルチレイヤ― Web アプリケーションをゼロから作ったり、静的な Web サイトをホストしたり、いずれの場合でもそうです。 Web サイトを Google App Engine でホストするには? を見てみましょう。

これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。

CodePen のような、 Web ベースの IDE を用いる方法。

Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。

生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。

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

GitHub 経由での公開

では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。

  1. まず、 GitHub にサインアップして、あなたのメールアドレスを確認しましょう。
  2. 次に ファイルを入れるためのリポジトリを作りましょう。
  3. このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。
    例えば、私たちの友人である bob smith ならば、
    bobsmith.github.io と入力することになります。
    さらに、README つきでこのリポジトリを初期化 (Initialize this repository with a README)をチェックして、リポジトリの作成 (Create repository)をクリックします。
  4. Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。

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

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

    : あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。

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

参考文献

このモジュール