はじめに
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を追加して
思い思いにカスタマイズしていくと良いと思います。
参考