ポートフォリオサイトを公開する方法。GitHub Pagesで無料公開か、レンタルサーバーか。手順と費用の違い

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

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

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

情報確認日：2026年10月1日（料金とキャンペーンは期限ごとに変わるため、申し込む前に公式ページで確認してください）

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

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

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

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

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

ここからは、公式に書かれている条件をもとに筆者の提案を述べます。

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）属性を付けると、送信を受け付ける仕組みです。Netlifyの料金ページでは、フォームの送信はクレジットを消費せず無制限とされています。ただし、この機能は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年10月7日に料金ページで確認した金額（税込）と、それをもとに筆者が計算した支払い総額です。

初期費用は0円です。料金ページでは、12か月以上の割引後の金額に「2026/10/5 17:00 - 2026/11/4 17:00までのキャンペーン価格」と注記されています。この期間に新規で申し込むと、初回の利用料金が12か月契約で10%、24か月契約で20%、36か月契約で30%安くなります。期間前に申し込んだサーバーは、期間中に支払ってもキャンペーンの対象外です。2026年10月5日17:00まで行われていた半額キャッシュバックは終了しました。キャンペーンの有無にかかわらず、申込み時には契約期間分の金額をまとめて払います。2026年11月4日17:00を過ぎた後に申し込む場合は、公式の料金ページで金額を確認してください。

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

レンタルサーバーをエックスサーバーとConoHa WINGで比べたい方は、次の記事で契約期間別の支払総額と、独自ドメインが無料になる条件の違いを確認できます。

関連記事

エックスサーバーとConoHa WINGの比較。ブログやAIで作ったサイトに合うのはどちら？料金・無料ドメインの条件・AIからの公開機能

エックスサーバーとConoHa WINGを、契約期間別の料金と支払総額、長期契約の割引とキャンペーンの期限、独自ドメインが無料になる条件、試し方、AIエージェントから公開する公式スキルで比較。用途別の選び方もまとめました。

独自ドメインでポートフォリオを公開したい人へ（PR）

エックスサーバーは、HTMLのポートフォリオをファイルマネージャで公開できるレンタルサーバーです。独自ドメインのメールアドレス、メールフォーム、WordPressも1つの契約で使えます。仕事の相談を受けられる形でポートフォリオを公開したい人の候補になります。

• スタンダードプランは月あたり693〜1,320円（税込）で、契約期間分を一括前払いします。12か月以上の金額は2026年11月4日17:00までのキャンペーン価格です。
• 独自ドメインの無料特典は、スタンダードでは12か月以上の契約と自動更新設定の有効化が条件です。2026年11月4日17:00までの新規申込みは、初回の利用料金が12か月契約で10%、24か月契約で20%、36か月契約で30%オフです。
• 全プランに10日間の無料お試しがあります。コードを公開してよく、フォームも不要なら、GitHub Pagesで足ります。

エックスサーバーの料金・申込みページを見る

料金・条件は2026年10月7日に公式サイトで確認した内容です。2026年11月4日17:00のキャンペーン終了後は、公式の料金ページで最新の表示を確認してください。

ポートフォリオを公開した後に読みたい記事

ポートフォリオを公開した後、独学を続けるかスクールで学ぶかを考えている方は、次の記事で判断の目安と、無料カウンセリングで確かめることを確認できます。

関連記事

プログラミングは独学とスクールのどちらにする？ロードマップを終えた人の次の一歩と、無料カウンセリングで確かめること

HTML/CSSからポートフォリオまで独学で進めた人が、次にJavaScript・WordPress・PHPへ進むとき、独学を続けるかスクールに通うかの判断基準をまとめました。公式の無料資料、Winスクールの講座ごとの料金と前提条件、無料カウンセリングで確かめたい7項目も整理しています。

Claude CodeやCodexで作ったサイトも公開したい方には、次の記事が参考になるはずです。GitHub Pages以外の無料の置き場所と、AIに公開作業まで任せるときの注意をまとめています。

関連記事

Claude Code・Codexで作ったHTMLサイトを公開する方法。無料の置き場所とレンタルサーバーの違い

Claude CodeやCodexで作ったHTMLサイトを公開する方法を、GitHub Pages・Cloudflare Pages・Netlifyなど無料の置き場所の範囲と手順、AIにpushを任せるときの注意、メールやPHPが要る場合のレンタルサーバーの料金・契約条件まで公式資料で整理しました。

ロードマップの前の回も、公開の前に見直しておくと役に立つでしょう。HTML/CSS/レスポンシブ編（第1回）ではポートフォリオを作る前に身につける基本を、サイト模写編（第2回）では模写の進め方と模写したページを公開しない理由を説明しています。ポートフォリオに載せる内容とデザイン・素材の用意は、ポートフォリオサイトの作り方（第3回）にまとめました。

ポートフォリオに載せてよい条件で練習用の作品を作りたい方は、コーディング練習用のデザインカンプの無料配布を使えます。GitHubのアカウントのままエディタでAIに補助させる方法と無料プランの範囲は、GitHub Copilotの使い方の記事で確認できます。

参考にした公式資料

• 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、Credit-based pricing plans
• エックスサーバー：料金プラン、最大30%オフキャンペーン（2026年10月5日〜11月4日）
• エックスサーバー：ドメイン設定、ファイルマネージャ、メールフォーム、メールアカウントの追加、WordPress簡単インストール