XserverにCyberduckでHTMLファイルをアップロードする方法を解説
こんにちは はるです。
以前Twitterで話題の #30DAYSトライアル を進めていて、ポートフォリオサイトを作っていました。
しかし、エックスサーバー(Xserver)にCyberduckでHTMLファイルをアップロードするときに、誤ってブログ記事をすべて削除してしましました…
ポートフォリオサイトを公開しようとしたら、今まで書いてたブログ内容が全て消えたー🤣🤣🤣#30DAYSトライアル
— はる@仮想通貨×Python×ブロガー (@haruki_otsuka) December 4, 2019
「ブログ記事をすべて消す」というような大事故を起こしてほしくないので、解説記事を書いていこうと思います。
記事の内容
- 実はCyberduckを使わなくてもアップロードできる
- サブドメインを作る(メインでもOK)
- Cyberduck(FTPソフト)を開く
- サブドメインにアップロードする
記事の内容
実はCyberduckを使わなくてもアップロードできる
これからCyberduckでアップロードするやり方を解説していくのですが、実はエックスサーバーの「ファイルマネージャー」を使っても同じようにアップロードできます。
やり方も注意する点もCyberduckとほぼ同じですので、Cyberduckで失敗した方はエックスサーバーの「ファイルマネージャー」を使うのもありだと思います。
エックスサーバーに毎回ログインするのが面倒な人は、CyberduckなどのFTPソフトを使うのがおすすめです。
サブドメインを作る(メインでもOK)
ブログを書いている人は、サブドメインを作ってからファイルをアップロードすることをおすすめします。
新規でドメインを取得したばかりの人はメインドメインでもOKですので、Cyberduck(FTPソフト)を開くまで飛ばしてください。
サブドメインの作る流れは以下のとおりです。
- エックスサーバーのサーバーパネルにログイン
- サブドメイン設定画面に移動する
- サブドメインを追加
エックスサーバーのサーバーパネルにログイン
私の契約しているエックスサーバーでは、サブドメインを無料で作ることができます。
まずは、エックスサーバーにログインしてください。
その後、サーバー管理ボタンを押します。
※直接サーバーパネルにログインしても大丈夫です。
サブドメイン設定画面に移動する
ドメインからサブドメイン設定を押します。
次に、サブドメインを追加したいドメインを選びましょう。
サブドメインを追加
サブドメイン設定を開いたら、右側のサブドメイン設定追加を押してください。
設定対象ドメインを確認して、サブドメイン名を入力します。
注意
サブドメインに「.(ドット)」を付けるとうまく動作しませんでした。
なので、サブドメインを作るときは「.(ドット)」をつけないように気をつけてください。
確認画面に進んで、問題がなければ追加するを押しましょう。
追加できたら戻るボタンで戻ります。
戻ると「反映待ち」と出るので、1時間ほど待ちます。
Cyberduck(FTPソフト)を開く
※Cyberduckダウンロードしていない方は、こちらの記事をどうぞ。
Cyberduck のダウンロードを写真付きで詳しく解説
まずは、Cyberduckのフォルダーに入っている Cyberduck.exe をダブルクリックで開きます。
次に、サーバーにアクセスする手順は以下のとおり。
- サーバーを契約したときのメールを開く
- Cyberduckに戻ってサーバーに接続する
- public_htmlフォルダーを開く
サーバーを契約したときのメールを開く
サーバーを借りたときに契約メールが届いています。
エックスサーバーであれば、
【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]
という名前のメールです。
このメールは
- 会員ID
- メールアドレス
- インフォパネルパスワード
- サーバーID
- サーバーパスワード
- FTPホスト名（FTPサーバー名）
- FTPユーザー名（FTPアカウント名）
- FTPパスワード
の情報が入った大切なメールですので、間違って消さないようにしましょう。
特に下３つはこの後使うのでメールは開いたままにしておいてください。
Cyberduckに戻ってサーバーに接続する
Cyberduckを起動後、左上の新規接続を押すと、サーバ・ユーザ名・パスワードを入力する画面が出てきます。
開いてあるメールのFTP情報をもとに入力してください。
- FTPホスト名（FTPサーバー名<)
- →①のサーバに入力
- FTPユーザー名（FTPアカウント名)
- →②のユーザ名に入力
- FTPパスワード
- →③のパスワードに入力
このとき サーバの右の「ポー」は触らず、そのままにしておきましょう。
パスワードはSeveしても、しなくても大丈夫です。
public_htmlフォルダーを開く
接続をクリックしたら、自分のドメインの名前のファイルがあるので、ダブルクリックで開きます。
自分のドメイン名のファイルの中にある、public_htmlフォルダーを開きます。
たくさんファイルが出てきた人は、ほとんどがブログデータだと思います。(ブロガーさんであれば。)
なので、削除しないでください。
public_htmlを開けたら、サブドメインでアップロードしていきます。
サブドメインにアップロードする
サブドメインにアップロードする流れは以下のとおりです。
- 初期ファイルの削除
- アップロードする
- 実際に確認してみる
もうすぐ終わるのでサクッといきましょう。
注意
後ほど出てくる画像のサブドメインは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やお問い合わせからご連絡ください。
匿名で聞けちゃう！はる@専門学生ブロガーさんの質問箱です
おもに専門学校の質問に答えます！(それ以外もOK) 【プロフィール】 ランサーズでPythonのDjango案件受注経験あり| web系のプログラミング情報をつぶやきます | 20歳 専門学校3年生 | プログラミング挫折→ブログ書く→挫折→ブログ再開→ブログで最高月収益4桁&最高月間3000pv達成 | 実は仮想通貨でお金を5倍増やした経験もあります | 家に引きこもって生きる