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
67
静的サイトジェネレータyachoのつかいかた
静的サイトジェネレータyachoのつかいかたです
https://github.com/eqs/yacho
eqs
May 02, 2021
Tweet
Share
More Decks by eqs
See All by eqs
機械学習の基礎から理解する DeepLabCutの原理
eqs
1
3.9k
コンピュータビジョン勉強会
eqs
0
63
Hugoでサイト作りたい
eqs
0
53
Beamer Example
eqs
0
110
Example slide of `highlight` command
eqs
0
1.5k
Probability Distributions (PRML 2.3.1-2.3.7)
eqs
0
350
ディリクレ過程混合モデルによるクラスタリング
eqs
1
420
Convolutional Networks (Deep Learning, 9.1-9.4)
eqs
0
130
Other Decks in Programming
See All in Programming
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Git Rebase
bkuhlmann
11
1.6k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
雑に思考を整理する技術と効能
konifar
58
29k
エンターテイメント業界で利用されるAWS
demuyan
0
210
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
720
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
700
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
6
910
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
RailsConf 2023
tenderlove
4
540
Designing Experiences People Love
moore
136
23k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Six Lessons from altMBA
skipperchong
21
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Atom: Resistance is Futile
akmur
259
25k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Embracing the Ebb and Flow
colly
80
4.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Producing Creativity
orderedlist
PRO
337
39k
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