Webアプリをgithub pagesで公開するときの個人的メモ

最近Github pagesを使ってWebアプリを立て続けに（とはいえ2コだけど）作ったので、やることメモっておく。

ちなみに作ったのは以下の2つ（遊んでね！）

mu-777.github.io

Github pagesの設定をする
Reactアプリのときは、baseをレポジトリ名に変える
Reactアプリのときは、ビルド成果物をdocsに置く
OGP画像を作る
faviconを作る
sitemapを作るよう設定する
OGP用のmetaタグを入れる
Googleアナリティクスに追加する
Googleサーチコンソールにsitemapを登録する

Github pagesの設定をする

Settings > pages で設定できる。

docs.github.com

Deploy from a branchの設定にしておくと、手元でビルドして特定ブランチに入れてpushしたら勝手に反映してくれる。ビルド処理を含めてGithub Actionsにしてもいいかもだが、Reactアプリだとローカルで(npm run devで)ちゃんと見れてるのにビルドが通らなかったりするので、Actionsでコケられるよりは手元でビルドして通ってからpushするスタイルでいい気がする。

あと、Reactアプリのときは/docsを指定するようにする。ビルドしたやつを丸々そこに押し込めるので。

もし、viteでGithub Actionsを使うなら、参考はこれ：

ja.vite.dev

Reactアプリのときは、baseをレポジトリ名に変える

Github pagesのデプロイ先はデフォでhttps://<USER NAME>.github.io/<REPO NAME>/となるので、baseパスを/<REPO NAME>/にしておく必要がある。

viteだとvite.config.jsの設定で変えられる。

export default defineConfig({
+  base: "/<REPO NAME>/",
})

github.com

Reactアプリのときは、ビルド成果物をdocsに置く

package.jsonに、"rebuild": "tsc -b && vite build && rm -R docs/* && cp -r dist/* docs/",みたいなscriptを入れる。

{
  "name": "APPNAME",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build && cp -r dist/* docs/",
+    "rebuild": "tsc -b && vite build && rm -R docs/* && cp -r dist/* docs/",
    "lint": "eslint .",
    "preview": "vite preview"
  },

github.com

もしくは、vite.configでoutDirに/docsを指定する（試してないけど）

export default defineConfig({
+  build: {
+    outDir: '/build/path'
+  }
})

ja.vite.dev

OGP画像を作る

各種SNSとかでシェアするときによき感じに表示されて嬉しいので、作っておく。Reactアプリのときは画像を/publicに置いておく。

画サイズは1200px ✕ 630pxで、ただし中央の630px四方にTrimされてもいいように作っておくのがいいらしい。正方形で表示するSNS等もあるので（はてなブログも）。

自分はJapanese Companyの社畜らしく、パワポで作る。細かくpx指定するの面倒だけど、まぁアス比があってたら大丈夫っしょの気持ちで適当にやる（自動で拡縮されるときのクオリティは気にしない）。

canvaでグラデ文字が作れて今っぽい。canvaでOGP画像を作りきるのもアリ。図形などの画像保存をするとちょっとガビガビしちゃう？　最悪スクショの手もある？（規約とか確認したほうがいい？(してない)）

rutinelabo.com

画像を作ったら、各種SNSでどう見えるかを確認できるWebアプリがあるので確認する。URLからも確認できるので、metaタグまで設定してpushしたあとに反映されてるかも確認できる。

rakko.tools

ogimage.tsmallfield.com

faviconを作る

これも、あると気持ち的にアガるので作っておく。Reactアプリのときは/publicに置いておく。

256x256pxのpngとかで作って、生成してくれるWebサイトとか使えば楽。

favicon-generator.mintsu-dev.com

ao-system.net

sitemapを作るよう設定する

Google検索にひっかかってもらうために、sitemapが必要らしい。

普通のhtmlのときはルートに・Reactアプリのときは/publicフォルダに、_config.ymlを作成し、下記の内容を入れておく

plugins:
  - jekyll-sitemap

github.com

そうすると、Github pagesの静的サイトジェネレーターがsitemap.xmlを作ってくれるらしい。

https://mu-777.github.io/naming-brute-force/sitemap.xml とかをブラウザから見ると、確認できる。

詳細は以下のサイトなど参考に：

OGP用のmetaタグを入れる

OGP画像を反映させたりするためのmetaタグをに入れる。

例えば以下の感じ。

  <meta property="og:title" content="人名漢字∞組み合わせ">
  <meta property="og:description" content="すべての人名漢字の組み合わせから、名付けのインスピレーションを！">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="mu-777.github.io/naming-brute-force">
  <meta property="og:url" content="https://mu-777.github.io/naming-brute-force/">
  <meta property="og:image" content="https://mu-777.github.io/naming-brute-force/ogpimg.png">
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@mu_777_" />

github.com

いろいろSEO的な解説ページがあるので、そのときの最新情報を見たほうがいいかも。

Googleアナリティクスに追加する

Googleアナリティクスを使うなら。こちらを登録しておけば、Googleサーチコンソールにも自動的に登録されるようなので、こちらが先でよさそう？

新規登録は、左カラム下の「⚙ 管理」から、「作成」>「プロパティ」から進める。

プロパティがコンテンツ単位、データストリームがタッチポイント、みたいな理解でよさそう。1つのコンテンツを複数のタッチポイント（Webでもスマホアプリでも）提供することは普通だもんね。

手順を進めていくと、導入の方法を提示してくれて、登録確認ができる。例えば「以下のgtagを呼び出す処理をコピペして」など言ってくるので、それを入れてGithub pagesに反映させ、確認ボタンを押すと、Google側で認識するか判定してくれる。

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>