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選ばなくて正解だったかも。これから実証していくことになる。


きょんしー

新卒1年目のWEBエンジニア きょんしーです。みんなのコードで働いてます。Twitter, Facebookは適当に。React, Blockly, Pythonが好き。Typescriptがっつり書きたいので機会模索中。普段はNightcoreを聞きながら仕事。土日はReact開発したり、技術書や啓発本やキャリアの本とか読んでます。開発することに飢えてて、ブログ書くよりレイアウト変えてる。経歴とかはWantedlyに記載。