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

プログラミング

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

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

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

ゆんつ
ゆんつ

お手軽ですよね

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

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

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

ゆんつ
ゆんつ

急ごしらえもいいとこ

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

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

現状のドメインの状態

ゆんつ
ゆんつ

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

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

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

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

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

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

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

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

FileZillaのインストールと初歩的な使用方法
こんにちは、ゆんつです。 「FTPクライアント」というのをご存知でしょうか? FTPクライアントはサーバーとクライアント(PC)との間でのファイルをやり取りするのに使うアプリの事です。 WordPressでブログを運営して

現在僕が借りているのサーバーの状態はこのような感じです。

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

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

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

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

public_htmlを開く

ゆんつ
ゆんつ

あれ?

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

何かある!!

ゆんつ
ゆんつ

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

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

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

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

まだ何もホームページがアップロードされていない旨のメッセージが表示されました。

ゆんつ
ゆんつ

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

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

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

勉強になったね

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

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

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

アクセスしよう

さっそくアップロードしたHTMLファイルにアクセスしてみます。

URLは「public_html」直下にindex.htmlファイルを置いた場合は

https://ドメイン名/

でアクセスできます。

ゆんつ
ゆんつ

index.htmlは付けても付けなくても大丈夫です

僕のドメイン名は「tokomachi.xsrv.jp」なのでURLはhttps://tokomachi.xsrv.jp/ということになります。

https://tokomachi.xsrv.jp/にアクセスすると無事にテストページが表示されました。(※現在このURLはパスワードをかけているので僕以外はアクセスできません)

ちなみに

public_htmlフォルダに初期設定で設置されていた2つのファイルを捨てて空っぽにし、ドメインにアクセスしてみたら以下のような画面になりました。

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

簡単でした

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

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

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

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



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

ゆんつ
ゆんつ

何事も経験!

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

それでは、またー。

コメント

  1. 金坂 正博 より:

    public_htmlのなかにHOMEというフォルダを作り、そのHOMEというフォルダの中の、latestというファイルの中にindex.htmlを置く。つまり
    public_html/HOME/latest/index.html
    としたらアクセスした時、このindex.htmlって表示されますよね。