Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
静的サイトジェネレータyachoのつかいかた
Search
eqs
May 02, 2021
Programming
0
87
静的サイトジェネレータyachoのつかいかた
静的サイトジェネレータyachoのつかいかたです
https://github.com/eqs/yacho
eqs
May 02, 2021
Tweet
Share
More Decks by eqs
See All by eqs
機械学習の基礎から理解する DeepLabCutの原理
eqs
1
5.6k
コンピュータビジョン勉強会
eqs
0
82
Hugoでサイト作りたい
eqs
0
81
Beamer Example
eqs
0
150
Example slide of `highlight` command
eqs
0
1.7k
Probability Distributions (PRML 2.3.1-2.3.7)
eqs
0
410
ディリクレ過程混合モデルによるクラスタリング
eqs
1
550
Convolutional Networks (Deep Learning, 9.1-9.4)
eqs
1
150
Other Decks in Programming
See All in Programming
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
45
16k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
もう僕は OpenAPI を書きたくない
sgash708
3
990
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
Ruby on cygwin 2025-02
fd0
0
140
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
730
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
120
最近のVS Codeで気になるニュース 2025/01
74th
1
260
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Typedesign – Prime Four
hannesfritz
40
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Practical Orchestrator
shlominoach
186
10k
Raft: Consensus for Rubyists
vanstee
137
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Producing Creativity
orderedlist
PRO
343
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Transcript
静的サイトジェネレータ yacho の つかいかた for v0.0.2 eqs 1/17
パッケージ紹介 2/17
yachoについて Processingやp5.jsなどの作品を公開するWebサイトを⽣成するジェネ レータ Pythonパッケージとして実装されている リポジトリ: https://github.com/eqs/yacho 作ったひと GitHub: eqs Twitter:
eqs_work 3/17
デモ ⽣成元のプロジェクト: https://github.com/eqs/yacho-example ⽣成結果のサイト: https://yacho-demo.netlify.app 4/17
つかいかた 5/17
インストール 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
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
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
設定ファイル2種類(説明は後述) yacho.sketchbook.toml : Webページの設定 yacho.sketch.toml : スケッチごとの設定 9/17
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
yacho.sketch.toml : スケッチごとの設定 この設定ファイルが無いスケッチは⾃動的に除外される 設定ファイルを作った場合も draft = true とすることで除外できる draft
= false comment = """ 作品についてコメントも書けるけどv0.0.2時点では⽇本語⼊れるとエラーで落ちるよ """ # このリストに含まれるファイルがコードとして公開される # `*.pde` みたいなワイルドカードも使える public = ['index.html', 'sketch.js'] [video] type = 'vimeo' id = '540909347' 11/17
cover と images フォルダ cover フォルダにある画像が⾃動的にサムネになる これが無いとサイト⽣成時にエラーになる images フォルダにある画像が⾃動的にグリッド状に並べられる 無くてもOK
12/17
動画埋め込み [video] type = 'vimeo' id = '540909347' tomlファイルの [video]
が設定されているときは,カバー画像の代わ りに動画がスケッチのページの⼀番上に表⽰される cover で設定した画像はトップページやSNSでのサムネで使われる 対応している動画︓ ['gif', 'vimeo', 'youtube', 'neort'] 13/17
⽣成結果の確認 ローカルにサーバを⽴てられるなら何でもいいけど,筆者はPythonの livereloadパッケージを使っている インストール︓ $ pip install livereload 実⾏︓ $
livereload -p 3000 dist/ あとはブラウザから localhost:3000 にアクセスすればOK 14/17
サイトのデプロイ dist の中⾝を公開⽤の場所に置けばOK 筆者はGitHub Pagesでサイトを公開していて また,GitHub Actionsでデプロイを⾃動化してる 15/17
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