Feedback
このサイトの内容への提案や誤りの指摘などがある場合は Github Issues からお願いします。
サイトのテキスト本文は Markdown で書かれたファイルを GitHub Pages デフォルトで用意されているシンプルな Jekyll テンプレート (Cayman) で成形して出力しているものになります。
指摘や修正の提案を Issues で行って頂く以外にも、プルリクを送っていただくなどでも勿論構いません。
また、CHIRIMEN コミュニティメンバーで チュートリアル用リポジトリ の書き込み権限を持っている方は、Web ブラウザで Github にアクセスして各ページの markdown ファイルを直接編集していただくなどしても勿論構いません。
いずれかの方法でリポジトリの master ブランチのファイルを変更すると、自動的に Netlify でビルドされて数十秒程度で本番サイトに反映されます。ビルドの進捗や結果は次のバッチや Netlify の Deploys で確認できます。
編集時の注意
本サイトは GitHub Pages で使われている Jekyll テンプレートを使っていますが、実際のホスティングには GitHub Pages ではなく Netlify を利用しています。Markdown の変換は Github Pages となるべく互換になるようセットアップしていますが、全ての挙動が Github Pages と同様ではありません。
具体的には、Netlify 側の機能として、各ページの URL は元ファイル名に関わらず小文字に統一 (大文字を含む URL にアクセスすると 301 で小文字 URL にリダイレクトされる)、末尾の .html や .md あるいは / もなしでアクセス できるようになります。リポジトリのファイルと Web での URL が異なるのは望ましくないため、ディレクトリ名や Markdown ファイル名には原則全て小文字を使用してください。また、Markdown ファイル内での 相対リンクについては GitHub Pages の時と同様 .md 付きの相対リンクで記述してください。そうすることでサーバ側のビルド時に自動的に .md なしの相対リンクに変換されるので、サイト上でのリンクも GitHub Web 上でのリンクも両方が有効になります。
なお、Netlify でのビルドログなどは Github のコミット通知と併せて下記コミュニティ Slack の #github チャンネルに通知されるようになっています。編集結果が反映されない場合などはビルドに失敗していないか確認してください。
ファイル構成とテンプレート
チュートリアル用リポジトリ 配下にある全ての markdown (.md) ファイルに対してそれに対応する HTML ページが生成されるシンプルな仕組みです。このページは /feedback.md ファイルから生成されているし、その他もリポジトリ内の markdown ファイルは拡張子 .md を外して全て小文字に統一されたパスの URL でアクセス可能になります。
既存のページの編集は既存の markdown ファイルを編集、新規ページの作成は追加したい URL に対応する markdown ファイルを作るだけで可能です。それ以外の js/css/img ファイル群はそのままサイトに反映されるのでサンプルコードなどはそのまま必要なファイルを置いてください。
- _config.yml - サイトの設定ファイル。ベースとするテーマやテーマのテンプレート中で変数として参照されている変数の定義を行う。詳細は Github のヘルプなどを参照
- _layouts - カスタムテンプレートファイルを保存するディレクトリ
- default.html - デフォルトテンプレート。参照している変数はリポジトリのメタデータや _config.yml で定義しているもの。
- tutorial.html - チュートリアル用テンプレート。目次が自動生成されるのがデフォルトとの違い。
- _redirects - リダイレクトの定義ファイル。 Netlify のドキュメント を参照
- _site - リポジトリ上には存在しません。ビルド環境を構築して
jekyll build
コマンドでビルドを実行すると公開サイト用のファイルがこのディレクトリに生成され、それを Netlify の CDN でドキュメントルートとしてホストする設定になっています。 - .eslintrc.yml, .prettierrc - ESLint や Prettier で使用する JavaScript のコーディングルール定義ファイル
- .ruby-version, Gemfile - Jekyll テンプレートでビルドするときに使う Ruby バージョンとパッケージ定義ファイル (Netlify でのビルド用)
- README.md - トップページ (https://tutorial.chirimen.org/) のファイル
- assets - サイト全体で利用する CSS や JavaScript ファイルを収めるディレクトリ。
_layouts
配下の html ファイルから読み込む。 - raspi3 - CHIRIMEN Raspi3 チュートリアル (https://tutorial.chirimen.org/raspi3) 用のファイルを収めたディレクトリ
- ty51822r3 - CHIRIMEN TY51822R3 チュートリアル (https://tutorial.chirimen.org/ty51822r3) 用のファイルを収めたディレクトリ
- feedback.md - このページの元となる markdown ファイル
- package-lock.json, package-json - ESLint や Prettier を使って VS Code で編集したいときに Node のパッケージ群を
npm i
でインストールできるようにするためのパッケージ定義ファイル
Github Pages について
Github Pages は Jekyll テンプレートが使われており、詳細については以下のドキュメントが参考になります:
- GitHub Pages のヘルプドキュメント
- Jekyll のドキュメント 配下の各ページ
- Jekyll のファイル構成
- Configuration Options
- Front matter markdown 冒頭の
---
行で囲まれたメタデータ定義セクション (YAML front matter block) の説明 - Includes 使い回したいパーツがある場合に
_includes
ディレクトリ配下に定義をおいて読み込む方法
ローカルビルドしたい場合
ローカルでサイトをビルドしたい場合はまず OS に応じた手順で ruby をインストールし gem install bundler
で bundler もインストールしてください (一般的な Ruby 開発環境構築と同じ)。ruby と bunlder まで用意できていたら次の手順でビルドできます:
git clone git@github.com:chirimen-oh/tutorials.git
cd tutorials
bundle install --path vendor/bundle
bundle exec jekyll serve
あとはブラウザで http://127.0.0.1:4000/
を開いて出力を確認してください。
コミュニティ Slack
その他、何か不明な点がある場合は コミュニティの Slack (未参加の場合は 自己登録フォーム から参加してください) にてご相談ください。宜しくお願いします。