XserverにCyberduckでHTMLファイルをアップロードする方法を解説

プログラミング

こんにちは はるです。

以前Twitterで話題の #30DAYSトライアル を進めていて、ポートフォリオサイトを作っていました。

しかし、エックスサーバー(Xserver)にCyberduckでHTMLファイルをアップロードするときに、誤ってブログ記事をすべて削除してしましました…

ポートフォリオサイトを公開しようとしたら、今まで書いてたブログ内容が全て消えたー

「ブログ記事をすべて消す」というような大事故を起こしてほしくないので、解説記事を書いていこうと思います。

記事の内容

  • 実はCyberduckを使わなくてもアップロードできる
  • サブドメインを作る(メインでもOK)
  • Cyberduck(FTPソフト)を開く
  • サブドメインにアップロードする

記事の内容

実はCyberduckを使わなくてもアップロードできる

これからCyberduckでアップロードするやり方を解説していくのですが、実はエックスサーバーの「ファイルマネージャー」を使っても同じようにアップロードできます。

やり方も注意する点もCyberduckとほぼ同じですので、Cyberduckで失敗した方はエックスサーバーの「ファイルマネージャー」を使うのもありだと思います。

エックスサーバーに毎回ログインするのが面倒な人は、CyberduckなどのFTPソフトを使うのがおすすめです。

サブドメインを作る(メインでもOK)

ブログを書いている人は、サブドメインを作ってからファイルをアップロードすることをおすすめします。

新規でドメインを取得したばかりの人はメインドメインでもOKですので、Cyberduck(FTPソフト)を開くまで飛ばしてください。

サブドメインの作る流れは以下のとおりです。

  • エックスサーバーのサーバーパネルにログイン
  • サブドメイン設定画面に移動する
  • サブドメインを追加

エックスサーバーのサーバーパネルにログイン

私の契約しているエックスサーバーでは、サブドメインを無料で作ることができます。

まずは、エックスサーバーにログインしてください。

その後、サーバー管理ボタンを押します。
サーバー管理ボタンを押す

※直接サーバーパネルにログインしても大丈夫です。
サーバーパネルログイン

サブドメイン設定画面に移動する

ドメインからサブドメイン設定を押します。
サブドメイン設定画面に移動する

次に、サブドメインを追加したいドメインを選びましょう。
ドメインを選ぶ

サブドメインを追加

サブドメイン設定を開いたら、右側のサブドメイン設定追加を押してください。

設定対象ドメインを確認して、サブドメイン名を入力します。
サブドメインの入力

注意

サブドメインに「.(ドット)」を付けるとうまく動作しませんでした。
なので、サブドメインを作るときは「.(ドット)」をつけないように気をつけてください。

確認画面に進んで、問題がなければ追加するを押しましょう。
追加する

追加できたら戻るボタンで戻ります。
戻るボタン

戻ると「反映待ち」と出るので、1時間ほど待ちます。

Cyberduck(FTPソフト)を開く

※Cyberduckダウンロードしていない方は、こちらの記事をどうぞ。
Cyberduck のダウンロードを写真付きで詳しく解説

まずは、Cyberduckのフォルダーに入っている Cyberduck.exe をダブルクリックで開きます。

Cyberduck.exe をダブルクリックで開く

次に、サーバーにアクセスする手順は以下のとおり。

  • サーバーを契約したときのメールを開く
  • Cyberduckに戻ってサーバーに接続する
  • public_htmlフォルダーを開く

サーバーを契約したときのメールを開く

サーバーを借りたときに契約メールが届いています。

エックスサーバーであれば、
【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]
という名前のメールです。

このメールは

  • 会員ID
  • メールアドレス
  • インフォパネルパスワード
  • サーバーID
  • サーバーパスワード
  • FTPホスト名(FTPサーバー名)
  • FTPユーザー名(FTPアカウント名)
  • FTPパスワード

の情報が入った大切なメールですので、間違って消さないようにしましょう。

特に下3つはこの後使うのでメールは開いたままにしておいてください。
メールは消さないように

Cyberduckに戻ってサーバーに接続する

Cyberduckを起動後、左上の新規接続を押すと、サーバ・ユーザ名・パスワードを入力する画面が出てきます。

開いてあるメールのFTP情報をもとに入力してください。

  • FTPホスト名(FTPサーバー名<)
  • →①のサーバに入力
  • FTPユーザー名(FTPアカウント名)
  • →②のユーザ名に入力
  • FTPパスワード
  • →③のパスワードに入力

このとき サーバの右の「ポー」は触らず、そのままにしておきましょう。

パスワードはSeveしても、しなくても大丈夫です。

public_htmlフォルダーを開く

接続をクリックしたら、自分のドメインの名前のファイルがあるので、ダブルクリックで開きます。

自分のドメインの名前のファイルをダブルクリックで開く

自分のドメイン名のファイルの中にある、public_htmlフォルダーを開きます。
public_htmlを開く

たくさんファイルが出てきた人は、ほとんどがブログデータだと思います。(ブロガーさんであれば。)
なので、削除しないでください。

ブログデータを削除しないで

public_htmlに大量のファイル(3つ以上)があったら、とりあえず消さないこと。大事。

public_htmlを開けたら、サブドメインでアップロードしていきます。

サブドメインにアップロードする

サブドメインにアップロードする流れは以下のとおりです。

  • 初期ファイルの削除
  • アップロードする
  • 実際に確認してみる

もうすぐ終わるのでサクッといきましょう。

注意

後ほど出てくる画像のサブドメインはasakusa.sampleとなっていますが、サブドメインに「.(ドット)」を付けるとうまく動作しませんでした。
なので、サブドメインを作るときは「.(ドット)」をつけないように気をつけてください。

サブドメインを作る(メインでもOK)のところで作ったサブドメインと違うもの(asakusa.sample)で解説していますが、同じ動作なので気にしないでください。

初期ファイルの削除

設定したサブドメインのフォルダーがありますので、ダブルクリックで開いてください。
サブドメインのフォルダーを開く

おそらく、以下の初期ファイル2つあると思うので、削除していきましょう。

  • defalut_page.png
  • index.html

初期ファイル

消したいものをクリック、青ラインで指定されたら右クリックで「削除」を選びます。
(deleteキーでも削除可能。)

アップロードする

アップロードしたいファイルをドラッグ&ドロップで「public_html/サブドメイン名」の場所に貼り付けます。

Cyberduckに必要なファイルを貼り付けられたら完了です。

今回私がアップロードしたのは以下のファイルです。

  • imgs
  • font-awesome-animation.min.css
  • index.html(削除したindex.htmlではありません)
  • style.css

アップロードしたファイルが、Cyberduckに表示されていれば問題ありません。
右上のバツでCyberduckをとじましょう。

Cyberduckを閉じるたびに、寄付のお願いが毎回出てきます。
寄付したい方はどうぞ。私は寄付してないです。

寄付の画面

実際に確認してみる

検索サイトで「サブドメイン名.ドメイン名」で検索してみてください。
(ドット . を忘れずに)

私は、

  • サブドメイン名:test
  • ドメイン名:x-sushiringblog.com

上記のとおりなので、test.x-sushiringblog.comとなります。

自分で作ったサイトが表示されていれば、完成です。

ただ、すぐには表示されないと思うので、1時間~半日待ってみましょう。

アップロードしたサイトがこちら。

https://test.x-sushiringblog.com

追記

現在は別のドメインにアップロードしています。
https://asakusademo.c-sushiringblog.com

問題なく見ることができていれば完成です。
お疲れさまでした!

さいごに

ファイルのアップロード時に「ブログを消す」という、とんでもないことをしないように気を付けてください笑

ご覧いただきありがとうございました。

※ご不明な点がありましたら、Twitterお問い合わせからご連絡ください。

質問箱でも受け付けています!