独学 [ 講座 ]

サーバーにHTMLファイルをアップロードして公開する

  サーバーにHTMLファイルをアップロードして公開する

ホームページを公開するためには、ドメインの取得とサーバーのレンタルが必要です。

サーバーを借りると、無料で使用できるドメインが1つ付きます。まずはホームページ公開のため、サーバーを借りてホームページを公開してみましょう。

パソコンを使っての方法を解説します。

【手順1】サーバーを決める

最初に使うサーバーとして、ロリポップを使って説明します。

ロリポップにした理由

  • 値段が安い
  • 無料SSLが使える
  • 運営歴が長く、GMOのサービスなので安心
  • サーバーをレンタルすると独自ドメインを1つ取得できるキャンペーンをよくやっているので狙い目

ロリポップ!公式サイトへ

プランは、ライト以上がおすすめです。まずは、ライトで十分です。

今回は、WordPressを利用しませんので、一番最安値プランのエコノミーでも可能ですが、独自ドメインを利用するのであれば、OKです。独自ドメインを取得しないのであれば、共有SSLが使用できるライトプラン以上にしてください。

「初心者でよくわからないよ」という人は、ロリポップのライトプランにしておきましょう。

また、もう一つだけサーバーを紹介しておくと、さくらサーバーでも構いません。こちらは少しだけ金額が上がります(数十円、数百円程度)が、こちらも有名なサーバーで、利用者も多いです。

さくらのレンタルサーバ公式サイトへ

個人利用ならロリポップ、法人利用ならさくらというイメージもありましたが、今や、どちらも個人、法人利用しています。

うさ吉先生

ロリポップは上位プランなら途中で変更できるのも魅力。まずはライトプランからと入りやすい

▼サーバーを比較検討したいならこちら▼

【手順2】ロリポップのライトプランに申し込む

まずは、ロリポップ! のライトプランに申し込みましょう。最初の10日間はクレジットカード登録などなく、無料で使用できるので、まずは登録してみましょう。

  • 1. ロリポップに申し込む

    ロリポップに申し込む

    ロリポップ! をクリックして、申し込みを始めます。

    緑で囲ってある申し込みボタンから、申し込みを進めます。どちらのボタンを押してもOKです。

  • 2. プランを選ぶ

    プランを選ぶ

    申し込むプランを選びます。ここでは、「ライト」プランの「10日間無料お試し」ボタンを押します。

    途中でわからないことがあれば、右下の「お困りの人はこちら」のチャットで質問できるで、聞きましょう。

  • 3. ドメイン名を決める

    ドメイン名を決める

    無料で使用できるドメイン名を決めます。ドメインの後ろのドメインを変えたい場合は、右の「URLの末尾を変更する」ボタンを押すと変更できます。

    今後、URLとして使うことになるので、ショップで使う場合はショップ名、趣味で使う場合はそれにちなんだ名前にしましょう。ドメイン名の変更は、登録後1度だけ可能です。

    ドメインを決めたら、パスワードとメールアドレスを入力します。ここで決定したドメイン名とパスワードはログインするため必要になるので、しっかり覚えておきましょう。

  • 4. SNS認証による本人確認

    SNS認証による本人確認

    SNS認証による本人確認があるので、携帯番号を入力し、「認証コードを送信する」ボタンを押します。

  • 5. 認証コード入力

    認証コード入力

    先ほど入力した携帯に認証コードが送信されます。その認証コードを入力して、「認証する」ボタンを押します。

  • 6. 申込み内容の入力

    申込み内容の入力

    認証コードが合っていれば、SNS認証の完了です。申込み内容に沿って、氏名、住所などを入力します。

    「契約を自動更新にしませんか?」は、任意でチェックを入れてください。更新を忘れるとホームページが閲覧できなくなるので、自動更新にしておくと良いでしょう。

    「有料オプション」は、気になる人は合わせて申し込んでおきましょう。今回は、一旦なしで登録します。

    「取次店」コードがある場合は入力します。ほとんどの場合はないので、空欄のままでOKです。

    入力が完了したら「お申込み内容確認」ボタンをクリックします。

  • 7. 申込み内容の確認

    申込み内容の確認

    入力内容を確認し、問題なければ「無料お試し開始」ボタンをクリックします。

  • 8. 申込み完了

    申込み内容の確認

    これで申し込みが完了しました。サーバーはすぐ使用できるので、完了画面の「ユーザー専用ページにログインする」を押すか、メールに届いたURLをクリックしてログインしましょう。

    ログイン情報は、手順「3. ドメイン名を決める」で決定したドメインとパスワードです。

  • 9. 管理画面にログイン

    管理画面

    自分の管理画面にログインできました。

    お試し期間が切れると使用できなくなるので、忘れずに上部の「ご契約手続きに進む」から手続きを行ってください。

【手順3】ロリポップのサーバーにアップする

申し込みが完了したら、サーバーにアップします。

ここでは、FTPソフトを使用したアップ方法をご紹介します。この方法なら、どのレンタルサーバーでも使える方法なので覚えておきましょう。

無料で使用できるFTPソフトがあるのでそれを使用します。今回は、WindowsでもMacでも使用できるFilezillaを使用します。

  • 1. Filezillaをダウンロードしてインストール

    Filezillaをダウンロード

    Filezillaをこちらからダウンロードしてください。

    Macは左、Windowsは右のボタンを押すとダウンロードページに進みます。

    ファイルをダウンロードしたら、ファイルをダブルクリックして、インストローラーに従ってソフトをインストールしてください。

  • 2. ロリポップのFTP情報確認

    ロリポップのFTP情報確認

    Filezillaをインストールしたら、先ほどログインしたロリポップの管理画面から、FTP情報を確認します。管理画面の左メニューから[ユーザー設定]>[アカウント情報]をクリックしてください。

    中段にサーバー情報があるので、この「FTPサーバー」「FTP・WebDAVアカウント」「FTP・WebDAVパスワード」の情報が必要になります。ここを開いたままにしてFilezillaを開きましょう。

  • 3. インストールしたFilezillaを開く

    インストールしたFilezillaを開く

    先ほどインストールしたFilezillaを開いてください。開いたら、このような画面が開きます。左上にアイコンがあるので、まずはそこをクリックします。

  • 4. FilezillaにFTP情報を入力

    FilezillaにFTP情報を入力

    サイトマネージャーが開きます。左下に「新しいサイト」ボタンがあるので、それをクリックすると「新規サイト」ができます。ここの名前は任意でつけてください。日本語で構いません。

    右側に先ほどのロリポップにあるサーバー情報を以下のように入力していきます。

    • プロトコル:FTP – ファイル転送プロトコル
    • ホスト:ftp.lolipop.jp
    • 暗号化:使用可能なら明示的なFTP over TLS を使用
    • ログオン タイプ:通常
    • ユーザー:(FTP・WebDAVアカウント)
    • パスワード:(FTP・WebDAVパスワード)

    入力したら、右下の青い「接続」ボタンを押します。

  • 5. ロリポップのサーバーに接続

    ロリポップのサーバーに接続

    ログインができれば、右下にwelcom.htmlが表示されます。上部の「ログインしました」というログからも確認できます。

    すでにあるwelcom.htmlは、そのままでも削除しても構いません。

    ログインができれば、ファイルをアップロードします。まず、向かって左がパソコンのローカル環境です。ここで、自分がアップするファイルを選びます。

    左側の上段からアップしたいファイル置き場を探します。そこでフォルダを選択すると下段にフォルダの中身が表示します。

  • 6. サーバーにアップロード

    サーバーにアップロード

    左下にアップしたいファイルが表示されたら、それを選択して、そのまま右下段にドラッグ&ドロップします。

    これで、サーバーのアップロードが完了しました。

    実際に自分が登録したURLから表示を確認しましょう。

  • 8. URLで表示確認

    URLで表示確認

    ロリポップで使用するURLにアクセスしましょう。もしURLがわからない人は、先ほどのアカウント情報の上段に「サイトアドレス」と「共有SSL」とあるので、どちらでも表示されているか確認しましょう。

    確認ができれば、ホームページの公開完了です!スマホでも表示を確認しておきましょう。

【手順4】最後にURLの統一

ホームページの公開お疲れ様でした!と言いたいところですが、あと一つ作業を行っておきましょう。

先ほど、「サイトアドレス(http://◯◯◯.☐☐☐.jp/)」と「共有SSL(https://☐☐☐-◯◯◯.ssl-lolipop.jp/)」のURLを確認しましょうと言いましたが、これはURLが2つあることになります。

SSLとは、インターネット上でのデータの通信を暗号化し、盗聴や改ざんを防ぐ仕組みのことです。そのため、「共有SSL」はデータが保護されたURLになるので、こちらをURLとして利用します。

「サイトアドレス」でアクセスした場合は、自動で「共有SSL」にリダイレクトしておきます。そうすることで、URLが一つに統一されるので、SEOにも効果的です。

転送方法に、htaccessを使用します。まず、メモ帳を開いて、以下の記述をします。


RewriteEngine On
RewriteBase / 
RewriteCond %{HTTPS} off
RewriteRule ^(.*$) (共有SSLのURLを入力)$1 [R=301,L]

(共有SSLのURLを入力)のみ書き換えて、htaccess.txtというファイル名で保存してください。

ファイルを保存したら、サーバーアップの手順で、もう一度htaccess.txtをサーバーにアップします。

  • htaccessファイルをアップ

    htaccessファイルをアップ

    index.htmlファイルと同じ階層にアップします。アップした後、ファイルを右クリックし、「名前の変更」を選択して、ファイル名を「.htaccess」に変更して完了です。

これで、「サイトアドレス」にアクセスしても「共有SSL」に転送されます。

サーバーアップ後に「.htaccess」と名前を変更したのは、ローカル環境では「.htaccess」というファイルが作れなかったり、ファイルが見えない状態になってしまうことがあるからです。

サーバーアップ後に「.htaccess」と変更すれば、何のファイル名で保存しても構いません。

また、共有SSLのURLは「ssl-lolipop.jp」が後ろに付くので、このURLは嫌だと思う人もいるでしょう。その場合は、独自ドメインの取得が必要になります。

独自ドメイン取得は別途説明します。

うさ吉先生

初心者だと、ここまでくるのに一苦労だと思う。でも、公開できたらまずは大きな第一歩だ!たくさんカスタマイズして素敵なホームページを作ってくれ!