OfferBoxの適性診断を比較｜AnalyzeU＋と360度の違い
GitHub Pagesで就活用サイトを作る｜公開手順と提出前の確認
tennis0709closs@gmail.com
記事内に商品プロモーションを含む場合があります
GitHub Pagesなら、HTMLで作った作品紹介ページを、応募先がブラウザで開けるURLとして公開できます。
まずは1ページを公開し、第三者が開けることと、作品の目的・自分の担当が伝わることを確かめましょう。
GitHubにファイルを置くことと、Webサイトとして公開することは別の操作です。
紹介ページが表示できても、リンク先の作品が動くとは限らないため、提出前には両方を確認します。
本記事では、HTMLに触れ始めた就活生に向けて、GitHub Pagesで作品紹介サイトを作る手順と、表示されないときの確認箇所、提出時の伝え方を解説します。
【Contents】
GitHub Pagesは就活用の作品紹介サイトに使える
GitHub Pagesは、リポジトリにあるHTML・CSS・JavaScriptなどから静的なWebサイトを公開する機能です。
GitHub Freeでは公開リポジトリを利用でき、作ったページはgithub.ioのURLで閲覧できます。
プロフィールや作品の画面、使った技術、自分が実装した範囲を1ページに整理したい場合に向いています。
一方、PHPやPythonをサーバーで実行したり、利用者ごとの情報をデータベースへ保存したりする環境ではありません。
そうした機能を持つ作品は別の実行環境で公開し、紹介ページからリンクする方法を考えます。
本記事では、portfolioというリポジトリのdocsフォルダにページを置く、プロジェクトサイトの作り方に絞ります。
公開URLは「https://ユーザー名.github.io/portfolio/」という形で、ユーザー名.github.ioという専用リポジトリを使うサイトとは異なります。
最初から独自ドメインや複雑なテーマを選ぶより、公開・更新・閲覧確認を一度通すことを優先しましょう。
作品をどう評価してもらうか迷う場合は、サイトづくりと分けて、応募職種や選考での伝え方を整理すると進めやすくなります。
GitHub Pagesでサイトを作る4ステップ
ここではGitHubのWeb画面を使い、公開用の場所を作る、HTMLを保存する、Pagesを設定する、公開先を確認する順に進めます。既存の非公開リポジトリを公開へ切り替える必要はありません。
- 公開用リポジトリを用意する
- index.htmlに紹介ページを書く
- Pagesの公開元を設定する
- 公開URLと更新反映を確認する
STEP1：公開用リポジトリを用意する
GitHubにログインし、新しいリポジトリを作成する画面で、名前をportfolio、公開範囲をPublicにします。
READMEを追加する項目も選び、作成後にmainブランチがあることを確認してください。
Publicのリポジトリへ入れたファイルは、サイトに表示しないものも第三者が閲覧できます。
APIキー、個人情報、共同制作で公開許可を得ていないコードなどは入れません。
就活用に公開してよいファイルだけを新しい場所へまとめると、非公開の作業データを混ぜずに進められます。
すでに秘密情報を公開した場合は、ファイルを消すだけで解決したと考えず、該当するキーの無効化や再発行も必要です。
あわせて読みたい
GitHubを就活で見せる準備｜README・公開設定・提出の手順
STEP2：index.htmlに紹介ページを書く
リポジトリのAdd fileからCreate new fileを選び、ファイル名にdocs/index.htmlと入力します。
今回はdocsフォルダを公開元にするため、その直下のindex.htmlがトップページの入口です。
以下は、自己紹介、作品の目的、担当範囲、ソースへのリンクを持つ最小例です。
表示名や作品の説明、USERNAMEと作品リポジトリ名を自分の情報へ置き換え、Commit changesでmainへ保存します。
見栄えを作り込む前に、小さなHTMLが公開先で表示できる状態を作りましょう。
例文を残したまま提出せず、後から読む人が自分の成果とサンプルを取り違えないように整えます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>私のポートフォリオ</title>
</head>
<body>
<header>
<h1>表示名のポートフォリオ</h1>
<p>Web制作を学んでいる学生です。</p>
</header>
<main>
<section>
<h2>学習記録アプリ</h2>
<p>毎日の学習内容を振り返るために作りました。</p>
<p>担当：画面設計と学習一覧の実装</p>
<a href="https://github.com/USERNAME/STUDY-APP">
ソースコードと起動手順を見る
</a>
</section>
</main>
</body>
</html>STEP3：Pagesの公開元を設定する
リポジトリのSettingsでPagesを開き、Build and deploymentのSourceからDeploy from a branchを選びます。
続いてブランチをmain、フォルダを/docsにしてSaveを押します。
公開元として選べるフォルダは、選択したブランチのルートかdocsです。
下のGitHub公式の操作画面は、フォルダ欄が/(root)の例です。
本記事のHTMLはdocs内に置くため、画面をそのまま写さず/docsを選んでください。
入口ファイルの保存場所と、Pagesの公開元を一組で合わせることが大切です。
設定の変更には管理者またはメンテナー権限が必要で、項目が使えない場合は権限や利用プランも確認します。
STEP4：公開URLと更新反映を確認する
公開処理の後、SettingsのPagesにあるVisit siteからサイトを開きます。
portfolioというプロジェクトサイトでは、公開URLに/portfolio/が含まれます。
github.comから始まるリポジトリのURLとは別なので、提出用には実際にページを開いたURLを使ってください。
ログアウトした状態やプライベートウィンドウ、スマートフォンの幅でも確認し、作品やソースへのリンクをたどります。
一度表示できた後に短い文言を修正し、保存した更新が公開先へ反映されるところまで確かめましょう。
表示まで時間がかかる場合は、次の節で公開処理と待機を切り分けます。
サイトの準備ができたら、作品を生かせる職種や応募先の選び方も整理してください。
GitHub Pagesで表示されないときの確認箇所
表示されない原因を探すときは、ページ全体が開かないのか、一部の画像だけなのか、古い内容が残るのかを先に分けます。同じ設定を何度も保存するより、症状に対応する場所を確かめましょう。
404ならURL・公開元・入口ファイルを見る
404でページ全体が開かない場合は、まずVisit siteのURLと、自分で入力したURLを比べます。
プロジェクト名の/portfolio/を省略していないか、リポジトリ名を変更していないかも見てください。
次にPagesの公開元がmainの/docsで、実際にmainのdocs内へindex.htmlを保存したかを確認します。
入口のindex.htmlは大文字・小文字も一致させる必要があり、Index.htmlは同じ名前ではありません。
URL・公開元・入口ファイルの3点を対応させて見ると、直す場所を絞れます。
それらが合っていれば、Actionsで公開処理が成功しているかを確認し、サービス側の障害情報も切り分け材料にします。
画像やCSSだけ出ないならパスを見る
本文は読めるのに画像やCSSだけが出ないときは、そのファイルへのパスを確認します。
docs/index.htmlからdocs/images/work.pngを参照する相対パスは、images/work.pngです。
先頭に/を付けるとドメイン直下を基準にするため、プロジェクトサイトの/portfolio/から外れた場所を指す場合があります。
ファイルを実際に保存したか、名前の大文字・小文字や拡張子が一致するかも見てください。
HTTPSのページからHTTPの素材を読み込む混在コンテンツも、表示を妨げる原因になります。
最小のHTMLが表示できる状態を保ち、画像やCSSを一つずつ追加すると原因を追いやすくなります。
<img src="images/work.png" alt="学習記録アプリの一覧画面">更新されないならデプロイ結果を見る
内容を変えたのに古いページが出る場合は、まず変更をmainのdocsへコミットしたかを確認します。
編集画面に入力しただけでは、公開元のファイルは変わりません。
次にActionsで該当する公開処理の結果を見て、失敗している場合はエラーのある工程を確認します。
変更を送信してからサイトへ反映されるまで、最大10分ほどかかる場合があります。
処理の失敗と、成功後の反映待ちを分けて判断しましょう。
成功を確認したらページを再読み込みし、変更した箇所を見比べます。
理由が分からないまま公開元を変えたり、同じ内容を繰り返しコミットしたりせず、GitHub公式のビルドエラーの案内を確認してください。
あわせて読みたい
CI/CDを面接で説明するには？仕組み・違い・経験の伝え方
公開サイトを就活で見せるときの伝え方
就活でサイトを提出するときは、応募先が指定する提出形式や確認してほしい内容を優先します。
紹介ページのURLだけでは、掲載した作品のどこを自分が作ったのかまでは伝わりません。
作品の目的、自分の担当、見るときに試してほしい操作を短く添えると、応募先が確認する順番を考えやすくなります。
また、GitHub Pagesで紹介サイトを公開した経験と、そこに載せたアプリを実装した経験は分けて説明してください。
テンプレートを利用した場合も、借りた部分と自分で変更した構成・デザイン・コードを区別します。
見た目の完成度だけを強調するより、何を作り、なぜそうし、どこまで確認したかを自分の言葉で伝えましょう。
提出前には、作品側の起動手順やデモの動作、ソースの公開範囲も見直します。
連絡先や顔写真などは、誰でも閲覧できる場所に出してよいものだけを選び、必要以上の個人情報を載せないことも大切です。
公開サイトを作っただけで選考が有利になるとは限りませんが、応募先が求める経験と結び付けて説明する材料にはできます。
提出文の例（架空の作品）
作品紹介サイトを公開しました。学習記録アプリでは画面設計と一覧表示を担当しています。サイトの作品欄からソースと起動手順をご覧いただけます。
あわせて読みたい
エンジニア就活のポートフォリオ｜題材・作り方・完成基準
参考資料
ABOUT ME
IT就活のWebマーケティング領域を支援してきました。
よくあるプログラミングスクールをはじめたら「月収100万円」みたいな嘘のマーケティング活動をしている会社に嫌気が指す思いでいたので、当ブログを設立。
未来を担う学生が、大人に食い物にされないように、「IT就活における社会の真理」をお伝えするブログです。
よくあるプログラミングスクールをはじめたら「月収100万円」みたいな嘘のマーケティング活動をしている会社に嫌気が指す思いでいたので、当ブログを設立。
未来を担う学生が、大人に食い物にされないように、「IT就活における社会の真理」をお伝えするブログです。
