HTML/CSS

【サイト公開】HTML/CSSファイルをエックスサーバー上にアップロードする方法

サーバーアップロード

 

あなた
ローカル環境のWEBサイトを、誰でも閲覧できるようにしたいです。

どうすればいいですか?

 

前回はCSSでフッターを整えてローカル環境でWEBサイトを完成させました。

前回の記事:CSSでフッターを整えよう【WEB制作の基本です】

 

そこで今回は上記の疑問に答えるべく、WEB制作の最終工程「サーバーへのアップロード」を行っていきます。

この記事を読めばこちらのようなサイトを公開できるようになります。

少しボリュームが多くなりますが頑張りましょう。

 

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

ドメインを契約しよう

 

まずは「ドメイン」を取得しましょう。

ドメインというのは「〇〇.com」とかです。見たことありますよね?

 

ドメインはネット上の住所的な役割を果たしてくれる存在です。

ネット上にサイトを公開するのであれば、必須と考えてもらってOK。

 

お名前ドットコムで入手

 

ドメインはお名前.comで入手すればOKです。

以下のように希望の文字列を打ち込んでドメインがあるか確認しましょう。

 

ドメイン名を入力する画面

 

今回は「tenshikun-demo.com」にしました。

1円でした。安すぎ。

 

comにする画面

 

ちなみに、既に使われているドメイン名は使えません。

そこは注意です。

 

チェックしたら申込みへ。

サーバーは「利用しない」を選んでください。

 

お名前ドットコムのサーバーは使用しない画面

 

「Whois情報公開メール転送オプション」と「ドメインプロテクション」のチェックは念の為つけておきます。

申込内容を確認したら、次に進みましょう。

 

ドメインプロテクション選択画面

 

確認画面で、使用サーバーを「エックスサーバー」にしておいてください。

あとは申し込むだけです。

 

エックスサーバーを選ぶ画面

 

申し込みが完了すると以下のような画面になります。

ドメイン認証メールが届いているのでそちらだけ確認しておいてください。

 

申し込み完了画面

 

以上でドメインの取得は終わりです。

 

サーバーを契約しよう

 

ドメインを取得できたら次はサーバーを契約しましょう。

ドメインが住所ならサーバーは土地です。

実際にWebサイトのファイルを置く環境になります。

 

あなたは「サーバーが弱い」「サーバーがダウンした」とか聞いたことありませんかね?

あれは、ファイルの置き場の土地がしょぼかったりするからです。

サーバーのスペック次第で読み込み速度も変わるので優良サーバーを選ぶのは大事ですよ。

 

今回はエックスサーバーというサーバーを契約します。

速度も早く、低価格で大容量なので選んでおけば間違いないです。

僕も愛用しています。

                                                   

エックスサーバーで契約する流れ

 

まずはエックスサーバーに移動しましょう。

申し込みを選択してください。

 

エックスサーバートップページ

 

申し込みフォーム画面で「10日間無料お試し、新規お申し込み」を選びます。

 

初めての利用画面

 

サーバーIDは特に変える必要なし。

プランはスタンダードでOK。

WordPressクイックスタートも無しでOKです。

 

エックスサーバー申込画面

 

登録者情報を入力しましょう。

全部入力したら次に進みましょう。

 

登録情報入力画面

 

認証コードが求められるので打ち込んでください。

 

認証コード入力画面

 

最後に入力内容の確認を求められるので、確認して申込みを完了させましょう。

完了するとサーバーの登録ページに移動します。

「サーバー管理」を選択しましょう。

 

サーバー管理のボタン

 

サーバーパネルというページに移動するので「ドメイン設定」を選んでください。

先程取得したドメイン名を追加してあげてください。

SSL化とアクセラレータのチェックは入ったままにしておいてください。

 

ドメイン設定画面

 

以下のように表示されればOKです。

 

ドメイン設定完了画面

 

以上でサーバーの契約は完了です。

 

なお、エックスサーバーを契約する際は10日間だけ無料で使うことができます。

ただし、その後は料金を支払わないと使用できません。

10日以上使いたい方はエックスサーバーアカウントからログインして料金支払いを行っておいてください。

 

料金支払いの場所

 

↑料金支払いはここから

 

HTML/CSSファイルをエックスサーバー上にアップロードしよう

 

サーバーもドメインも設定できたので、後はHTMLとCSSファイルをアップロードするだけです。

試しに取得したドメイン(僕の場合tenshikun-demo.com)にアクセスしてみてください。

 

以下のように表示されればここまではOKです

 

獲得したドメインのページ

 

しかし、もしかすると以下のようなページが表示されるかもしれません。

 

エラー画面

 

結論これは正常ですので安心してください。

まだエックスサーバーでのドメイン登録が完全に終わっていないだけです。

 

30分から最大1時間程度お待ちいただき、ブラウザのキャッシュをクリアしたうえで、該当アドレスへのアクセスが可能かご確認ください。

>>参考:エックスサーバーの回答

↑公式もこのように回答しているので30分~1時間待ちましょう。

 

それではさっそくアップロード手順を紹介していきます。

 

Cyberduckのインストール

 

まずはCyberduckをダウンロードしましょう。

これはエックスサーバーにファイルをアップロードするためのツールです。

 

Cyberduckの公式ページに移動すると以下のような画面になります。

お使いのパソコンに合わせてダウンロードしてください。

 

CyberDuckのダウンロードページ

Cyberduckでエックスサーバーにアクセス

 

インストールが完了したら、エックスサーバーにCyberduckにアクセスしましょう。

「新規接続」を選んでください。

接続情報を求められます。

 

Cyberduckの接続情報入力画面

 

プロトコルは「FTP-SSL(Explicit AUTH TLS)」を選んでください。

エックスサーバーのサーバーパネルの「サブFTPアカウント設定」を選び、FTPソフト設定で以下の項目をチェックしてください。

 

✔ FTPサーバー(ホスト)名 → Cyberduckの「サーバー」に入力

✔ ユーザー名(アカウント名) → Cyberduckの「ユーザー名」に入力

 

パスワードは「サーバーアカウント設定完了メール」に記載されていますので、届いたメールをチェックしてください。

Anonymous ログインはチェックを外しておきましょう。

入力できたら接続してみてください。

 

ファイルが表示されれば成功です。

上手く行かない場合は公式がCyberduckでの接続について解説してくれていましたので、そちらも参考にしてみるといいです。

>>Cyberduck の設定

 

ファイルをアップロードする

 

エックスサーバーに接続できて、フォルダもあることを確認できたらさっそくファイルをアップロードしていきましょう。

ドメイン名と同じフォルダがあるはずなので、そちらのフォルダを開いてさらにpublic_htmlフォルダを開きましょう。

 

つまり、僕の場合は「tenshikun-demo.com/public_html」という場所です。

開くと以下のような画像になっているはずです。

 

エックスサーバー上の初期ディレクトリ

 

ここのindex.htmlを削除して、これまでの学習で作ってきたファイルをアップロードしましょう。

アップロード後は以下のようなディレクトリになっていればOKです。

 

ファイルをアップロードした画面

 

ドメインにアクセスして、あなたが作ったサイトが公開されていれば成功です。

 

オマケ:https化しておきましょう

 

ということで今回はサーバーへのアップロード方法を紹介しました。

これで一通りの学習も終わりです。

お疲れさまでした。

(まだ学習していない方は以下で学習をスタートさせましょう)

>>【完全無料】HTMLとCSSの学習ステップ一覧

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

最後に、https化の解説をします。

現状作ったサイトにhttp://〇〇.comという形でアクセスしても、そのまま表示されてしまうと思います。

それをhttp://〇〇.comでアクセスしてもhttps://〇〇.comで表示されるようにしましょう。

(httpsのほうがセキュリティの面で優れています)

 

.htaccessファイルを編集しましょう

 

常時https化するには、.htaccsessファイルを編集すればOKです。

以下のようになるようにコードを編集してください。

 

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

 

以下の様にアップロードしておきましょう。

 

.htaccessのアップロード

 

今回は以上です。

最後まで読んでいただきありがとうございました。

 

【補足:Web制作の副業で稼ぎたいあなたへ】

もしあなたが、本格的にWeb制作の副業で稼いでみたいのであれば、スクールで学習するといいです。

受講後に副業案件の紹介までしてもらえます。

優良スクールは以下にまとめていますので、スクール選びの参考にどうぞ。

 

>>【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ