Web制作初心者が案件獲得前に抱える悩みの1つに
「ローカル環境でサイト作りは練習できて、かつサイトは完成したけど、これってどうやって公開すればいいの？」
ということがあると思います。
僕もWeb制作を勉強したての頃は、サイトをどのように公開すればいいのかだけでなく
そもそもサイトってどのように表示されているのか分からなくて頭を抱えた時期もありました。
ということで、今回は自分が作ったホームページやサイトを公開する方法についてご紹介します。
静的サイトの場合と、WordPressの場合で分けてみていきましょう！
静的サイトの場合
まずは、静的サイトの場合です。
一応説明をしておくと、静的サイトとはいわゆる
・HTML
・CSS
・JavaScript
などから構成されたサイトのことです。
①ドメイン、サーバーを契約する
では、静的サイトが完成したとしましょう（ローカル環境で確認した際に、すべて出来上がった状態）。
その際にまず取る行動は、ドメインとサーバーを契約することです。
ドメインとは、一軒家でいうところの土地に当たります。
一軒家も、土地がないと建てることができないように、ホームページやサイトもドメインがないと表示ができません。
一方、サーバーは一軒家でいうところの住所に当たります。
例えば郵便屋さんがあなたの家に手紙を届けたい時、ドメインという土地を購入し、家を建てても
住所を知らないと届けられないですよね？
それと一緒で、サーバーがないと訪問者があなたのサイトに訪れることができません。
おすすめは、ドメインはムームードメイン、レンタルサーバーは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制作会社やフリーランスに早急にお願いして直してもらうことをお勧めします。
最後に
ということで、今回は静的サイトとWordPressサイトを公開するまでの手順を解説しました！
この記事に書いてある手順を確認して、実際にサイトを公開できたら結構感動すると思いますので
ぜひ実践してみてください。
特に、案件では、実際の公開作業はWebコーダーに任せられることが多いので
Webコーダー、Webエンジニアを目指している人にとっては必須項目となります（WebデザイナーさんもWeb制作に携わるならできておいた方がいいとは思います）。
このブログでは、他にもWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひみてみてください！
＼ 最新情報をチェック ／
コメント