kyoncyの日記

GatsbyのGithub Pagesへのdeploy時にmasterが書き換えられちゃう

July 21, 2019

WordPress から Github Pages への移行が無事に終わった。フォントは大好きなヒラギノにした。 Gatsby を触ってみて、こんなカスタマイズがしたいなぁということが出てきたのでまとめる。

Gatsby を Github Pages で運用開始

Github Pages でブログの運用を開始した。 独自ドメインの設定も無事に完了したのでひとまず OK。

‘yarn deploy’したら master が書き換わる事案

How Gatsby Works with GitHub Pages[usename].github.ioリポジトリとしてデプロイする手順等を記載している。

masterブランチを push したのちにyarn deploy(中身はgatsby build && gh-pages -d public -b master)してみた。 origin/masterが build した public ディレクトリ以下の内容で上書きされてる感じ。

機能開発はdevelopからブランチ切って進めて、developからmasterに強制 push して、yarn deploy走らせると良いのかな。まだgh-pagesコマンドを走らせた時に何をしてるのかちゃんと分かってないなぁ。

この辺のことを調査して、運用方法も決めてかなきゃ。

JS の知見まとめたいのでコードブロックを追加

gatsby-remark-prismjs を使えば実現できる感じだったので、追加して設定した。

;(() => {
  console.log("コードブロックを追加した")
})()

ファイル名を追加するための gatsby-remark-code-titles もあるが、必要がなさそうなので設定しなかった。 少しだけカスタマイズして感じたのは、色んなことがある程度手軽に実現できそうということ。

カスタマイズとは違う点で、Github Pages が厄介な感じがするのはどうにかしたい。 Netlify にデプロイしてみた、という記事もよく見かけたので移行も検討したい。

Gatsby でこんなカスタマイズがしたい

Github 使ってるなら issue, Project とかあるじゃんって話だが、振り返ったときに面白そうだなと思った。

  • Profile ページ入れたい

    • Profile の記事を書いて画像をクリックして飛ばす、でも良い
  • markdown から html に変換した際、CSS が気持ち悪い

    • ちなみにこのul,limargin-bottomがとても大きかったので CSS を追加した
    • コードブロックもカッチョいい感じにしたい
  • wantedly で書いた記事、Twitter, Facebook の投稿を引っ張ってくる

    • ただただ、ブログ感を出したいだけ
  • 記事ごとにカテゴリラベルを付与させる

    • 書評や開発のことなり個人的なことをいずれ分類する必要が出るだろう…
    • 技術書典 7 に出すということもある
  • 見てくれる人の為に見易さをこだわりたい
  • トップページのレイアウトにこだわりたい

    • OGP 画像が表示されてるとか、カード型のレイアウトになってるとか
    • Starter Libraryに色んなのあるけど自分でカスタマイズする

洗い出してみると楽しみになってきた。 変にカスタマイズがだいぶされてる Library 選ばなくて正解でしたかね。


NPO法人みんなのコード → HiTTO株式会社(現職)でフロントエンド担当しています きょんしー🐧です。
Twitter, Zennやってます。React, TypeScript, GraphQL 書いてます。土日は開発したり読書したり都内を散歩してます。ボドゲにハマってるので欲が高まってます。

Githubの草情報

Githubの草情報
© 2021 kyoncy