Web制作初心者が案件獲得前に抱える悩みの1つに
初心者きつねローカル環境でサイト作りは練習できて、かつサイトは完成したけど、これってどうやって公開すればいいの？
ということがあると思います。
僕もWeb制作を勉強したての頃は、サイトをどのように公開すればいいのかだけでなく
そもそもサイトってどのように表示されているのか分からなくて頭を抱えた時期もありました。
しかし、実際にWeb制作で稼いでいったり、仕事にしていくためにはサイトが公開される仕組みを知って
それを実現できる必要があります。
この手順は基礎的なことであると同時に
「サイトが公開されているのが確認できたら納品とします。」
とクライアントに言われる場合もあるからです（僕も実際に言われたことがあります）。
ということで、今回は自分が作ったホームページやサイトを公開する方法について
静的サイトの場合と、WordPressの場合で分けてご紹介していきたいと思います。
静的サイトの場合
まずは、静的サイトの場合です。
一応説明をしておくと、静的サイトとは「見る人によって表示内容が変化しないサイト」のことです。
ですが、ここではWordPressを利用していないサイトと思ってもらえればと思います。
①ドメイン、サーバーを契約する
では、静的サイトが完成したとしましょう（ローカル環境で確認した際に、すべて出来上がった状態）。
その際にまず取る行動は、ドメインとサーバーを契約することです。
ドメインとは、一軒家でいうところの土地に当たります。
一軒家も、土地がないと建てることができないように、ホームページやサイトもドメインがないと表示ができません。
一方、サーバーは一軒家でいうところの住所に当たります。
例えば郵便屋さんがあなたの家に手紙を届けたい時、ドメインという土地を購入し、家を建てても
住所を知らないと届けられないですよね？
それと一緒で、サーバーがないと訪問者があなたのサイトに訪れることができません。
おすすめは、ドメインはムームードメイン、レンタルサーバーはXサーバーです。
ムームードメインは、 取得できるドメイン数が多く、セキュリティ対策も徹底されいます。
Xサーバーは高速通信が特徴で、WordPressサイトを立ち上げる環境が整っています。
ムームードメインとXサーバーの契約の仕方は下の記事を参照してください。
②FTPソフトを利用してファイルをアップロードする
ドメイン、サーバーを契約したら、次はFTPソフトというものを利用してサーバーにファイルをアップロードします。
あなたのサイトを公開するには、作成したファイルをサーバー上にアップする必要がありますが
サーバーにファイルをアップするには、FTPソフトを利用して、サーバーにアクセスする必要があります。
有名なFTPソフトは
- FFFTP
- File Zilla
- cyberduck
などです。
Windows、Macの両方で利用できるものもあれば、どっちかしか使えないものもあるので注意してください。
個人的なおすすめは、cyberduckです。
サーバー上にファイルをアップロードできたら、サイト名やドメインを検索してみて実際にサイトが表示されているか確認してみましょう。
ただし、サイトを作ったばかりではGoogleのクローラーが認識していない場合もあります。
そのような場合には、2日〜1週間くらい待ってみて再度確認してみてください。
WordPressサイトの場合
続いては、WordPressサイトの場合です。
WordPressサイトを制作する場合も、最初にドメインとサーバーを取得するのですが、先ほど解説したので省略しますね。
ここからは、既にドメインとサーバーを取得している前提で話していきます。
取得したレンタルサーバーで「WordPress簡単インストール」をする
Xサーバー、ロリポップなどのレンタルサーバーでは、WordPress簡単インストールという項目があり
サイト名や管理画面のID, パスワードなどを決めるだけで初心者でも簡単にWordPressサイトを構築することができます。
今回は、Xサーバーで簡単インストールを行う手順を解説します。
まず、Xサーバーにログインをして、自分が契約したサーバー情報から「サーバー管理」に進んでサーバーパネルにアクセスをします。
そうしたら、WordPressの項目から「WordPress簡単インストール」を選択します。
WordPressをインストールしたいドメインを選択。
選択したら、「WordPressインストール」というタブをクリックして切り替え
サイトURLやサイト名、IDやパスワードなどを設定できるので、入力していきます。
テーマを設定するか決める項目もありますが、インストールした後でも設定できるので
デフォルトテーマのままで大丈夫です。
（ちなみにCocoonはブログサイト、Lightningはホームページ制作でよく利用されるテーマです。）
全ての項目を設定したら「確認画面へ進む」をクリックし、記入事項を確認し「インストール」を押します。
すると、管理画面のURLやID, パスワードが表示された画面に移りますので
指定のURLから管理画面のログイン画面に飛び、ログインします。
- 管理画面のURL
- ID
- パスワード
は、忘れないようにメモをしておきましょう。
この段階で、管理画面の設定>表示設定にて、「サイトをインデックスさせないようにする」という項目にチェックが入っていなければ、サイトは公開されているはずです。
（静的サイトの時と同様に、サイトを作ったばかりではGoogleのクローラーが認識していない場合もあるので、2日〜1週間くらい待ってみて再度確認してみてください。）
ただサイトを公開するだけならここで終了です。
しかし、作成したWordPressサイトをLightningやCocoonなどの既存テーマを利用して運用していくならいいのですが、静的サイトのように自分で作成したファイルを反映させたいなら、指定のディレクトリにそのファイルをアップロードしていく必要があります。
これは、静的サイトの際に紹介したFTPソフトを利用してもできますし、レンタルサーバーのファイルマネージャーというところから行うことも可能です。
その際は、htmlファイルをphpファイルにしたり、必要な箇所をphpの関数で書き換えたり、header.phpやfooter.phpを作ってそれを全てのファイルに読み込まれるようにしたりしなくてはいけません。
詳しく書くとこの記事だけでは収まりきらないので割愛しますが、気になった方は
「WordPress オリジナルテーマ開発」
みたいな感じで、ググってみてください。
一応、phpファイルを全て完成できたと仮定して話を進めると、それらが全てできたら自分のドメインの「themes」というディレクトリの中に好きなテーマ名を決めてディレクトリを作り、その中にphpファイルを入れていきます。
そうしたら、作成したWordPressサイトの外観>テーマエディタに反映されていますので、
ただし、このテーマエディタは、特に初心者はいじらないようにしましょう。（特にfunctions.php）
無理に触ってエラーを出てしまうと、サイトが表示されなくなってしまったり、管理画面にアクセスができなくなってしまいます。
もし、自分はコーディングできないけどテーマエディタに問題がある場合は、どのような事態になっているかにもよりますがWeb制作会社やフリーランスに早急にお願いして直してもらうことをお勧めします。
実際にサイトが検索上に表示されているか確認する方法
ここまでで、サイトを公開する手順については理解できたと思いますが
もし、実際にサイトが検索上に表示されているか確認したい場合は、Google Search Consoleを利用しましょう。
Google Search ConsoleにGoogleアカウントでログインをし、左のメニューの中から「URL検査」を選択します。
そして、検索欄に確認したいサイトのURLを入力しましょう。
きちんとインデックスされており、検索エンジン上に表示されている場合は下のように記載されます。
作ったホームページが公開できない場合の対処法
作ったホームページが公開できていない場合は、どうしたらいいのでしょうか？
前の見出しで解説したサチコのURL検査で「URLはGoogleに登録されていません」という感じで灰色で表示されている場合は、残念ながらホームページが公開されていない可能性が高いです。
作ったホームページが公開されない理由は、大きく分けて2つあります。
- 「robots.txtによりブロックされました」と表示される
- 「noindexタグにより除外されました」と表示される
①「robots.txtによりブロックされました」と表示される
まずは、「robots.txtによりブロックされました」と表示される場合。
この場合は、Googleクローラーがあなたのサイトにアクセスすることができなくなっている状態です。
robot.txtは隠しファイルと呼ばれているため通常は閲覧できませんが、「https://ドメイン名/robot.txt」とURLに打ち込むことで閲覧することができ、下のような記述がされています。
User-agent: *
Disallow: /admin/
Allow: /admin/images/
Sitemap: https://example.com/sitemap.xmlGoogleクローラーがあなたのサイトにアクセスできない場合は、この中の「Disallow」の中にサイトのURLが記述されています。
この記述を削除すれば、エラーが解消されます。
記述を削除する場合は、robot.txtをダウンロードして、テキストエディタやVSCodeなどのエディターソフトを利用して
「Disallow」内の記述を書き換えましょう。
②「noindexタグにより除外されました」と表示される
続いて、「noindexタグにより除外されました」と表示される場合の対処法です。
この警告が出ているということは、noindex設定をしているせいでGoogleクローラーがあなたのサイトにアクセスはできているが、検索にあげることができない状態です。
静的サイトの場合は、headタグ内に以下の記述が入っていないかを確認してみましょう。
<meta name="robots" content="noindex">上のmetaタグの記述が入っていると、検索上にインデックスさせないように処理をしてしまいます。
もしコーディングができない場合は、Web制作会社やフリーランスに頼んで上の記述を削除してもらいましょう。
削除してもらったら、じきにインデックスに上がってきます。
WordPressサイトの場合は、管理画面のダッシュボードの「設定 > 一般設定」から
「検索にインデックスしない」にチェックが入っている可能性があります。
このチェックを外してから変更を保存することで、インデックスに上がってきます。
noindex設定を外したら、サチコのURL検査にて「インデックス登録をリクエスト」をクリックしてしばらく待つようにしてください。
後日、Googleからインデックス登録がされているかのメールが届きます。
最後に
ということで、今回は静的サイトとWordPressサイトを公開するまでの手順を解説しました！
この記事に書いてある手順を確認して、実際にサイトを公開できたら結構感動すると思いますのでぜひ実践してみてください。
特に、案件では、実際の公開作業はWebコーダーに任せられることが多いので
Webコーダー、Webエンジニアを目指している人にとっては必須項目となります（WebデザイナーさんもWeb制作に携わるならできておいた方がいいとは思います）。
このブログでは、他にもWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひみてみてください！
コメント