GitHub Pagesを使ってみる

Bykaori

以前からポートフォリオを作りたいとは思っていたが、GitHubのrepositoryには”練習”とか”お試し”的なものが多く、未完成品だらけで、人に見せられる状態のものが少ない… でもまずは一つ載せてみようと思う。半年ほど前に作ったPlatypus vs Monkeyというボードゲームのrepositoryを開き、汚いコードをほぼ丸ごと書き直してとりあえず再び動くようにはなったのでようやく本題へ。

GitHub Pages

今回はポートフォリオサイトにリンクを貼っていきたいのだが、そもそも自分のサイトを持っていないという人でもGitHubのコードを実際に動かせるページを作れる便利な機能がある。それがGitHub Pages。

GitHubでRepositoryを開き、Settingsを開く。左側からPagesをクリック。

注意：この機能は公開しているrepositoryであれば無料で使えるが、PrivateのrepositoryをPrivateのままPageにしたい場合は、有料サービスにアップグレードしないと使えない。また、無料の範囲には容量などの制限もあるので詳しくは公式サイトをチェック。

SourceとBranch

Sourceは”Deploy from a branch”を選択。
BranchはNoneからmainもしくはbranchに変更するのだが、どこに変更したらいいか早速迷ってしまった。

GitHub Pagesは他のwebsite同様にbuildされた後のhtml, css, javascriptを見てブラウザーに表示している。つまり一旦buildして、buildされたファイルを参照先に指定する必要があるので、buildされたファイルの場所がmainなのか他のbranchなのかを選択すればいい。現時点ではアプリ自体もまだMVPだし、一旦branchでどう見えるか試したいだけなので今回は新しいbranchを作り、そこにdocsというフォルダを作り、/docsフォルダの中にbuildすることにした。ある程度出来上がったらmain branchでbuildして、/(root)としようと思う。

/docsフォルダへのbuildの方法

手動でフォルダを作って、build後のファイルをドラッグ＆ドロップするのではなくvite.config.tsファイルにbuild時の出力先を指定すると便利。

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "./",
  build: {
    outDir: "./docs"
  }
});

npm run build

docsというフォルダにbuildされたらコミットして、しばらくするとページが見られるようになっている。

https://nabetxan.github.io/platypus-vs-monkey/

このリンクを自分のポートフォリをサイトに貼るなどすればOK！

最近ブログのペースは落ちていますが
プログラミングの方は毎日ちゃんと頑張ってます💪
脳を休ませるために最近始めた趣味は手芸
🪡シリキ・ウトゥンドゥ🪡

類似投稿