HTML CSS入門 自分のWebページを公開する手順 おすすめの無料レンタルサーバー

今回は自分のページを公開する流れについて紹介していきます
あなたの今作っているページも、誰にでも見れるような形にしてみましょう!

初心者が覚えておきたいキーワード ローカルとサーバー

自分のページを皆が見れるように公開することを、サーバーにファイルをアップすると言います。
これまでの記事を手順通り進めてきた人は、ファイルがデスクトップ上など自分のパソコン内に存在していて、他の人から見ることはできない状態かと思います。
この、自分しか見ることのできない環境をローカルと呼びます。
これを他の人からも自由に見れるようにするには、サーバーにファイルをアップするという手順が必要です。
今回は作ってきたページをサーバー上にアップしてみましょう。

※ここではHTML CSSの仕組みを理解するためにサーバーを使うだけなので、サーバーの説明については省略します。

初心者におすすめの無料レンタルサーバー スターサーバー 会員登録のやり方

無料のレンタルサーバーとしてはスターサーバーがおすすめです。

スターサーバーフリー
こちらは年中無料でサーバーをレンタルすることが可能です。こちらのサーバーをお借りして、アップロードしてみましょう。

まずはスターサーバーへの会員登録が必要となります。登録にはメールアドレスのほかに電話番号が必要なので、スマホをご用意しておいてください!

【今すぐ始める】という大き目のボタンを押したらログイン画面になると思います。

そこに新規会員登録のボタンがあるので、そちらから進んでください。

会員登録が終わったら、もう一度トップページに戻ってください

【今すぐ始める】からログインしてください。

このようなSMS認証画面になればOKです。

プランについては基本的に右をお勧めします。Wordpressを使うことができるからです。当ブログではWordpressについても後々書いていくことになります。

ちなみに動画を貼りたい場合は、Youtubeにアップロードしてそれをサイトに貼りつければ問題ないので、動画での容量を懸念されている方は、その必要はありません。

契約後の注意点としては、利用期限が3か月となっているため、3か月毎に契約更新をしなければならないことです。(フリープランのため無料です)

更新の手続きは2か月前から行う事ができますので、今日の日付を覚えておいて、2ヶ月後の時点で更新すればOKです。

スターサーバーのほうにログインしてみます。
スターサーバー サーバー情報の確認
左上のスターサーバー管理から、無料プラン管理と順番に押していってください。

プランの加入が終わっていれば右側にこのようなメニューが現れるかと思いますので、サーバー管理ツールを押してください。

次はサーバーに接続するためのアカウントを作ります。FTPアカウントと呼ばれるものです。

左のメニューから、FTPアカウント設定を選択して、右のメニューから選択を選びます

winSCP導入

右のメニューに、FTPアカウント一覧というのが現れますので、編集というボタンを押します。

FTPアカウントのパスワードを設定してください。

ここまでくれば接続の準備完了です。次のステップからWinSCPのダウンロードを開始しましょう。

サーバーにアップロードするために必要なツール WinSCPの設定

WinSCPはこちらからダウンロードできます。

WinSCP

これは自分のレンタルしたサーバーにつなぎ、アップロードするために必要なツールです。

インストール時にチェック項目があるかと思いますが、そのまま進んでもらって大丈夫です。

WinSCPインストール

インストールが完了したら、ログインの画面になったと思います。最初に転送プロトコルを【FTP】にしてください。

こちらのログインの項目に、先ほどのスターサーバーでのサーバー情報を入力します。

ホスト名とユーザー名とパスワードの3つを入力します

ユーザー名のところにはFTPアカウントID、パスワードには先ほど設定したパスワードを入れます。

ホスト名は、左のメニューにサーバー情報という項目があるので、そこを確認するとホスト名が先頭に載っています。

winSCP導入手順

また、入力が終わったら、ユーザー名の下にある【保存】を押しておくと、次回からパスワードのみの入力で接続できるようになります

では早速ログインしてみましょう!

自分のサーバーにページをアップロード 公開後の確認方法と追加方法

WinSCPの設定が終わると、いよいよサーバーにアップロードの準備が整いました。

接続後このような画面になれば、自分のレンタルサーバーに接続完了です!

これは今接続しているサーバーの内部を示しています。現在は2つのファイルが存在してますね。

ここにページをアップロードすれば、情報がサーバーに反映されます。

まずは自分のサーバーの状態を確認してみましょう

先ほどのサーバー情報を確認したページに【ドメイン設定】という項目があり、そこのドメイン名と書いてあるのが、これから自分がアップロードする公開用のURLです。

開いてみると、こんな画面になります

先ほどWinSCPで確認した2つのファイルの、index.htmlがこのページの部分

default_page.pngという画像が、星の画像部分ということになります。

では、現在あなたが持っているindex.htmlをここに上書きしてみましょう!

WinSCPの右側メニューに、自分のアップしたいファイルをドラッグアンドドロップすればOKです。

上書きが正しく完了すれば、ページを更新すると自分の作ったものになっていると思います!

以上がページをレンタルサーバーから借りて、そのサーバーで自分用のページを公開するまでの流れとなります。

登録などが少し手間ですが、一度登録してしまえば、あとはWinSCPを起動して接続して、アップロードするだけなので慣れてしまえば簡単です。

サーバーの公開手順まとめ

  1. レンタルサーバーのスターサーバーで会員登録をする
  2. WinSCPをインストールする
  3. サーバー情報を確認しながら、WinSCPで接続
  4. ファイルをアップロード

無料でできますので、是非試してみてください!

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

コメント

タイトルとURLをコピーしました