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
82
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
560
Convolutional Networks (Deep Learning, 9.1-9.4)
eqs
1
150
Other Decks in Programming
See All in Programming
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Software Architecture
hschwentner
6
2.1k
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
740
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
290
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
180
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Language of Interfaces
destraynor
156
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Site-Speed That Sticks
csswizardry
4
400
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
How to Ace a Technical Interview
jacobian
276
23k
Being A Developer After 40
akosma
89
590k
Agile that works and the tools we love
rasmusluckow
328
21k
Building an army of robots
kneath
303
45k
Making Projects Easy
brettharned
116
6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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