【初心者さん向け】制作したホームページを公開するにはどうすればいい？
こんにちは。フリーランスのMarieです。
Webデザインスクールでは、ホームページの制作を一通り学びます。
でもその後、実際にサイトを使うには、サーバーにUPしないといけません。
「サーバーにUPするところは習わなくて分からない…」という方が多いんじゃないでしょうか。
実際に、わたしの教室に来てくださる方にもたくさんいらっしゃいます。
今回は、サーバーにホームページをUPするまでの手順を簡単に解説したいと思います。
[目次]
ホームページを公開するには
Webデザインスクールや、独学でコーディングをされた方は、「htmlファイル」については分かりますよね。
じゃあ、この作成したhtmlファイルを実際にホームページとして見られる状態にするには、どうしたら良いでしょうか。
そうです！サーバーにアップロードします。
そして、サーバーにアップロードする時には、「ドメイン」も必要です。
サーバーとドメインについて
ここからサーバーとドメインについて具体的に見ていきたいと思います。
サーバーとは
サーバーとは、クライアントがサーバーに「リクエスト」 したものに対して、必要な情報を送り返す「レスポンス」を行う仕組みのことを言います。
イメージはこんな感じです。
クライアント（私たち）「この情報ちょうだいー」（リクエスト）
サーバー「OK〜！」（レスポンス）
とこんな感じです。
ホームページを見たい時に、URLをブラウザに打ち込みます。
「このURLのファイルを見せてね」（リクエスト）
そうすると、サーバーは、あらかじめ用意されていたファイルを提供してくれるんですね。
その結果、わたしたちはホームページを見ることが可能になります。
ここで忘れてはいけないのが「ドメイン」です。
ドメインとは
先ほど、URLをブラウザに打ち込むと書きましたが、このURLを形成しているのが、「ドメイン」です。
例えば、このブログのURLは以下です。
https://chiiweb.net/
このURLの、https://より後の部分、「chiiweb.net」がドメインです。
そして、このドメインの部分、オリジナルワードで取得したものを「独自ドメイン」と呼びます。
独自ドメイン、一度は聞いたことがあるんじゃないでしょうか♫
独自ドメインを取得しておくと、「自分の所有物」になるので、サーバーを変えたとしてもそのまま使うことができます。
サーバーは、ドメインの家。引っ越すこともできるんです。
自分のサイトやブログを始める時に、「独自ドメイン」を取得した方が良いよーと言われるのは、この為です。
自分でとっておくと、残すことができるので、自分の財産になると言われています。
そして、独自ドメインを持っていると、オリジナルのメールアドレスも作成できます。
例えばGmailだと、xxx@gmail.com のようなメールアドレスになりますが、独自ドメインだと、「好きなアルファベット@独自ドメイン」というメールアドレスを作ることができるんですね♫
フリーランスの場合は、メールアドレスが独自ドメインだというだけで、ちゃんとしてる感が出て、信頼性もUPすると思います。
Web制作をお仕事にしていく方には、独自ドメインの取得と、レンタルサーバーの契約をオススメします！
自分でレンタルサーバーを契約し、ドメインを取得すると、制作途中のファイルを仮でアップロードして見え方を確認したり、お客さまに確認してもらったりできるので、とても便利です。
オススメのレンタルサーバー
オススメのレンタルサーバーは、エックスサーバーです。
今まで、色々レンタルサーバーを使ってきましたが、エックスサーバーが一番使いやすいです。
特に気に入っているところは、WordPressサイトを超簡単に移行できるサービスです。
昔は、データベースをバックアップして、URL書き換えて、インポートしたりしていたんですよね。
その作業をする必要がなくなって、本当に便利になったと思います。
例えば、「仮サーバーで制作していたクライアントさんのWordPressサイトが完成したので、本番サーバーに移行したい」という時も、超超簡単に移行することができるんです。
初めての時は感動しました。
その他、分からないことを質問しても、すぐに返信していただけるのでサポートも安心です。
もし、金額的に問題ないようなら絶対にエックスサーバーがオススメです。（月1000円弱くらいから契約できます。）
Xserverはドメインも取得できるので、一括で管理できて便利です。
（金額重視の場合は、ロリポップ！がめちゃ安です。一番最初はわたしもロリポップを使っていました♡）
サーバーにファイルをアップロードする方法
では、「サーバー」と「ドメイン」について、なんとなくイメージがついて来たかな？というところで、サーバーにファイルをアップロードし、ホームページを公開する手順を見ていきたいと思います。
サーバーにファイルをアップロードする場合、サーバーのコントロールパネルを使う方法もありますが、制作者の場合は、「FTPソフト」を使ってアップロードする方法が出来なくては効率が悪いです。
FTPソフトって？
FTPとは
FTPとは、File Transfer Protocolと言って、「サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル」のことなんですけど、難しいことは覚えなくてもOKです。
先ほどサーバーのとこで書きましたが、ここでいうクライアントとは、わたしたちユーザーですね。
ややこしい言い方で混乱しそうですよね。w
簡単に言うと、サーバーにファイルをアップロードする通信の仕組みがFTPですね。
なので、サーバーにファイルをアップロードする時に使うソフトがFTPソフトです。
そのままやん！
と言うことで、簡単です。
FTPソフトについて
AdobeのDreamweaver
コーディングにAdobeのDreamweaverを利用している人は、FTPの接続もDreamweaverのみで完結します。
まさに、Dreamweaver1つだけで、コーディングとサーバー管理もできるので、めちゃ楽です。
わたしも愛用しています。
FileZilla
他のFTPソフトだと、FileZillaがオススメです。
周りのクリエイターさんは、FileZillaを使っている方がとても多いです。
わたしのレッスン生さんにも、Dreamweaverじゃない方にはFileZillaでサーバーに上げる方法をお伝えしております。
サーバーの接続に必要な情報
FTPソフトで接続する際に、必要になるのは、以下の3つです。
- FTPアドレス（ホスト）
- ユーザー名
- パスワード
この3つの情報は、エックスサーバーでも、さくらサーバーでもロリポップでもConohaWingでも、必ずあります。
サーバーによって、確認方法が異なりますので、今回の記事では端折りますが、サーバー契約時に届くメールに記載されていることが多いと思います。
FTPソフトの使い方については、また別の記事で紹介させていただきます。
FTPソフト、ユーザー名、パスワードの3点でFTP接続ができたら、表示させたいディレクトリに、ファイルをアップロードすれば完了です。
htmlファイルの中に、html・imgフォルダ・cssフォルダ・jsフォルダ、など、色々なフォルダがあると思いますが、必要なファイルは全てアップロードしてください。
ディレクトリについて
ディレクトリとは、ドメイン内の場所を表します。
例えば、このブログの場合は、https://chiiweb.net/mediaというURLです。
chiiweb.netというドメインの中の、「media」というフォルダ内に存在しています。
このように、フォルダを作成し、そこにファイルをアップロードすると、「ドメイン+フォルダ名」がURLになります。
例えば確認の為に仮でアップロードする時などは、サーバーに、「test」というフォルダを作成し、そのフォルダの中にデータをアップロードすると、「ドメイン/test」がURLになります。
フォルダの中にあるindexがトップに出てきます
コーディング時に、index.htmlというファイルを作っていると思います。
index.htmlというファイルが、その階層のトップに出てきます。
例えば、以下のようなファイルがあったとします。
- index.html
- about.html
このファイルをchiiweb.net/testというディレクトリにアップロードした場合は、
https://chiiweb.net/test というURLで、index.htmlが表示されます。
実際には、https://chiiweb.net/test/index.html という場所にファイルがあるのですが、https://chiiweb.net/test/で出てくる仕組みになっています。
about.htmlを確認する場合は、「https://chiiweb.net/test/about.html」と入力する必要があります。
実際に、FTPソフトを使用してファイルをアップロードする方法は、また別の記事で細かく紹介させていただきます^^
いいなと思ったら
TAPしてね♡↓
コメントは承認後に表示されます。