とにかく手っ取り早く無料でポートフォリオサイトを作成したい
今回は、BootStrapのテンプレートをGithubPagesで使用する方法を紹介します。BootStrapの記述方法やHTML,CSSのデザインカスタムまでは扱わないので、あくまでも導入までという点ご了承ください。やっていることはGithubPagesが最初に表示するindex.htmlにテンプレート側のURLを仕込んで、テンプレート側のindex.htmlを表示させるようにしたいってことです。
あと今回初投稿です。読みにくさもあるかと思いますがよろしくお願いします！
対象者
・就職活動や個人実績のアピールとしてポートフォリオサイトを作りたいけど一から作成するのは少ししんどい、と感じる人
・とにかく作成から公開まで費用をかけたくない人
・デザインのカスタムとか少ししたいと感じる人
・git / html / css 少し勉強してなんとなく、わかる、かな？って感じの人
GithubPagesとは
今回使用するGithubPagesとはGitの個人リポジトリから手軽にWEBサイトを公開できる機能です。詳しく知りたい方は公式ドキュメントどうぞ。
https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages
手順
今回は導入部分までということで以下の流れで進めます。
1.サイトを作るためのリポジトリを作成する
2.ダミーのindex.htmlを作成
3.BootStrapの無料テンプレートをダウンロード
4.templateフォルダのアップロード
5.サイトの公開と確認
1.リポジトリの作成
プロゲートさんの手順がとても分かりやすかったのでそれに従って進めます。
https://prog-8.com/docs/github-pages
上記のサイトに従って、「3.リポジトリの作成」の項目まで進めてください。
2.ダミーのindex.htmlを作成
プロゲートのサイト「4. ファイルのアップロード」に従ってindex.htmlを作成してください。中身は次のように記述してください。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=https://<reponame>.github.io/template/index.html">
</head>
</html>
ここで重要なのはURL部分の<reponame>.github.ioを自身で作成したリポジトリの名前ときちんとそろえることです。そして<reponame>.github.io/template/<ここ！>のパスでテンプレートのindex.htmlを探しに行くので、もし下の手順を踏んでもうまく表示されない時にはこのパスを確認してみてください。
3.BootStrapテンプレートのダウンロード
BootStrapのテンプレートでお好みのものをダウンロードします。
今回はこちらのサイトを使用させていただきました。
https://startbootstrap.com/themes
上記のサイトから適当に選んでいただき、free Dwonloadを選択しzipファイルをダウンロードします。
リポジトリまで作成できたら今回はデスクトップ（これはどこのディレクトリでも大丈夫です）にtemplateという名前で新規フォルダを作成します。（中身はまだ何も入ってなくて大丈夫です）zipを解凍したら中にある項目をすべて選択し、先ほど作成したtemplateフォルダに入れなおしてください。すると次のような感じになると思います。
4.フォルダのアップロード
3で作成したtemplateフォルダをリポジトリにアップロードします。プロゲートのサイトでindex.htmlを作成した次の項目では画像をアップロードしていますが、ここでtemplateフォルダをそのままアップロードしてください。
そしてリポジトリの表示にtemplateフォルダ / index.html / README.mdの三種があれば成功です。
5.サイトの公開と確認
ここまでできたらテンプレートのサイトが表示できているか確認してみましょう。「5. ページの公開」の手順に従って公開設定をします。しばらく待つとsetting > Pagesの右上メニューから[Visit site]をクリックしてテンプレートサイトが表示されていたら成功です。
6.サイトをカスタマイズしてみる
「6.公開したページの更新」の項目に沿ってサイトの表示されている内容を変更します。ここからはHTMLとCSS,BootStrapの知識が必要になるのでぜひその部分は他のサイトで調べてみてください！templateの中にあるindex.htmlがメインの文字を決めているのでこの中身を変えることで表示文字を変えられます。テンプレートを改変してオリジナルなポートフォリオサイトが完成することを願っています。ありがとうございました。