プログラミング

【模写】Webサイトを公開する手順を3ステップで解説【無料サポートあり】

[st-kaiwa1]自分でコーディングしたサイトや模写を公開したいけどどうすればいいの?ドメインとかサーバーとか必要らしいけど、なにがいいのかわからない…[/st-kaiwa1]

こういった疑問に答えます。

本記事の内容

  • Webサイト公開に必須のサーバー・ドメインを簡単に解説
  • ドメインとサーバーの紐付け方
  • 模写サイトの公開に必須なアクセス制限のかけ方

今回は、上記をマスターしましょう。

そもそもサーバー・ドメインとは?

Webサイトの公開には「サーバー」と「ドメイン」が必要になります。

サーバーとは?

サーバーとは、ホームページを表示するために必要となる「情報が入っている場所」のことです。

サイトを見たい人から「このページがみたい」とくるのに対し、「取り決められた情報をサイト訪問者に提供する」のがサーバーの役割です。

これによって、サイトをみたい人にWebサイトのページが表示されます。

ドメインとは?

ドメインとは、「サイトの住所」を表すものです。

自分の好きなように決めることができ、どのサイトにも必ずドメインがあります。

例えば、この「だんブログ」では「https://prog-anchor.com/」の「prog-anchor.com」部分がドメインです。

割となんでもいいですが、後から変更ができないので注意が必要です。

Webサイトを公開する3ステップ

それでは模写サイトを実際に公開していきましょう。

Webサイト公開の手順

  1. ドメインを取得する
  2. サーバーにドメインを登録する
  3. FTPツールで模写のファイルをアップロードする

一つ一つ丁寧に解説していきます。

つまずいたら、僕のTwitterにDMください。無料でサポート致します!

【Webサイトの公開手順 1】ドメインを取得しよう

ドメインは「ムームードメイン」で取得しましょう。

お名前.com」でもいいですが、不要なメールがめっちゃくるので、僕はムームードメインを利用してます。(設定すればこなくなります)

それでは早速、ドメインを取得する流れをを解説していきます。

1. ムームードメインにアクセスします

2. 自分の好きなドメイン名を入力し、カートに追加する

ドメインを入力し、検索するをクリックすると一覧が表示されるので、ここで好きなものをカートに追加します。

■「.com」や「.jp」で検索順位は変わるの?

どれを選んでも基本的に変わりません。

しかし、法人しか取得できない「.co.jp」は検索順位的に優遇されやすい傾向にあるようです。

3. ログインor新規ユーザー登録をして決済にすすむ

ムームードメインの会員登録は、Amazonアカウント/Facebookアカウントでも可能なので便利ですね。

4. 申し込みページで各種設定する

設定ポイント

  • WHOIS公開情報を「弊社の情報を代理公開する」に変更
  • ネームサーバー(DNS)を「heteml(ヘテムル)」に変更
  • 契約期間は「1年」

この部分結構重要なので、しっかり設定しましょう。

この記事ではサーバーは「heteml」を使います。

なので、ネームサーバーを予め「heteml」としておくことで、後の設定が楽になります。(後から変更もできるのでミスってもOKです。)

【注意】有料オプションサービスのチェックはしない

ドメイン取得時に、有料オプションサービスとしていろいろ並んでいますが、ここは無視しましょう。

基本全て不要です。誤ってチェックしないように気をつけましょう。

5. 決済情報を入力し、ドメインを取得する

決済情報を入力し、利用規約に同意し「取得する」のボタンを押します。

15秒ほど待つと、取得完了の画面に移ります。

これでドメインの取得は完了です。

お疲れ様でした。

これでドメインの取得が完了です。次にサーバーにドメインをアップロードしましょう。

【Webサイトの公開手順 2】サーバーにドメインをアップロードしよう

自分で作ったサイトをネット上に公開できるまであと少しですので、頑張っていきましょう。

サーバーは僕が個人的におすすめな「ヘテムル」を使います。

ここは「エックスサーバー」でもいいと思います。

ヘテムル」は、僕や僕がお世話になっている制作会社も使っていますので、サーバーは「ヘテムル」にしておけば間違い無いです。

それでは、サーバーにドメインをuploadしましょう!

1. ヘテムルにアクセスし、ログインしてください。

アカウントの登録がまだの方はこのタイミングで済ませましょう。

hetemlは15日間無料で使えるので、合わなかった解約OKです!

ヘテムルサーバーのどのプランがいいの?

僕はベーシックプランを契約してます。契約期間はひとまず3ヶ月で契約しましょう。(万が一Web制作で挫折したときのリスクを最小にできます。)

2. ログインし、「ドメイン・メール」をクリックします。

こちらはログインするとこのようなページが表示されますので、右側のメニューの「ドメイン・メール」をクリックします。

3. 「独自ドメインを設定する」をクリックします。

ドメイン一覧ページが表示されますので、真ん中の青いボタンの「独自ドメインを設定する」をクリックする。

4. 取得したドメインを入力します。

「独自ドメインを設定する」ボタンを押すと、「独自ドメインの登録」ページに遷移します。

「取得されているドメイン」に先程取得したドメインを画像のように入力します。

「公開フォルダ」には自動で入力されるので、触らずでオッケーです。

ちなみに、この公開フォルダに模写のファイルを入れます。

すべて入力が完了したら、「独自ドメインをチェックする」をクリックします。

「独自ドメインをチェックする」をクリックするとこういった注意文が出ますが、無視してOKです。もう一度ボタンを押しましょう。

これでドメインの登録が完了です。

「◯◯.com の登録処理を開始しました。」の表示が出たらドメインの登録が完了です。

ドメインの登録が完了すると以下の画像のような表示になります。あとちょっとでサイトを公開できます!

【Webサイトの公開手順 3】WebサイトをFileZillaでファイルをアップロードしよう

いよいよ模写をサイトにアップロードしていきましょう。

模写を、公開するにはFTPツールの「FileZilla」を使っていきます。(無料です)

FileZillaのダウンロードはこちらから

FTPツールでファイルをアップロードは、僕も苦戦したので丁寧に解説していきます!

1. ヘテムルで「FTPアカウント」ページで、FTP情報を確認する

ファイルのアップロードに必要なFTPアカウント情報を確認していきます。

ヘテムルの会員ページの右のメニューの「FTPアカウント」のページにアクセスします。

上記のページが表示されるので、必要な情報を確認しましょう。

ファイルのアップロードに必要な情報

  • ユーザー名
  • ホスト名
  • パスワード

確認できたら、FileZillaにて模写のファイルをアップロードしていきます。

2. FileZillaでヘテムルに接続する

FileZillaを開くとこんな感じ。

左側にローカルのファイル、右側にサーバー上のファイルが表示されます。

上部の入力欄に「ホスト(H)」「ユーザー名」「パスワード」を一通り入力し、「クイック接続」ボタンを押します。

赤丸の部分が「“/” のディレクトリ リストの表示成功」となっていればOK。

接続できない場合は、FTP情報が間違っている可能性が高いので、入力内容を確認しましょう。

3. 先ほど取得したドメインのファイルを開き、模写ファイルの中身をコピペする

接続が完了すると、右側に「web」というファイルが表示されます。

「web」ファイルを開くと、ドメインを設定した際に自動で設定された「公開ファイル」の名前が一覧で表示されます。

自分が取得したサイト公開用のドメインと一致するファイルを開き、そこに模写のファイルをドラッグ&ドロップします。

「”◯◯.com”のディレクトリ リストの表示成功」と表示されたら、アップロード完了です。

4. サイトを確認してみよう

ドメインにアクセスしてみましょう。

ちゃんと模写のサイトが表示されているはずです。

これで模写サイトの公開が完了です。お疲れさまでした!

【模写サイトなら絶対やろう】アクセス制限のかけ方

模写サイトは「アクセス制限」をかける必要があります。アクセス制限をかけないと著作権的にNGです。

それではアクセス制限のかけ方について、順番に解説していきます。

1. ヘテムルの「アクセス制限 」ページにアクセス

ヘテムルの会員画面右側の「アクセス制限 」をクリック

2. アクセス制限を新規作成し、必要項目を入力する

アクセス制限ページの新規作成をクリックすると、このような入力画面に入ります。

入力する項目は以下の通り

  • アクセス制限フォルダ(模写ファイルを入れたフォルダ)
  • 認証フォームタイトル(なんでもOK)
  • アカウント名(なんでもOK)
  • パスワード(なんでもOK)

入力完了後、「作成する」をクリックしてください。これにてアクセス制限の設定が完了です。

模写ファイルの確認は、ドメイン一覧 > 詳細を表示 のドメイン下の青い部分 「/web/◯◯」の◯◯の部分のみを入力します。

5. アクセス制限をしたフォルダにアクセスしてみよう

このように認証フォームが表示されれば完了です。

まとめ

模写サイトの公開、お疲れさまでした。

サーバー・ドメインを管理する知識はこれからWeb制作を続けるにあたって必要なものなので、いずれ絶対に役に立ちます!

学習を引き続ける方は、こちらの記事でこれからやることをしっかり把握しましょう。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”160″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

模写について詳しく知りたいって方はこちらの記事がおすすめです。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”335″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

ここまで継続できた方は、あとちょっとで稼ぐフェーズに入れます。どんどん行動を起こしていきましょう!!

ABOUT ME
だん
だん
Web制作フリーランス / スキルなし文系大学生 ▶︎ 就職に絶望 ▶︎プログラミングに出会う ▶︎ 毎日積み上げ ▶︎ 6ヶ月で売り上げ80万円 / TwitterではWeb制作に関することを発信してます。