静的サイトジェネレータyachoのつかいかた

Transcript

1. 静的サイトジェネレータ yacho の つかいかた for v0.0.2 eqs 1/17

2. パッケージ紹介 2/17

3. yachoについて Processingやp5.jsなどの作品を公開するWebサイトを⽣成するジェネ レータ Pythonパッケージとして実装されている リポジトリ: https://github.com/eqs/yacho 作ったひと GitHub: eqs Twitter:

   eqs_work 3/17

4. デモ ⽣成元のプロジェクト: https://github.com/eqs/yacho-example ⽣成結果のサイト: https://yacho-demo.netlify.app 4/17

5. つかいかた 5/17

6. インストール yachoはPythonパッケージとして実装されてるので，Pythonの環境があ ればそのパッケージマネージャ（pip）を通してインストールできる． . Pythonをインストールする MacやLinuxの⼈はシステムのPythonと衝突しないようにpyenvを 利⽤するのがおすすめ . yachoをインストールする 安定版

   $ pip install yacho 開発者⽤ $ git clone https://github.com/eqs/yacho.git $ cd yacho/ $ pip install -e . 6/17

7. yachoが想定してるフォルダ構造 ひとつのフォルダの中に複数のスケッチ ( sketch_yymmdd[a-z] ) がある 設定ファイル フォルダのルートに yacho.sketchbook.toml を置く

   各スケッチフォルダに yacho.sketch.toml を置く 公開する画像 各スケッチフォルダの cover と images の中に置く . │ yacho.sketchbook.toml <----------- Put PROJECT config file │ ├─sketch_210401a │ │ sketch_210401a.pde │ │ yacho.sketch.toml <----------- Put sketch config file │ │ │ ├─cover │ └─images │ └─sketch_210402a │ sketch_210402a.pde │ yacho.sketch.toml <----------- Put sketch config file │ ├─cover └─images 7/17

8. yachoのコマンド2種類 yacho build : スケッチからWebサイトを⽣成する（ dist フォルダに保 存される） yacho create

   : スケッチをyacho⽤の設定ファイルとフォルダも含めて ⽣成する Processing: yacho create or yacho create -t pde p5.js: yacho create -t p5js pyof: yacho create -t pyof ⽣成物の例︓ sketch_210502a/ │ sketch_210502a.pde │ yacho.sketch.toml │ ├─cover │ .gitkeep │ └─images .gitkeep 8/17

9. 設定ファイル2種類（説明は後述） yacho.sketchbook.toml : Webページの設定 yacho.sketch.toml : スケッチごとの設定 9/17

10. yacho.sketchbook.toml : Webページの設定 yacho build コマンドを実⾏したときに参照されるファイル ⾃動で作る機能がいまのところ (v0.0.2) 無いので⾃分で作る必要があ る

    sketchbook_root = '.' base_url = 'https://yacho-demo.netlify.app/' author = 'eqs' avatar = 'chi.png' bio = """ An example user """ custom_css = 'custom.css' title = 'yacho-example' # youtubeやfacebookも設定できる（ドキュメント参照） [social] home = "https://github.com/eqs/yacho" twitter = "eqs_work" github = "eqs" 10/17

11. yacho.sketch.toml : スケッチごとの設定 この設定ファイルが無いスケッチは⾃動的に除外される 設定ファイルを作った場合も draft = true とすることで除外できる draft

    = false comment = """ 作品についてコメントも書けるけどv0.0.2時点では⽇本語⼊れるとエラーで落ちるよ """ # このリストに含まれるファイルがコードとして公開される # `*.pde` みたいなワイルドカードも使える public = ['index.html', 'sketch.js'] [video] type = 'vimeo' id = '540909347' 11/17

12. cover と images フォルダ cover フォルダにある画像が⾃動的にサムネになる これが無いとサイト⽣成時にエラーになる images フォルダにある画像が⾃動的にグリッド状に並べられる 無くてもOK

    12/17

13. 動画埋め込み [video] type = 'vimeo' id = '540909347' tomlファイルの [video]

    が設定されているときは，カバー画像の代わ りに動画がスケッチのページの⼀番上に表⽰される cover で設定した画像はトップページやSNSでのサムネで使われる 対応している動画︓ ['gif', 'vimeo', 'youtube', 'neort'] 13/17

14. ⽣成結果の確認 ローカルにサーバを⽴てられるなら何でもいいけど，筆者はPythonの livereloadパッケージを使っている インストール︓ $ pip install livereload 実⾏︓ $

    livereload -p 3000 dist/ あとはブラウザから localhost:3000 にアクセスすればOK 14/17

15. サイトのデプロイ dist の中⾝を公開⽤の場所に置けばOK 筆者はGitHub Pagesでサイトを公開していて また，GitHub Actionsでデプロイを⾃動化してる 15/17

16. GitHub Actionsの設定例 name: CI on: push: branches: - master jobs:

    deploy: runs-on: ubuntu-18.04 steps: - name: Python 3.9 uses: actions/setup-python@v2 with: python-version: '3.9' - name: Setup eqs/yacho working-directory: ~/yacho run: pip install yacho - name: Checkout uses: actions/checkout@v2 - name: Build web page run: yacho build - name: Push to gh-pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: dist/ 16/17

17. おわり 17/17