HTMLファイルをサーバーにアップロードする方法を解説
こんにちは はるです
今回 #30DAYSトライアル を進めていて、ポートフォリオサイトを作っていました。完成したので、私のブログのドメインである sushiringblog.com にアップロードしようと考えました。
30DAYSトライアル の手順では、
- サーバーをレンタル (エックスサーバー)
- 新しいドメインを取得 (エックスドメイン)
- FTPソフト【Cyberduck】を使ってhtml、cssなどの必要なファイルのアップロード
- chromeで確認
という流れになっています
私は 3. でやらかしたので深堀していきます
この記事では、サーバーにファイルをアップロードさせる手順と、その上でブログを消さないための方法を解説しています
なので、ブログ記事復旧についての記事は別で作ります
ブログ記事を復活させたい人はこちらをご覧ください
何もバックアップとっていない状態から、ブログを復活させる方法(公開予定)
※解説では、FTPソフトは Cyberduck を使っていきます
ダウンロードしていない方はこちら
FTPソフト Cyberduckを開く
Cyberduckのファイルに入っている Cyberduck.exe をダブルクリックで開きます
【重要】 サーバーを契約したときのメールを開く
サーバーを借りたときに契約メールが届いています
エックスサーバーならば、
【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]という名前のメールです
このメールは
- 会員ID
- メールアドレス
- インフォパネルパスワード
- サーバーID
- サーバーパスワード
- FTPホスト名（FTPサーバー名）
- FTPユーザー名（FTPアカウント名）
- FTPパスワード
の情報が入った大切なメールですので、間違って消さないようにしましょう
特に下３つはこの後使うのでメールは開いたままにしておいてください
Cyberduck に戻ってサーバーに接続する
ソフトを起動後、左上の新規接続を押すと、サーバ・ユーザ名・パスワードを入力する画面が出てきます
開いてあるメールのFTP情報をもとに入力していきます
- FTPホスト名（FTPサーバー名） →①のサーバに入力
- FTPユーザー名（FTPアカウント名） →②のユーザ名に入力
- FTPパスワード →③のパスワードに入力
このとき サーバの右の「ポー」は触らず、そのままにしておきましょう
パスワードはSeveしても、しなくても大丈夫です
接続をクリックしたら、自分のドメインの名前のファイルがあるので、ダブルクリックで開きます
自分のドメイン名のファイルの中にあるpublic_htmlのファイルを開きます
どのぐらいファイルが出てきましたか？
たくさんファイルが出てきた人は私と同じタイプで、すでに借りているサーバーかつ持っている独自ドメインにポートフォリオサイトをアップロードしようとしているのではないでしょうか？
ここから分けて説明します
初めてサーバを借りている、または新しいドメインを取得した人は、デフォルトの画像とhtmlファイルの2つだけあると思います
その方は少し先のサブドメインでアップロードするに進んでください
道のりは違くても、サブドメインと新しいドメインは、アップロードのやり方が同じです
私と同じで、ブログ記事のファイルや何かしらの複数のデータが残っている人はこのまま続けます
たくさんのファイルが見つかった+反省
#30DAYSトライアルの指示通りに進めていくと、「初期ファイルをすべて消す」となっています
「WordPressデータをデータを消す」とは書いてありませんでした
ですが、私はよくわからなかったので、ここにあるすべてのファイルを初期ファイルだと勘違いして、消してしまいました(爆笑)
つまりすべてのブログ記事が消えました
また、新しいドメインにお金をかけたくなかったので、ブログのドメインに公開しようとして、失敗したとも言えます
では、ブログ記事を消さないようにポートフォリオサイトを公開するには、どうすればよかったのでしょうか？
どうすればブログは消えずにすんだのか？
ググりまくった結論として、
- 新しいサーバー+新しいドメインを取得する
- 新しいドメインだけを取得する
- サブドメインを作る
- サブドメイン+サブFTPアカウントを作る
のどれかをすれば防げることがわかりました(ほかにもあるかもしれないので私個人の考えとして参考にしてください)
新しいサーバー+新しいドメインを取得する
これは #30DAYSトライアルをと完全に同じやり方です
サーバー代にドメイン代もかかります
サーバーもドメインもある人からすると、ちょっとやりたくない
新しいドメインだけを取得する
既にサーバーは借りている、またはサーバーもドメインもある人ならできます
借りているサーバーを利用して、新しいドメインで、ポートフォリオサイトをアップロードするやり方です
新しいドメインなので、ドメイン代だけかかります
それでも新しいサーバー+新しいドメインよりは安く抑えられます
サブドメインを作る
私の契約しているエックスサーバーではサブドメインを無料で作ることができます
作り方はこちら(公開予定)
この方法は、サーバーを借りている、かつドメインを取得している人ならできます
しかも無料でできたので、このやり方で再度挑戦しました
サブドメイン+サブFTPアカウントを作る
サブドメインはおそらく無制限で作れると思います
一つのサーバーに対するマルチドメインの設定が無制限と公式サイトに載っていたので…
(マルチドメイン: ②の新しいドメインとすでに持っているドメインのこと つまり自分の持っているすべてのドメインのこと)
サブドメインを無限に作りすぎると、サーバーにファイルをアップロードするとき、もとのドメインファイルと複数のサブドメインのファイルが混合でサーバーに保存されます
なのでサブドメインがあるほど管理が複雑になります
そこでサブドメインごとのFTPアカウントがあれば、個別に管理することができます
とりあえず、サブドメインの数は2つだったので大丈夫だと思い、設定しませんでした
サブドメインでアップロードする
サブドメインが作り終わった前提で進めていきます
まだ作っていない方はこちらからどうぞ
Cyberduckを起動
新規接続を押して、再び
- サーバー
- ユーザ名
- パスワード
を入力します
接続を押します
そしたら設定したサブドメインの名前のファイルがありますので、ダブルクリックで開きます
初期ファイル2つ見つかったので、こちらを削除していきます
初期ファイルの削除
消したいものをクリック、青ラインで指定されたら右クリックで「削除」を選びます
(deleteキーでも消すことはできます)
アップロードする
アップロードしたいファイルをドラッグ＆ドロップで「public_html/サブドメイン名」の場所に貼り付けます
Cyberduckに必要なファイルを貼り付けられたら完了です
右上のバツ印でソフトをとじます
寄付のお願いがCyberduckを閉じるたびに毎回出てきますので、寄付したい方はどうぞ
実際に確認してみる
検索サイトで「サブドメイン名.ドメイン名」で検索してみてください
私は サブドメイン名 : asakusa.sample
ドメイン名 : sushiringblog.com
なので、asakusa.sample.sushiringblog.comとなります
自分で作ったサイトが表示されていれば、完成です
ただ、すぐには表示されないと思うので、1時間～半日待ってみましょう
待ってみたけど表示されない
原因不明で1日待っても表示されませんでした
サブFTPアカウントを作って再度挑戦しようとしましたが、サブドメイン名が長すぎて、 サブFTPアカウントのFTPユーザーIDを作れなかったので、諦めて新しいサブドメインを作りました
任意の文字 + ＠サブドメイン名 で30文字以内ならFTPユーザーIDを作ることができます
私はサブドメインだけで、32文字だったので作れませんでした</p>
別のサブドメインを作り直す
asakusa.sample.sushiringblog.com からasakusa.sushiringblog.com に変更してやり直しました
asakusa.sample.sushiringblog.com はいらないので削除を押して消しました
Cyberduck にあるファイルも消しておきます
削除のやり方はこちら(公開予定)
新しくサブドメインを作ったので、サブドメインでアップロードするの手順通りに進めていきます
ようやくアップロードできた
アップロードしたサイトがこちら
https://asakusa.sushiringblog.com/
問題なく見ることができるので、ようやく完成といっていいでしょう！
cookie の問題が発生していますが、後日直そうと思います
まとめ
ブログ記事を消してしまったり、うまく動作しないサブドメインがあったりと、壁にぶつかりながら進んできました
これらの体験から言えることをまとめると、
・public_html に大量のファイル(3つ以上)があったら、いきなり消さないこと
→ブログ記事や、何か他のファイルがあるかもしれないから
・新しいサーバーを借りたり、新しいドメインを取得したりすることをしたくない、お金をかけずにサーバーにアップロードしたかったら、サブドメインを作ればアップロードできること
・作ったサブドメインがうまく機能しなくても、別のサブドメインを作っても大丈夫 その時、使わないサブドメイン名のドメインとファイル消しておくこと
→public_htmlにサブドメイン名のファイルが作られるので、いらないサブドメインファイルがあると管理が大変になる(ややこしくなると思う)
自分の作ったサイトが公開されて見れるのって面白いですよね
でも、アップロード時に「ブログを消す」という、とんでもないことをしないように、気を付けてください
それでは また(/・ω・)/