ポートフォリオサイトを公開する方法。GitHub Pagesとレンタルサーバーのどちらにする？手順と費用の違い

PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。

ポートフォリオサイトが自分のパソコンの中で完成した。次は、応募先や仕事の相談相手にURLを渡せるように、インターネットに公開する番です。調べると「GitHub Pagesなら無料」「独自ドメインとレンタルサーバーで公開すべき」と両方の意見があり、どちらにすればよいか迷うところです。

HTMLとCSSで作ったポートフォリオなら、GitHub Pagesを使って無料で公開できます。ただし、無料のGitHub Freeではサイトのファイルを置くリポジトリを公開にする必要があり、PHPで動く問い合わせフォームは使えません。独自ドメインのメールアドレスや問い合わせフォームも用意したい場合、WordPressで作った場合は、エックスサーバーのようなレンタルサーバーが候補になります。この記事では、両者の違いと選び方、それぞれの公開手順と費用を、公式ドキュメントと公式マニュアルに沿って説明します。

情報確認日：2026年9月24日（料金とキャンペーンは変わりやすいため、申し込む前に公式ページで確認してください）

GitHub公式ドキュメントとエックスサーバーの公式マニュアル・料金ページをまとめた解説です。プログラミング独学ロードマップ 第3回（ポートフォリオサイトの作り方）の続きとして、作り終えたサイトを公開するところを扱います。

GitHub Pagesとレンタルサーバーは何が違う？

2026年9月24日にGitHub公式ドキュメントとエックスサーバーの公式ページで確認した条件を、ポートフォリオを公開する場面に絞って並べました。レンタルサーバーは、エックスサーバーのいちばん安いスタンダードプランで比べています。

比べる点	GitHub Pages（GitHub Free）	レンタルサーバー（エックスサーバー スタンダード）
費用	0円（独自ドメインを使う場合はドメイン代だけかかる）	月あたり990〜1,320円（税込、契約期間で変わる。期間分を一括前払い）
URL	ユーザー名.github.io。独自ドメインも使える	独自ドメイン。契約時の初期ドメイン（サーバーID.xsrv.jp）も使える
置けるもの	HTML・CSS・JavaScriptなどの静的なファイル	静的なファイルに加えて、PHP・WordPress・データベース
問い合わせフォーム	PHPのフォームは動かない	サーバーパネルからメールフォーム（CGIツール）を設置できる。PHPのフォームも置ける
独自ドメインのメール	なし	メールアカウントを作れる
コードの公開	リポジトリを公開にするのが条件	公開用のフォルダ（public_html）に置くだけで、作業用のコードを公開する必要はない
容量などの上限	公開サイト1GBまで、帯域は月100GBが目安	ディスク500GB（NVMe）
始めるのに必要なもの	GitHubのアカウント	サーバーの契約（10日間の無料お試しあり）。独自ドメインで公開するならドメインも

ポートフォリオを見る側から見ると、どちらで公開してもページの見え方は同じです。違いが出るのは、URL（独自ドメインかどうか）、問い合わせを受ける手段、WordPressを使うかどうか、そして毎月の費用です。

どちらを選ぶ？目的別の考え方

公式に書かれている条件をもとにした、筆者の提案です。

GitHub Pagesが向く人

• 学習の成果として、まず1つ公開してみたい
• HTMLとCSS（とJavaScript）だけで作っていて、問い合わせはメールアドレスやSNSへの案内で足りる
• コードを見られても困らない。むしろ応募先にコードも見てもらいたい
• 月額の費用をかけたくない

レンタルサーバーが向く人

• 制作の仕事を受けたいので、独自ドメインのURLとメールアドレス（例：info@自分のドメイン）を名刺代わりにしたい
• ポートフォリオに問い合わせフォームを付けたい
• ロードマップ第3回で紹介したように、WordPressでポートフォリオを作った
• 作品のコードを公開したくない

迷う場合は、GitHub Pagesで無料公開して応募や相談に使い始め、仕事を受ける段階になったらレンタルサーバーと独自ドメインに移す順番でも遅くないと筆者は考えます。HTMLとCSSのファイルはそのまま移せるので、作り直す必要はありません。独自ドメインだけ欲しい場合は、ドメインを取得してGitHub Pagesにつなぐ方法もあります（後述）。

公開する前に確認すること

公開すると、URLを知っている人は誰でもページとファイルを見られます。次の4点を先に確かめてください。

1. 模写したページを作品として載せていないか。ロードマップ第2回（サイト模写編）では、模写は自分のパソコンの中で完結させ、公開やポートフォリオへの掲載はしないようにお願いしています。GitHubの公式ドキュメントでは、学習のために既存サイトを写したものをGitHub Pagesに置くこと自体は禁止されていませんが、コードを自分で書くこと、利用者のデータを集めないこと、元のサイトと無関係で学習目的だと目立つように表示することが条件になっています。見本にしたサイトの権利の問題は別に残るので、ポートフォリオには自分で作ったものだけを載せるほうが安全です。
2. 画像やアイコンの利用条件を守っているか。素材サイトの写真やAIで作った画像は、それぞれのサービスの利用条件の範囲で使います。ロードマップ第3回で紹介した素材サイトも、条件は各サイトの規約で確認してください。
3. 載せたくない個人情報が入っていないか。住所、電話番号、本名など、ページには出していなくても、HTMLのコメントや画像のファイル名に残っていることがあります。GitHub Pagesの場合はリポジトリ自体が公開になるので、サイトに使わないメモや下書きのファイルも一緒に上げないようにします。
4. リンクと画像のパスが正しいか。パソコンでは表示できていても、フォルダ構成が変わると画像が出なくなることがあります。後で説明するプロジェクトサイト（ユーザー名.github.io/リポジトリ名）で公開する場合、「/css/style.css」のように / から始まる書き方では、リポジトリ名の分だけ場所がずれるので、「css/style.css」のような相対パスにしておくと安全です。

GitHub Pagesでポートフォリオを公開する手順

ポートフォリオ本体は、GitHub Pagesの「ユーザーサイト」として公開するのが分かりやすい形です。ユーザーサイトはアカウントごとに1つだけ作れて、URLは「ユーザー名.github.io」になります。GitHub公式ドキュメント（英語）の手順を、Gitのコマンドを使わずブラウザだけで進める形で説明します。

1. GitHubにログインし、画面右上の「＋」から New repository を選びます。
2. リポジトリ名に「ユーザー名.github.io」と入力します（ユーザー名に大文字が含まれる場合は小文字にします）。公開範囲は Public を選び、Add README をオンにして Create repository を押します。
3. ファイル一覧の上の Add file から Upload files を選び、index.html、css・images などのフォルダをドラッグ＆ドロップしてコミットします。ブラウザから上げられるのは1ファイル25MiBまで、一度に100ファイルまでです。背景に動画を使っている場合は、ファイルの大きさに気をつけてください。
4. Settings を開き、左側の「Code, planning, and automation」にある Pages を選びます。「Build and deployment」の「Source」が Deploy from a branch になっていることを確認し、ブランチに main、フォルダに /（root）を選んで Save を押します。
5. Pagesの画面の Visit site から開くか、ブラウザで「https://ユーザー名.github.io」を開きます。変更が公開されるまで最大10分ほどかかることがあります。

GitHub Pagesは、公開するフォルダの一番上にある index.html を入口として探します。index.html がフォルダの中に入り込んでいると表示されないので、アップロードしたときの並びを確かめてください。公開後にスマートフォンで開き、レイアウトと画像を確認しておくと安心です。

作品ごとに別のURLで公開する（プロジェクトサイト）

ポートフォリオに載せる作品（自分で作ったLPや小さなツール）も公開したい場合は、作品ごとにリポジトリを作り、同じ手順で Pages を有効にします。これを「プロジェクトサイト」と呼び、URLは「ユーザー名.github.io/リポジトリ名」になります。プロジェクトサイトはリポジトリごとに1つ作れるので、ポートフォリオの実績欄から各作品のURLへリンクできます。

独自ドメインをつなぐ場合

取得した独自ドメインでGitHub Pagesのサイトを表示することもできます。公式ドキュメントの流れは次のとおりです。

1. 先にGitHubの設定でドメインの所有確認（verify）をしておきます。GitHubは、ほかの人にドメインを使われる乗っ取りを防ぐため、これを勧めています。
2. リポジトリの Settings → Pages の「Custom domain」にドメインを入力して Save を押します。
3. ドメインを取得した会社のDNS設定で、www付きのサブドメインならCNAMEレコード、wwwなしのドメインならAレコードなどを、公式ドキュメントに載っている値で追加します。反映まで最大24時間かかることがあります。
4. 証明書が発行されたら、Pagesの画面で Enforce HTTPS を選びます。

ユーザーサイトに独自ドメインを設定すると、同じアカウントのプロジェクトサイトも既定で「独自ドメイン/リポジトリ名」で表示されます。GitHubは、wwwなしのドメインを使う場合もwww付きの設定をあわせて行うことを勧めています。

問い合わせフォームはどうする？

GitHub PagesではPHPが動かないので、PHPで書いたメールフォームは送信できません。GitHub Pagesのままにするなら、問い合わせ欄はメールアドレスやSNSのアカウントへの案内にしておくのが手軽です。フォームの送信を受け付ける機能を持つホスティングサービスを使う方法もあります。たとえばNetlifyでサイトを公開する場合は、フォームの検出を有効にしてformタグに data-netlify="true"（または netlify）属性を付けると送信を受け付けられ、公式ドキュメントでは送信の受け付けにクレジットを消費しないと書かれています（GitHub Pagesで公開したサイトでは使えません）。独自ドメインのメールで受け取りたい場合は、次に説明するレンタルサーバーのほうが素直です。

エックスサーバーでポートフォリオを公開する手順

エックスサーバーの公式マニュアルに書かれている流れです。HTMLとCSSで作ったポートフォリオなら、ブラウザで使えるファイルマネージャでアップロードできます。

1. サーバーを申し込みます。全プランに10日間の無料お試しがあります。独自ドメインの無料特典は、スタンダードプランでは12か月以上の契約（12か月で1つ、24か月以上で2つ）と、自動更新設定を有効にすることが条件です。
2. サーバーパネルの「ドメイン設定」で「ドメインを追加」を選び、ドメイン名を入力して「追加する」を押します。無料独自SSLの設定も同時に追加されます。反映まで数時間〜最大24時間ほどかかる場合があります。
3. ファイルマネージャにログインし、「ドメイン名」フォルダの中の「public_html」を開いて、「アップロード」から index.html と css・images などのファイルを上げます。公式マニュアルでは、サイトのデータは「ドメイン名/public_html/」の下に置くよう書かれています。
4. ブラウザで「https://ドメイン名/」を開いて表示を確かめます。

問い合わせフォームを付ける場合は、サーバーパネルの「メールフォーム(CGIツール)」から「新規インストール」を選び、フォルダ名、管理画面のIDとパスワード、受信するメールアドレスを入れて「インストールする」を押すと、メールフォームを設置できます。できたフォームのURLを、ポートフォリオの問い合わせボタンのリンク先にします。受信用のメールアドレスは、サーバーパネルの「メールアカウント設定」で独自ドメインのアドレスを作れます。ただし、10日間の無料お試し期間中はメールアカウントを追加できないと公式マニュアルに書かれています。

WordPressでポートフォリオを作った場合は、サーバーパネルの「WordPress簡単インストール」で公開先にWordPressを入れ、ロードマップ第3回で紹介した All-in-One WP Migration のような移行用のプラグインで中身を移す流れになります。エックスサーバーのマニュアルには、WordPressを「https://ドメイン名/」で表示したい場合は、インストール先を「ドメイン名/public_html/」にするよう書かれています。

費用はいくらかかる？

エックスサーバーのスタンダードプランは、契約期間を選んで期間分を一括で前払いします。2026年9月24日に料金ページで確認した金額（税込）と、それをもとに筆者が計算した支払い総額です。

契約期間	月あたりの料金	申込み時に払う金額（計算値）
3か月	1,320円	3,960円
6か月	1,210円	7,260円
12か月	1,100円	13,200円
24か月	1,045円	25,080円
36か月	990円	35,640円

初期費用は0円です。料金ページでは、上の月あたりの金額も「2026年9月7日17:00から10月5日17:00までのキャンペーン価格」として表示されています。同じ期間の新規申込みでは、12か月以上の契約で利用料金の半額がキャッシュバックされるキャンペーンも行われています（スタンダード12か月なら6,600円、36か月なら17,820円）。キャッシュバックを申請できるのは、サーバーを申し込んでから満6か月以上使った後で、その時点で契約が終わっていると対象外です。キャンペーンの有無にかかわらず、申込み時には契約期間分の金額をまとめて支払う点に注意してください。

GitHub Pagesで公開する場合は0円です。独自ドメインをつなぐ場合のドメイン代は、ドメインを取得する会社と種類（.com、.jp など）で変わります。

エックスサーバーとConoHa WINGの料金・無料ドメインの条件・AIから公開する機能の違いを知りたい方は、次の記事で確認できます。

ロードマップの前後の記事

• プログラミング独学ロードマップ【HTML/CSS/レスポンシブ編】を読んでいただくと、ポートフォリオを作る前に身につけるHTML・CSSとレスポンシブの学び方が分かります。
• プログラミング独学ロードマップ【サイト模写編】を読んでいただくと、模写の進め方と、模写したページを公開しない理由が分かります。
• ポートフォリオサイトの作り方【プログラミング独学ロードマップ 第3回】を読んでいただくと、公開する前のポートフォリオに載せる内容と、デザイン・素材の用意のしかたが分かります。
• コーディング練習用のデザインカンプの無料配布を読んでいただくと、ポートフォリオに載せてよい条件で練習用の作品を作る方法が分かります。
• GitHub Copilotの使い方を初心者向けに解説を読んでいただくと、GitHubのアカウントのままエディタでAIに補助させる方法と無料プランの範囲が分かります。

Claude Code・Codexで作ったHTMLサイトの公開先（無料の置き場所とレンタルサーバー）の選び方を知りたい方は、次の記事で確認できます。

参考にした公式資料

• GitHub Docs：What is GitHub Pages?
• GitHub Docs：Creating a GitHub Pages site
• GitHub Docs：GitHub Pages limits
• GitHub Docs：Quickstart for GitHub Pages
• GitHub Docs：Configuring a publishing source for your GitHub Pages site
• GitHub Docs：Adding a file to a repository
• GitHub Docs：About custom domains and GitHub Pages、Managing a custom domain for your GitHub Pages site
• GitHub Docs：Securing your GitHub Pages site with HTTPS
• Netlify Docs：Forms setup
• エックスサーバー：料金プラン、半額キャッシュバックキャンペーン
• エックスサーバー：ドメイン設定、ファイルマネージャ、メールフォーム、WordPress簡単インストール