【ITニュース解説】Hosting Your Resume Website on GitHub: A Step-by-Step Guide
2025年09月13日に「Dev.to」が公開したITニュース「Hosting Your Resume Website on GitHub: A Step-by-Step Guide」について初心者にもわかりやすく解説しています。
ITニュース概要
GitとGitHub Pagesを活用し、HTMLファイルを無料でウェブサイトとして公開する手順を紹介。Git設定、ファイル作成、GitHubへのプッシュ、GitHub Pagesでのデプロイまでをステップバイステップで解説する。初心者でも簡単に履歴書サイトを作れる。
ITニュース解説
システムエンジニアを目指す初心者が、自身の履歴書をウェブサイトとして公開する方法は、IT業界でのキャリアを築く上で非常に役立つスキルである。この解説は、その具体的な手順をGitとGitHub Pagesという強力なツールを使って行う方法を順を追って説明する。
まず、バージョン管理という概念を理解することが重要である。バージョン管理とは、作成中のファイルやプログラムの変更履歴を記録し、いつでも過去の状態に戻したり、複数の人が協力して作業を進めたりするための仕組みだ。システム開発において、誰がいつどのような変更を加えたかを追跡することは不可欠であり、問題が発生した際の原因究明や修正作業を効率的に行う上で極めて重要となる。Gitは、このバージョン管理を自分のコンピューター上で行うためのツールであり、GitHubは、Gitで管理しているプロジェクトをインターネット上に保存し、公開したり、他の人と共有したりできるウェブサービスである。GitHub Pagesは、GitHubが提供する機能の一つで、GitHubに保存された静的なウェブサイトを簡単に公開できるサービスである。HTMLファイルのような、サーバーサイドの処理を必要としないシンプルなウェブサイトを公開するのに適している。
ウェブサイト公開の最初のステップは、Gitの初期設定である。Gitを使用する前に、どのユーザーがコミット(変更履歴の記録)を行ったかを特定できるように、ユーザー名とメールアドレスを設定する必要がある。これは、git config --global user.name "あなたのユーザー名"とgit config --global user.email "あなたのメールアドレス"というコマンドを一度だけ実行することで設定できる。--globalオプションは、そのコンピューター上のすべてのGitプロジェクトにこの設定を適用するという意味だ。
次に、プロジェクトを始めるための準備として、ウェブサイトのファイル群を格納する新しいフォルダーを作成し、そのフォルダー内でGitの管理を開始する。まず、mkdir sudaisdirectoryというコマンドでsudaisdirectoryという名前のフォルダーを作成し、cd sudaisdirectoryでそのフォルダーの中に移動する。そして、git initコマンドを実行することで、現在のフォルダーがGitによってバージョン管理されるようになる。このコマンドは、.gitという隠しフォルダーを作成し、そこにGitがプロジェクトの履歴を管理するために必要な情報が格納される。ls -alコマンドを実行すると、この隠しファイル(ドットで始まるファイルやフォルダー)も表示され、.gitフォルダーが作成されていることを確認できる。
プロジェクトフォルダーの準備が整ったら、いよいよウェブサイトの本体となるHTMLファイルを作成する。touch index.htmlコマンドでindex.htmlという名前の空のファイルを作成し、vi index.htmlコマンドでこのファイルを編集する。viは多くのUNIX系システムで利用できるテキストエディタだが、最初は操作に戸惑うかもしれない。viが起動したら、iキーを押すと挿入モードになり、テキストを入力できるようになる。HTMLコードを貼り付けるか、直接入力したら、Escキーを押して挿入モードを終了し、次に:wqと入力してEnterキーを押す。これにより、変更が保存されてviエディタが終了する。index.htmlファイルは、ウェブサイトにアクセスした際に最初に表示されるメインのページとなる。
ローカルでのファイル作成が終わったら、作成したプロジェクトをGitHubに接続する。まず、GitHubのウェブサイトにアクセスし、新しいリポジトリ(プロジェクトを保存する場所)を作成する。例えばmy-resumeという名前でリポジトリを作成したら、そのリポジトリのURLをコピーする。そして、自分のコンピューターのターミナルに戻り、git remote add origin https://github.com/ユーザー名/リポジトリ名.gitというコマンドを実行する。このコマンドは、ローカルのGitリポジトリとGitHub上のリモートリポジトリを紐づける役割を果たす。originは慣習的にリモートリポジトリの主要な接続先を指す名前である。
GitHubへの接続が完了したら、ローカルで作成したHTMLファイルをGitHubにアップロードする。まず、git statusコマンドを実行して、現在のファイルの変更状況を確認する。新しく作成されたindex.htmlファイルが「Untracked files」として表示されるはずだ。次に、git add .コマンドを実行すると、現在のフォルダー内のすべての変更されたファイルや新しく作成されたファイルが、Gitの「ステージングエリア」に追加される。ステージングエリアは、次にコミットする変更内容を一時的に準備する場所である。もう一度git statusを実行すると、ファイルが「Changes to be committed」として表示され、コミットの準備ができたことがわかる。その後、git commit -m "new commit"コマンドを実行し、ステージングエリアにある変更をコミットする。-mオプションの後に続く文字列は、そのコミットがどのような変更を含んでいるのかを簡潔に説明する「コミットメッセージ」である。最後に、git push origin masterコマンドを実行することで、これまでのコミット履歴とファイルがGitHubのリモートリポジトリ(origin)のmasterブランチにアップロードされる。masterブランチは通常、プロジェクトの主要な開発ラインを指す。
GitHubにプロジェクトがプッシュされたら、いよいよGitHub Pagesを使ってウェブサイトを公開する。GitHubのウェブサイトで自分のリポジトリページを開き、「Settings(設定)」タブをクリックする。ページをスクロールしていくと、「Pages」というセクションがあるはずだ。そこで、「Source(ソース)」のプルダウンメニューからmasterブランチを選択し、「Save(保存)」ボタンをクリックする。この設定を行うと、GitHubはmasterブランチにあるindex.htmlファイルを自動的にウェブサイトとして公開する処理を開始する。デプロイ(公開処理)には数分かかる場合があるが、完了すると、GitHubが提供するウェブサイトのライブリンクがそのセクションに表示される。そのリンクをクリックするか、「Visit site(サイトにアクセス)」ボタンを選択することで、公開された自分の履歴書ウェブサイトをブラウザで確認できる。
これで、index.htmlファイルの内容が、インターネットを通じて誰でもアクセスできる個人ウェブサイトとして公開された。この一連の作業は、システムエンジニアを目指す初心者にとって、バージョン管理、コマンドライン操作、ウェブサイトのデプロイという基本的ながら非常に重要なスキルを身につける良い機会となる。この基盤があれば、今後HTMLだけでなく、CSS(ウェブサイトのデザインを整える言語)やJavaScript(ウェブサイトに動きや機能を追加する言語)を使って、より魅力的で動的なウェブサイトへと発展させていくことも可能だ。自身のスキルやプロジェクトをオンラインで公開する能力は、IT業界でのキャリアにおいて大きなアドバンテージとなるだろう。