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
100
静的サイトジェネレータyachoのつかいかた
静的サイトジェネレータyachoのつかいかたです
https://github.com/eqs/yacho
eqs
May 02, 2021
Tweet
Share
More Decks by eqs
See All by eqs
機械学習の基礎から理解する DeepLabCutの原理
eqs
1
6.6k
コンピュータビジョン勉強会
eqs
0
100
Hugoでサイト作りたい
eqs
0
110
Beamer Example
eqs
0
190
Example slide of `highlight` command
eqs
0
1.8k
Probability Distributions (PRML 2.3.1-2.3.7)
eqs
0
440
ディリクレ過程混合モデルによるクラスタリング
eqs
1
620
Convolutional Networks (Deep Learning, 9.1-9.4)
eqs
1
170
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
120
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
770
Laravel Boost 超入門
fire_arlo
2
150
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.2k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
190
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
670
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.6k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Music & Morning Musume
bryan
46
6.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1k
The Invisible Side of Design
smashingmag
301
51k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Agile that works and the tools we love
rasmusluckow
330
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Code Review Best Practice
trishagee
70
19k
Why Our Code Smells
bkeepers
PRO
339
57k
Six Lessons from altMBA
skipperchong
28
4k
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