13 XSERVER Static(無料)を使って、サーバーへ公開する

目次

Webページを公開するには

Webページを外部に公開するには、「動く場所=サーバー」「サイトの名前=ドメイン」「技術要件=SSLなど」がそろっている必要があります。

例えば、WordPressを使用したサイトの場合は、PHPやMySQL、メールが動作する必要があります。

また、独自ドメインといって、年間単位で好きなドメイン名を契約して、運用する場合があります。ビジネスでの利用や、個人でも長く運営したいサイトでは、独自ドメインを取得するのが一般的です。

今回は学生向けを主としているので、クオリティが高く安心な無料サーバーを使って、サイトを公開する手順を説明していきます。

XSERVER Staticを契約すると、1GBまでのディスク容量で、HTTPS接続可能(無料のSSL使用可)、独自ドメインを取得しなくても、https://<サーバーID>.static.jp/ というURLでサイトを公開できます。
→メールアドレスの利用はできません。独自ドメインは、有料で取得して設定することは可能です。

サーバーを契約する

XSERVERへのアカウント登録を行い、次にXSERVER Staticを申し込みます。

XSERVER Staticの申し込みページへ行く

ブラウザにて、XSERVER Static へアクセスします。
https://static.xserver.ne.jp

お申込み」から、新規契約を行います。

新規お申込み」のボタンをクリックします。

新規アカウントのお申込みフォームに入力する

以下の内容を入力して「次へ進む」をクリックします。

  • メールアドレス
  • パスワード
  • 登録区分(個人・法人)
  • 名前
  • フリガナ
  • 郵便番号
  • 住所
  • 電話番号
  • 規約に同意

メールアドレスの正当性チェック

契約時のメールアドレスへ確認コードが送信されるので、内容を確認し、入力して「次へ進む」をクリックします。

内容を確認し、アカウント登録します

入力したアカウント情報が表示されるので、「この内容で登録しサーバー申し込みへ進む」をクリックします。

本人認証を行います

電話番号による本人認証を行います。この例では、SMS認証で進めています。

XSERVER Staticを申し込む

サーバーIDを決めます。
自動のものでもよいですし、「自分で決める」にて、ユニークな名前を入力することも可能です。
規約に同意して「お申込み内容を確認する」をクリックします。

「申し込む」をクリックします。

XSERVER Static管理画面が表示される

XSERVER Staticの管理画面が表示されます。
https://secure.xserver.ne.jp/xapanel/xstatic/index

ファイル管理」をクリックすると、ブラウザでファイルをアップロードできる「ファイルマネージャ」を起動できます。

「サーバー設定」をクリックすると、現在の設定状況を確認することができます。

データをアップロードする

XSERVER Staticの管理画面の「ファイル管理」ボタンから、ファイルのアップロードを行うことができます。
https://secure.xserver.ne.jp/xapanel/xstatic/index

初期状態を確認する

.htaccessというファイルは、非常に重要です。削除してはいけません。
Webサーバー用の設定ファイル(フォルダ毎の設定が入ります)です。

default_page.pngと、index.htmlは、初期状態のトップページ用のファイルです。
公開する際には、上書きしてしまって構いませんが、index.htmlは常に置いておきましょう

「権限」は、ファイルごとに設定できるアクセス権です。初期設定は以下の通りです。

  • フォルダ…705
  • .htaccess…644
  • ファイル…604

777という権限は、フルアクセスを許可することになります。
通常は、サーバー会社が設定したデフォルト値には意味があるので、よくわからない場合には、初期値のパーミッションを設定しておきましょう。安易に変更すると、セキュリティが甘くなってしまう恐れがあります。

フォルダを作る

この機能からのアップロードでは、フォルダ構成ごと移動することはできません
そのため、フォルダ構成がある場合は、予めフォルダを作成します。

上部の「新規フォルダ」をクリックし、名前を半角英数字で入力し、作成先を確認の上「作成」をクリックしましょう。

必要なフォルダを作成し終わった例です。
この例では、https://webstudy.static.jp/scroll_animation/ へ素材をアップロードします。

フォルダ構成・名称は制作の状況によって異なるので、確認しながらフォルダを作成しましょう。
(事前に、半角英数字で作成すること、ファイルやフォルダ名には日本語を使用しないこと、に注意しましょう)

ファイルをアップロードする

作成したフォルダ、またはルート(TOPの場所)へ、各ファイルをアップロードしましょう。
アップしたい場所へ移動します。(左側のフォルダ構成で、該当箇所をクリックしておきます)

「アップロード」をクリックし、ファイルを選択またはドラッグします。(複数選択可)
「アップロード」をクリックすると、アップロードが始まります。

アップロードが完了したら、内容に間違いがないことを確認しましょう。
「css」「js」「image」など、全てのフォルダ内にファイルをアップロードします
TOPページ用のHTMLは、トップの場所に上書きしましょう。

ブラウザから表示確認を行う

公開URLへアクセスし、ブラウザで表示できるか、確認しましょう。

検索エンジンへインデックスを登録する

検索結果に表示されるまでには、通常、時間がかかります。
検索エンジンへのインデックス登録を早めるには、サーチコンソール(Google用)などのサイト管理者向け機能を使用します。

Search Console
https://search.google.com/search-console/about?hl=ja

Search Consoleを使用するには、Googleアカウントが必要です。
「今すぐ開始」から始めます。

Search Consoleへサイトを登録する

通常、ドメイン丸ごとではなく、サイト単位で登録することが多いです。
右側「URLプレフィックス」にサイトのURL(トップページのある位置)を入力し、「続行」します。

所有権の確認を行います。ファイルをダウンロードするボタン(ファイル名が入っている箇所)をクリックして確認用のhtmlをダウンロードします。
(「確認」は、ファイルをアップロード後に押します)

アップロード後、「確認」ボタンをクリックすると、所有権が確認されます。

「所有権を証明しました」というポップアップが表示されたら、「プロパティへ移動」をクリックして、Search Consoleの管理画面へ移動しましょう。

URL検査を行い、インデックス登録する

Search Consoleの管理画面へ移動したら、「URL検査」をクリックします。

インデックス登録状態を確認しましょう。
URL検査では、ページ毎のURLを入れて確認ができます。

「URLがGoogleに登録されていません」と出るので、「インデックス登録をリクエスト」をクリックします。

「インデックス登録をリクエスト済み」と表示されたら、このページは完了です。
複数ページのURLがある場合は、この作業を繰り返します

大量にURLがある場合、通常はXML形式の「サイトマップ」をアップロードすることが多いです。
今回の記事では、手動でURLを登録してインデックス登録をリクエストする方法の説明にとどめていますが、数十ページにわたる大量のURLがある場合は、以下のドキュメントを参考にXML形式のサイトマップを使ってインデックス登録しましょう。

サイトマップの作成と送信
https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=ja

  • URLをコピーしました!

この記事を書いた人

目次