INFO:

小中高生クリエータ支援プログラム「未踏ジュニア」のWebサイトを題材として、静的サイトジェネレーター（Static Site Generator）の活用事例を解説した動画です 🎓 👨‍🏫 Ruby on RailsなどのWebアプリケーション・フレームワーク（WAF）は強力ですが、必ずしもフレームワークを使う必要はありません。WAFを使わないWebサイト制作事例の１つとして、ご参考になれば嬉しいです 😌✨ スライド資料 → https://speakerdeck.com/yasslab/mitou-junior-on-jekyll 未踏ジュニア → https://jr.mitou.org/ ソースコード → https://github.com/mitou/jr.mitou.org お知らせ記事 → https://note.com/yasslab/n/nf5837dabdf8c ↓未踏ジュニアの YouTube チャンネルはコチラから! https://www.youtube.com/mitoujr 【動画目次】 0:00 本日のお題「Webサイト制作」 1:24 静的サイトジェレーターとは? 2:22 GitHub のサービスと組み合わせると面白い! 3:49 GitHub Pages の紹介 https://pages.github.com/ 4:51 GitHub Actions の紹介 https://github.co.jp/features/actions 6:07 Jekyll 事例 (1/3) https://remotework.jp/ 7:19 Jekyll 事例 (2/3) https://dojocon2021.coderdojo.jp/ 7:55 Jekyll 事例 (3/3) https://jr.mitou.org/ 9:04 本日のお品書き 9:26 未踏ジュニアのプロダクト事例 10:54 毎年100件以上のプロダクト応募 12:32 jr.mitou.org の設計方針 13:04 設計方針：データは YAML で管理 14:32 設計方針：ページは YAML から生成 16:31 特定のプログラミング言語を知らなくても使える仕組み 17:29 GitHub アカウントがあればブラウザで更新提案できる 19:25 より多くの人が触りやすく。そのために敷居を下げていく 20:31 より多くの人が触りやすくするための「裏側」の仕組み 21:52 １つのプロダクトを、１つの URL に割り当てている理由 24:44 この仕組みを実現するコードと、データの流れ (GitHub Actions) 27:10 GitHub Actions で自動化を強化し、運用コストは小さく 28:02 DEMO：図とコードを一緒に眺めてみよう https://github.com/mitou/jr.mitou.org 29:07 DEMO：README は目的に合わせて書いていこう 32:23 DEMO：YAML のデータがどう流れるか見てみよう 35:00 DEMO：各ページを生成するスクリプトを読んでみよう 36:57 DEMO：生成した Markdown から、HTML が生成される 41:06 次のステップの紹介（公式サイト・学習教材など） 41:59 GitHub Pages の利用規約を確認してみよう 44:07 静的サイトジェネレーター応用事例：Shopify × Jekyll 45:57 まとめ − Happy Coding! BGM - カフェにて朝食を https://dova-s.jp/bgm/play8981.html 【Railsチュートリアルって？】 Webサービスを作りながら学ぶ大型チュートリアルです。大学/大学院や社員研修でも採用されたRailsチュートリアルで学び、自分のプロダクトを作ってみませんか？ 🎓 Railsチュートリアル https://railstutorial.jp/ 🏢 社員研修の人達へ → https://railstutorial.jp/business 🏫 教育機関の人達へ → https://railstutorial.jp/partner 📰 note https://note.com/yasslab/m/md778735d3f77 🐣 Twitter https://twitter.com/RailsTutorialJP 🛠 GitHub https://github.com/yasslab/sample_apps 【オススメの動画再生リスト】 👥 対談動画シリーズ https://youtube.com/playlist?list=PLNLYzHXJU2-87oFO0naLgmNG4H8kOkA-z 🗣 講演動画シリーズ https://youtube.com/playlist?list=PLNLYzHXJU2-8lJrnYoCZECiYUsuS3ot-A 🆕 最新動画シリーズ https://www.youtube.com/c/YassLab/videos?view=0u0026sort=ddu0026shelf_id=0 よければチャンネル登録もぜひ! 😆 https://youtube.com/yasslab?sub_confirmation=1 #Ruby #Web #プログラミング