GitHub Pagesを利用して簡単にポートフォリオを作ってみた

3398 ワード
初心者向け github-pages ポートフォリオ GitHub 初心者 GitHub テキストリンク

はじめに

VScodeでプログラミングしているっぽいポートフォリオを作ってみました。
作成したポートフォリオはこちらです。

このポートフォリオの公開でも使用しているのが、
GitHub Pagesという静的サイトのホスティングサービスです。
めちゃくちゃ簡単に静的サイト公開することが出来ます。

今回はGitHubの登録から、簡単なポートフォリオの公開までの手順を説明していきたいと思います。

GitHubに登録

こちらのページから登録します。
https://github.com/join

ユーザ名、Eメールアドレス、パスワードを入力して、
プランは無料枠を登録します。

その後、入力したEメールアドレス宛に認証メールが飛んでくるはずなので、
確認したら登録完了です。

リポジトリの作成

＋をクリックして、New repositoryを選択します。

「Create a new repository」というページに移動するので、
Repository nameを入力します。
ここで入力した名前でこんな感じのURLになります。

https://{Owner}.github.io/{Repository name}/

リポジトリ名は後からでも変更できるので、
とりあえずアカウント名か、portfolioとかで良いと思います。

その他の項目は特に触らずに
「Create repository」ボタンをクリックして完了です。

ファイルの作成

リポジトリが作成できたら、作成したリポジトリのページでファイルを作成します。

※cloneしてからファイルを作成してpushしても良いですが、今回はGitHubのGUI上でファイルを作成してみます。

「Create new file」ボタンをクリックするとファイル作成のページに移動します。

ファイル名はindex.htmlと入力しておきます。

次に「Edit new file」内に以下のhtmlを書き入れていきます。


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

書き混んだら「Commit new file」ボタンで保存します。

ページを公開する

今度は右上端にある「Settings」をクリックします。
そうするとSettingsページが開かれるので、ページ内を下にスクロールしていくと、
「GitHub Pages」という項目が出てきます。

そこの「Source」の「None」を「master branch」に切り替えます。

ページが更新されたら
「GitHub Pages」の項目が緑色になっていると思いますので、
そこのURLをクリックすると先ほど書いたHTMLの内容、
Hello worldとだけ表示されるページに飛べると思います。

これで無事にポートフォリオを公開することが出来ました。

まとめ

非常に簡単でしたね。

ここからはHTMLやCSS、JavaScriptを追加して
思い思いにカスタマイズしていくと良いと思います。

参考