自分で作ったウェブページを自分のドメインで公開したい！
そんなときおすすめなのが、人気の高いレンタルサーバー 『エックスサーバー』 です。
GitHub Pages（ギットハブ・ページズ）などの無料サービスでもウェブページを公開できますが、サイト構成や複数ドメインの管理には少し工夫が必要です。
エックスサーバーなら 複数の独自ドメインをまとめて管理でき、自由度の高いサイト運営が可能。
この記事では、エックスサーバーのファイルマネージャを使ってHTMLファイルをアップロードし、独自ドメインでサイトを公開する手順 を初心者向けにわかりやすく解説します。
おもち画像付きで解説するので、専門知識ゼロでも安心して進められるよ！
エックスサーバーの契約やドメイン取得がまだ終わっていない方は、こちらの記事を先にご覧ください。
『まずは無料で試してみたい』という方は無料でWebページを公開する方法をどうぞ。
エックスサーバーで公開する理由（GitHub Pagesとの違い）
Webページを公開する方法はいくつかありますが、GitHub Pages（ギットハブ・ページズ） と エックスサーバー はとくに人気があり、初心者から上級者まで幅広く利用されています。
それぞれの特徴と違いを簡単に見ていきましょう。
GitHub Pagesの特徴と制限
GitHub Pagesは、静的サイト（決まった内容をそのまま表示するウェブサイト）を無料で公開できる便利なサービスです。
HTMLや画像などのファイルをリポジトリに置くだけで、すぐにウェブページを公開できるため、ポートフォリオや自己紹介ページなど、シンプルなサイトに向いています。
ただ、アカウントごとに『〇〇.github.io』というメインサイトを１つもてますが、複数のサイトを作りたい場合は、メインサイトの中にフォルダを作って公開する形になるため、サイトの構造や運用の自由度には少し制限があります。
WordPressのような動的サイト（動きのある仕組み）やデータベースを使った機能は利用できません。
エックスサーバーのメリット
エックスサーバー は、複数の独自ドメインをまとめて管理できる高性能レンタルサーバーです。
GitHub Pagesのような静的サイトはもちろん、WordPressなどの動的サイトにも対応しているため、
あらゆるウェブ制作が可能。
定期的な 自動バックアップ や 無料独自SSL（https化）など、セキュリティ面のサポートも備わっています。
安定した通信環境と日本語サポートがあるため、初心者でも安心してサイト運営を続けられます。
GitHub Pagesとエックスサーバーの違い
GitHub Pagesでは『〇〇.github.io』という住所をGitHubから借りて使っている状態。
その住所に『omochibigaku.com』という看板（独自ドメイン）を貼りつけることはできますが、土地そのものはGitHubの所有物です。
一方、エックスサーバーでは、土地自体を自分で所有している状態。
自分の土地なので、サイト構成を自由に変えたり、複数の家（サイト）を建てることもできます。
エックスサーバーでサイトを公開する流れ
エックスサーバーを使ってウェブサイトを公開する方法には、目的に応じて２つのパターン があります。
1つ目は、独自ドメイン（例：〇〇.com）で公開する方法。取得したドメインをエックスサーバーに追加し、１つのサイトとして公開します。
2つ目は、サブディレクトリ（例：〇〇.com/□□）で公開する方法。すでにあるサイト内にフォルダを作り、その中で新しいページを公開します。
どちらの方法もファイルマネージャからデータをアップロードして公開できますが、URL構造や使い方に少し違いがあります。
それぞれの手順を順番に見ていきましょう。
独自ドメインで公開する方法
まずは、独自ドメインで公開する手順から。
- 独自ドメインをエックスサーバーに追加
- ファイルマネージャーでデータをアップロード
- きちんと表示されるか確認
サブディレクトリで公開する方法
つづいて、サブディレクトリで公開する手順です。
- ファイルマネージャでフォルダを作成
- フォルダ内にデータをアップロード
- きちんと表示されるか確認
どちらの方法も、手順どおりに進めば、初心者でも迷わずウェブサイトを公開できます。
独自ドメイン公開とサブディレクトリ公開の違い
独自ドメインで公開する方法 は、サイト全体を１つの独立したドメイン（例：example.com）として運用できるため、複数のサイトやサービスを別々のURLで展開したい場合に向いています。
一方、サブディレクトリで公開する方法 は、既存サイトの中に新しいページを追加する形なので、関連コンテンツを１つのドメイン内で整理したい場合に最適です。
どちらを選ぶかは、目的次第。
ブランドをわけて運営したいなら『独自ドメイン公開』、既存サイトの一部としてまとめたいなら『サブディレクトリ公開』がおすすめです。
おもちあとから構成を変えることもできるので安心してね！
独自ドメインで公開する方法【３ステップ】
STEP1.独自ドメインをエックスサーバーに追加しよう
エックスサーバーがひらきました。
サーバーIDの右側にある『サーバー管理』ボタンをクリック。
サーバーパネルがひらきました。
画面左側のメニューにある『ドメイン』をクリック。
『ドメイン設定』をクリック。
ドメイン設定画面がひらいたら『ドメインを追加』ボタンをクリック。
ドメイン追加画面がひらきました。
ドメイン名に、取得した独自ドメインを入力。
『無料独自SSL』と『HTTPS転送』にチェックが入っていることを確認。
『追加する』ボタンをクリック。
これでエックスサーバーに取得した独自ドメインを追加できました。
設定状況が『反映待ち』になっていても、作業はできるので、進めていきましょう。
画面右上にある『サービス管理』をクリック。
『XServerレンタルサーバー』をクリック。
エックスサーバーに独自ドメインが追加できたら、ファイルマネージャを開いてデータをアップしていきましょう。
STEP2.ファイルマネージャでHTMLと画像ファイルをアップロードしよう
サーバーIDの右側にある『ファイル管理』ボタンをクリック。
ファイルマネージャがひらきました。
取得した独自ドメインのフォルダが表示されているので、そちらをダブルクリック。
つづけて『public_html』フォルダをダブルクリック。
『public_html』フォルダがひらきました。
画面上部にある『アップロード』をクリック。
アプロード画面がひらきました。
『ファイルを選択』ボタンをクリック。
アップロードしたいデータファイルを選択して『開く』ボタンをクリック。
アップロードしたいデータファイルが表示されました。
ファイル名の文字コードが『UTF-8』になっていることを確認。
『アップロード』ボタンをクリック。
HTMLと画像ファイルをアップロードできました。
おもちあとはサイトがきちんと表示されるか確認してみよう！
STEP3.サイトが正しく表示されるか確認しよう
取得したドメインを入力してページをひらくと、エラーメッセージが表示されているはずです。
ドメインが反映されるまで時間がかかるので、30分～数時間ほど待ってみましょう。
時間をあけてから、再度ページをひらいて、きちんとサイトが表示されていたらOKです。
おもちアイコンやボタンを押して、リンク先がひらくかもチェックしておこう！
サブディレクトリで公開する方法【３ステップ】
STEP1.ファイルマネージャで新しいフォルダ（サブディレクトリ）を作成しよう
エックスサーバーをひらいてログイン。サーバーIDの右側にある『ファイル管理』ボタンをクリック。
ファイルマネージャがひらきました。
サブディレクトリで公開したいドメインのフォルダをダブルクリック。
つづけて『public_html』フォルダをダブルクリック。
『public_html』フォルダがひらきました。
画面左上にある『新規フォルダ』をクリック。
新規フォルダ作成画面がひらきました。
フォルダ名を入力。
おもち今回は『links』というフォルダ名にしたよ！
フォルダ名の文字コードが『UTF-8』になっていることを確認。
『作成』ボタンをクリック。
『public_html』フォルダのなかに『links』というフォルダを作成できました。
STEP2.作成したフォルダにHTMLと画像ファイルをアップロードしよう
作成したばかりの『links』フォルダをダブルクリック。
『links』フォルダがひらきました。
画面上部にある『アップロード』をクリック。
アプロード画面がひらきました。
『ファイルを選択』ボタンをクリック。
アップロードしたいデータファイルを選択して『開く』ボタンをクリック。
アップロードしたいデータファイルが表示されました。
ファイル名の文字コードが『UTF-8』になっていることを確認。
『アップロード』ボタンをクリック。
HTMLと画像ファイルをアップロードできました。
STEP3.サイトが正しく表示されるか確認しよう
サブディレクトリのURLを入力してページをひらき、きちんと表示されるか確認してください。
おもちアイコンやボタンを押して、リンク先がひらくかもチェックしておこう！
サイトが表示されないときはDNSを確認しよう【DNS Checkerの使い方】
『時間をあけても表示されない…設定ミスかな…』と心配な方は DNS Checker でドメインを検索してみましょう。
サイトがひらいたら、画面左上にある検索窓に、取得した独自ドメインを入力。
レコードの種類は『A』のままでOK。
そのまま『Search』ボタンをクリック。
いろんな国でエックスサーバーのIPアドレス『例：85.131.213.25』が表示されていたらOK。
ドメインの設定はできているので、反映されるまで待ちましょう。
エックスサーバーのIPアドレスは、サーバーによって異なる場合があります。正しい数値はサーバーパネルの『サーバー情報』で確認してください。
エックスサーバー公開でよくある失敗パターンと対処法
まとめ｜エックスサーバーで独自ドメインサイトを公開する方法
GitHub Pagesは無料で気軽に使えるのが魅力ですが、静的サイトに限定されていたり、サイト構成にいくつか制限があります。
エックスサーバーなら複数のドメインをまとめて管理でき、動的サイト（動きのある仕組み）にも対応しているため、自由度の高い運営が可能です。
エックスサーバーでウェブサイトを公開する流れは、つぎのとおり。
- 独自ドメインをエックスサーバーに追加
- ファイルマネージャーでデータをアップロード
- きちんと表示されるか確認
- ファイルマネージャでフォルダを作成
- フォルダ内にデータをアップロード
- きちんと表示されるか確認
手順どおりに進めば、初心者の方でもスムーズにウェブサイトを公開できます。
おもちバイブコーディングでいろんなサイトを作っちゃおう！
