エックスサーバーにWEBサイトをアップロードする

プログラミング

こんにちは、ゆんつです。

WordPressでブログをやっていると、基本的にFTPクライアントを使って自分からサーバーに接続してHTMLファイルなどのアップロードを行う必要がありません。

エディタで記事を書いて、画像はドラッグ&ドロップで貼り付けて、最後に公開ボタンを押せばいいだけです。

ゆんつ
ゆんつ

お手軽ですよね

でもWordPressを使わずにWEBサイトを公開したい場合には、自分でHTMLファイルやCSSファイルなどの各種ファイルをアップロードしなければなりません。

僕もWordPressでブログはやっていますが、自分でHTMLファイルをアップロードしてWEBサイトを公開した経験は今まで一度もありません。

今日はエックスサーバーにHTMLファイルをアップロードして、以下のようなテストサイトを公開してみたいと思います。

テスト用のWEBページ

ゆんつ
ゆんつ

急ごしらえもいいとこ

エックスサーバーでWEBサイトを公開する

現在僕が借りているエックスサーバーの状態はこんな感じになっています。

現状のドメインの状態

ゆんつ
ゆんつ

konpure.comがこのブログですね

エックスサーバーを契約したときに貰える初期ドメイン「tokomachi.xsrv.jp」はまだ何もしておらず手付かずなので、このドメインにテスト用のWEBサイトをアップロードしたいと思います。

「public_html」に「index.html」というファイル名でアップロードする

エックスサーバーでは「public_html」というフォルダにネット上に公開するファイルをアップロードすることになっています。

よくある質問 - ホームページのファイルはどこへアップロードすればいいですか? | 法人向けレンタルサーバー【エックスサーバービジネス】サポートサイト
「ホームページのファイルはどこへアップロードすればいいですか?」の回答を記載しています。

そしてトップページのファイル名は「index.html」にするようになっているので、そのようにファイル名を設定しておきます。

FTPクライアントでサーバーに接続します。

FTPクライアントの導入や設定は下記の記事をご覧ください。

FileZillaのインストールと初歩的な使用方法についての備忘録
こんにちは、ゆんつです。 FTPクライアントというのをご存知でしょうか? FTPクライアントはサーバーとクライアント(PC)との間でのファイルをやり取りするのに使うソフトの事です。 僕は極たまにですが「FileZilla」

現在のサーバーの状態はこのような感じです。

FTPクライアントでサーバーに接続した状態

今回のアップロード先は初期ドメインの「tokomachi.xsrv.jp」ですので、そのフォルダを選択して開きます。

目的のドメイン名のフォルダを開く

つづいてファイルの設置場所となる「public_html」を選択して開きます。

public_htmlを開く

ゆんつ
ゆんつ

あれ?

public_htmlには初期状態でファイルが入っている

何かある!!

ゆんつ
ゆんつ

まだ何もアップロードしてないはずだけど・・・

htmlファイルがあるということは、初期ドメインにアクセスすると何か表示されるはずです。

ブラウザのURL欄に「tokomachi.xsrv.jp」と入力してみると、こんな感じの初期ページが表示されました。

エックスサーバーにホームページが未アップロードの場合に出る画面

ゆんつ
ゆんつ

こんなページがあるなんて初めて知った・・・

何もアップロードされていない状態で、そのドメインのURLに接続するとこんな画面になるんですね。

僕はいきなりWordPressでブログを開始したため、初めてこんな画面を見ました。

勉強になったね

というわけで、初期ページはいらないので最初から設置されていた2つのファイルは捨てて、自分で作ったファイルをアップロードします。

初期ファイルは捨てて、自作のファイルをアップロード

これでアップロード作業は完了です

http://tokomachi.xsrv.jp/にアクセスすると無事にテストページが表示されました。

テスト

ちなみに

public_htmlフォルダに初期設定で設置されていた2つのファイルを捨てて空っぽにして、ドメインにアクセスするとこんな画面になりました。

public_htmlから初期ファイルを捨てると表示される画面

簡単でした

エックスサーバーへのWEBサイトのアップロードは

・ファイルはそのドメイン名のフォルダ内にある「public_html」というフォルダにアップロードする

・トップページは「index.html」とする

ということに留意すれば良いだけで、とても簡単でした。



普段WordPressを使っているとサーバーへのファイルのアップロードを全く意識しないので、今回のアップロードはいい経験になりました。

ゆんつ
ゆんつ

何事も経験!

WordPressに頼らずにWEBサイトを構築していく方法も徐々に学んでいきたいと思います。

それでは、またー。

コメント