FTPでデータを公開する

ホームページ作成7日目:FTPでデータを公開する

作ったデータをFTPを使ってアップロードする方法

これまでのレッスンでホームぺージデータ(index.html)を作ってきましたが、このデータをパソコンのデスクトップに置いたままにしていてもホームページは表示されません。ホームページして表示させるには「index.html」のデータをレンタルサーバーの中に移動させる必要があります。

データを「自宅のパソコン」→「レンタルサーバー」に移転させる作業。つまりアップロードの作業が必要になってきます

このアップロードを行う方法は主に2つあります。(1)レンタルサーバーのFTP機能を使う。または(2)「FFFTP」など専用のフリーソフトを使う方法の2つになります。

FTPを使ったアップロード作業は「FFFTP」などのフリーソフトのほうが機能がよく便利ですが、このようなフリーソフトを使うには設定などもしなくてはいけません。そのためこのページでは設定などしなくとも簡単に使うことが出来る「エックスサーバー」のFTP機能を使ってアップロードの説明をしたいと思います。

「エックスサーバー」のFTP機能を使ってページをアップロードする

(1)エックスサーバーにログインをして「ファイル管理」を選択

まずエックスサーバーにログインをした画面に出てくる「ファイル管理」を選択します。ここでFTPの操作ができるようになります。

(2)「自分のドメイン」を選択

「ファイル管理」を選択すると、エックスサーバーで登録しているドメイン名が全部表示されます。 マルチドメイン機能を使って10個のドメインを登録している場合は、ここに10つのURLが表示されることになります。

自分が作業したいサイトのURLを選択しましょう。今回の作業ではこのホームページのURLである「domain-server-study.com」 を選択します。

(3)「public_html」を選択

作業するホームページ(ここでは「「domain-server-study.com」)を選択すると、さらに画面がでてきます。いろいろ表示されるのでどれを選択すればいいのかわからないと思いますが、「public_html」を選んでください。

レンタルサーバーのFTP機能を使うにしても、フリーソフトを使うにしても、FTPの作業をする際はこの「public_html」が基本のページになります。 このフォルダ中に「index.html」を置くことで、ホームページのメインページが表示されることになります。

(4)「public_html」の中に「index.html」をアップロードする

「public_html」の中を見るとなにもファイルが置かれていませんので、ここに「index.html」のファイルをアップロードしたいと思います。

画面にある「ファイルの選択」を選んでください。

自分のパソコンに置いてある「index.html」ファイルを選択する

ファイルを選択できるようになりますので、自分のパソコンに置いてある「index.html」を選択します。 「開く」を選んでください。

「アップロード」のボタンを選択

自分のパソコンにある「index.html」ファイルを選択した状態になりました。「ファイルを選択」の横に「index.html」が表示されているのがわかります。

まだこの時点ではアップロードが完了していません。赤丸で囲ってある「アップロード」を選択してはじめてアップロード完了となります。

(5)ファイル名が表示されたら「index.html」のアップロードが完了になります。

赤い四角で囲ってある場所に「index.html」のファイルが表示されるようになりました。これでファイルがアップロードされたことになります。この時点でホームページを見てみると画面が表示されているはずです。

今回は「inde.html」のファイルだけをアップロードしましたが、作ったファイルやフォルダは全部アップロードすることになります。 削除などもできます。

「FFFTP」などのフリーソフトを使ってアップロードする

各レンタルサーバーでは、エックスサーバーと同様に管理画面からファイルをアップロードできるようになっています。 このようにレンタルサーバーのファイル機能を使ってアップロードすることもできますが、より

これでホームページが見れるようになります!

1日目~7日目までで、レンタルサーバーと独自ドメインの契約、次にホームページのデータ作成を行い、最後にデータをアップロードしました。 この一連の作業を行うことでホームページが表示されインターネットの世界で見れるようになります。

今回は、ホームページ作成の基本を説明してきましたが、HTMLやスイルシートをもっと勉強することで、 自分の好きなようにデザインすることが出来るようになります。 各種タグやHTMLについても解説をしていますので、ぜひ勉強してみてください。