（この記事は2022年8月8日が最終更新日です。）
この記事の作成はKazuが行っています。
本業ではエンジニアとして働きつつWebサービス開発を行っております。
副業でWebエンジニア・デザインを行っています。
エンジニアに欠かせないのが学習という名の自己投資です。
いろいろな学習方法があって正直どれを選べばよいのか悩みますよね・・・
いくつもある学習方法の中から私がオススメするのはUdemy！！
購入したコースが満足いく内容でなければ返金もしてくれるので損はありません。
Udemyを試してみる！
最近Githubを触る機会があり、めちゃくちゃ便利だと気づきました。
そこで今回はGithubを使ってポートフォリオサイトを作ろうと思います。その手順を本記事ではステップバイステップで解説していきます。作業時間は10分もかからないので最後まで読み進めていただければと思います。
はじめに
はじめにGithubを使ったことのない人のためにGitがどのようなものかを紹介したいと思います。
Githubとは
Wikipediaでは以下のように説明されています。
GitHubは、ソフトウェア開発のプラットフォームであり、ソースコードをホスティングする。コードのバージョン管理システムにはGitを使用する。Ruby on RailsおよびErlangで記述されており、アメリカのカリフォルニア州サンフランシスコ市に拠点を置くGitHub社によって保守されている。引用：wiki
Githubの利用目的は以下の3つかなと思います。
- 個人の作成したソースコードを全世界に公開する
- 作成アプリなどのバージョン管理を行う
- 複数人での共同開発を行う
Githubについての詳しい説明は本記事では省略しますが、エンジニアにとってととても便利なサービスです。特にWeb系エンジニアはとても多くの人が利用しています。
Github Pagesとは
Github公式では以下のように説明されています。
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。引用：Github Docs
ソースコードだけでなくWebサイトも公開できるということですね。今回はこのサービスを利用してポートフォリオサイトを作成していきたいともいます。
もし自分でWebページを立ち上げようとすると以下のような手順が必要になります。
- ドメインの取得
- サーバーと契約
- Webサイト開発
ドメインとサーバー契約で手間だけでなく費用が掛かってしまいます。しかし、Github Pagesは無料なところもすごいですね。
Github Pagesを無料で利用するためには、後述するリポジトリの作成はPublicで行う必要があります。
Githubへ登録する
まずはGithubでアカウント作成する必要があります。すでにアカウントを作っている方はこの手順は飛ばしてください。
アカウントの作成は以下の公式から手順に沿って行ってください。
ポートフォリオサイトを作っていく
アカウントの作成が終わったらいよいよポートフォリオサイトを作っていきます。この作業は10分程度で終わります。
リポジトリの作成
[New]ボタンから新しいリポジトリを作成していきます。
リポジトリの名前と設定をしていきます。
今回は以下で設定しています。
- Repository name：portfolio
- Description：任意の説明文を入力
- 公開範囲：Public
Public・・・誰でも見ることができます
Private・・・招待した人しか見ることができません
設定が終わったら[Create repository]をクリック
ファイルを作成
[create a new file]をクリックして新しいファイルを作成していきます。新しくファイルを作る以外にもローカルにある既存のファイルを追加することもできます。
今回は一番最初に表示されるindex.htmlを作成していきます。
ファイル名は[index.html]とします。
内容は以下の内容です。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hellow warld!!</p>
</body>
</html>
作成が終わったら下へスクロールしてcommitしていきます。記入欄に作成したファイルの説明を記述して[Commit new file]をクリック。
追加されたのが分かります。
GitHub Pagesで作成したページを公開する
ここから公開していきます。
Sourceの[None]となっているところを[main]に変更してSaveしてます。
Saveすると上にURLが表示されます。このURLが自分の公開したポートフォリオサイトサイトになります。
表示内容確認
上記のURLをクリックすると以下のような内容が表示されます。
今後、このポートフォリオサイトを更新していく予定です。参考まで！！
おわりに
以上で簡単にポートフォリオサイトを作成する方法をご紹介しました。これからHTMLやCSS、Javascriptを追加していってポートフォリオサイトをカスタマイズしていきましょう。
ポートフォリオサイトの完成度を高めることでエンジニアとしての実力を評価してもらるようになります。
コメント