tutorial.chirimen.org のセットアップ

[dynamis]

先日のミーティング にてチュートリアルの markdown 版のホストは https://tutorial.chirimen.org/ にすることになったのでセットアップする。

とにかく md ファイルを更新するだけでサイトに反映される単純なものを作る。 選択肢は github pages にするか netlify にするか程度。github pages も最近 https カスタムドメインに対応しているので使えるが、柔軟性が圧倒的に高いので netlify 想定で進めます。

[dynamis]

todolist:

• [x] netlify のホスティングを設定
• [x] DNS 設定を変更
• [x] markdown ファイルに適当なテンプレートを適用して見やすくする
• [ ] トップページを少し整理

[dynamis]

画像サイズが大きすぎて重たいという問題があるのでサイズを最適化しておきたい

• [x] 画像サイズは作り直すしかない
• [x] 画像の圧縮率は netlify の Asset optimization で画像サイズ削減をオンにしておくと良いかも？

[dynamis]

JS 大好きプロジェクトなので JS 実装の静的サイトジェネレータとして Gatsby を使う想定でテンプレートの候補をメモ:

• 見た目最小限、コードの強調表示ありな感じでチュートリアル向けに良いかも: https://ryanfitzgerald.github.io/devblog/
• チュートリアル向けとそもそも謳っているのが良いかも: https://gatsby-docs-starter.netlify.com/
• これもシンプルでチュートリアルのコード埋め込みに使える: https://minimal-blog.netlify.com/

[dynamis]

他に上げてもらった候補:

• 見やすいかも: https://portfolio-emma.netlify.com/
• 流行りの（？）マテリアルデザイン: https://vagr9k.github.io/gatsby-material-starter/
• 横幅を最大限使う: https://wonism.github.io/ （編集済み）

[dynamis]

https://gatsby-docs-starter.netlify.com/ を試した status report です:

• 画像読み込めないバグのあるバージョンの超古い Gatsby 使ってる
  • gatsby も react も全部一気にバージョン上げて解決する
• 画面内のコンテンツ幅が小さい
  • レイアウトのスタイルで幅を指定している場所だけ変更すれば良い
• ページタイトルから URL 作っているのでそれは止めさせたい (タイトル変わると URL 変わる)
  • URL 生成部分のコードをコメントアウトして解決する
• Gatsby その他全部バージョンアップすると非互換の対応が必要になる
  • gatsby v1 to v2
    • css クラス名参照 https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#update-css-modules-class-names-that-use-dashes
    • import link from gatsby https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#import-link-from-gatsby
    • import graphql from gatsby https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#import-graphql-from-gatsby
    • その他細かい変数名の変更への対応 使う上での注意
• gatsby develop コマンドで大丈夫と書かれてるのを信じるとローカルに新しい gatsby をインストールしていてそちらで build しちゃうとダメなので node_modules にインストールされたものを使う npm run develop などを実行することに注意

• sharp モジュールなどは node バージョン上がるとリビルド求められるので注意

  • https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#import-graphql-from-gatsby
  • react-icons のモジュール名 https://github.com/react-icons/react-icons
  • react-share のモジュール構造 https://github.com/nygardk/react-share/blob/master/migrate-v1-to-v2.md

とかして対応してみているのだけど、v2 にアップグレードしたちょっとスタイルシートが一部適用されなくなっている問題が発生してしまったので採用保留中。

目次やヘッダーなどが付くのがステキ (blog や固定ページも増やしていけるけどまぁそれはどうでも良いレベルの話) というのが github pages に対する利点なのだけどクリティカルに必須ではないので必要以上に複雑で手間かも知れないという思いもあり、ちょっと保留中です。

[dynamis]

取り急ぎ github pages の jekyll theme を使っている状態にしてくれているのを少しだけカスタマイズを入れて、netlify 側でも同じものをビルド、ホストされるようにしておく

実行手順:

• まずこれ https://www.netlify.com/blog/2017/05/11/migrating-your-jekyll-site-to-netlify/
  • Gemfile 作成して .ruby-version でビルドに使用する ruby バージョンも指定する
• そのままではデプロイ時に No repo name found. Specify using PAGES_REPO_NWO environment variables, 'repository' in your configuration, or set up an 'origin' git remote pointing to your github.com repository. と言うエラーが出るので config.yml に repository を追加する。

note: GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data. というエラーが出るが認証しないとアクセスできないメタデータをテンプレートに使わない限り問題ない。

[dynamis]

取りあえずは github pages デフォルトテンプレートのシンプル、最小限のファイル群で markdown をページにした物を github pages だけでなくより柔軟な機能を持っている netlify 側にも deploy した: http://tutorial.chirimen.org

もし更に Netlify CMS 対応させるならこのあたりだけど、流石に CMS 入れなきゃならないメンバーではない (github 上のファイルの編集くらいは出来る) ハズなので割愛: https://blog.mvp-space.com/10-steps-to-configure-jekyll-with-netlify-as-a-cms-d754d73ea731

しかしこれではオンラインにしないとチュートリアルが表示できない (ボードのイメージ上でチュートリアルの変換後 html 群をホストするサーバがない) 事に気づいた。そこは jekyll のビルドを chirimen 上でしたら良いはずだが未検証、別 issue とする問題。

[dynamis]

取りあえずのセットアップはした。残りのタスクは tutorials リポジトリの issues にて https://github.com/chirimen-oh/tutorials/issues