Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JekyllとBootstrapを使って静的なブログを作ってみたよ

Avatar for Matsuo Obu Matsuo Obu
April 26, 2017
Programming
100
0

 JekyllとBootstrapを使って静的なブログを作ってみたよ

JekyllとBootstrapを使って静的なブログを作ってみた話。「俺の話を聞け！！LT大会 #2」で発表 (2017-04-26)

Avatar for Matsuo Obu

Matsuo Obu

April 26, 2017

More Decks by Matsuo Obu

See All by Matsuo Obu
Reactの歴史
Avatar for Matsuo Obu mqtsuo02
0
1k
文学作品「檸檬」をReactで読む
Avatar for Matsuo Obu mqtsuo02
1
510
EmotionでReactをstylingすればモテるかもしれない
Avatar for Matsuo Obu mqtsuo02
0
640
僕が求めていたのはNext.jsだったんだ
Avatar for Matsuo Obu mqtsuo02
0
700
Repro Tech Hands-on : Nuxt.js
Avatar for Matsuo Obu mqtsuo02
1
940
ピピピのPWA
Avatar for Matsuo Obu mqtsuo02
0
760
GraphQLについての5分間
Avatar for Matsuo Obu mqtsuo02
0
830
Create React App 読解特急
Avatar for Matsuo Obu mqtsuo02
0
120

Other Decks in Programming

See All in Programming
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.6k
ふつうのFeature Flag実践入門
Avatar for irof irof
8
4.2k
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
230
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
630
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
190
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
130
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
190
Oxlintのカスタムルールの現況
Avatar for syumai syumai
6
1.2k
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
160
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
210
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
270

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
150
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
170
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
430
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
450
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
330

Transcript

  1. JekyllとBootstrapを使って 静的なブログを作ってみたよ @mqtsuo02 date: 2017-04-26

  2. 自己紹介 Matsuo Obu @mqtsuo02 言語とか：Ruby, JS, JAVA, Objective-C 経歴とか：経理 →

    SIer → Web 住居とか：福岡, 東京, 栃木, 千葉, ベトナム 趣味とか：たまにDTM、たまにアニメ SNSとか：Facebook, Twitter

  3. 作ったもの http://46times.lol

  4. 静的サイトジェネレータを使いました。

  5. もくじ » 静的サイトジェネレータとは？ » JekyllBootstrapの仕組み » JekyllBootstrapの中身 » カスタマイズしたとこ »

    所感

  6. 静的サイトジェネレータとは？ » 規則に従って作成された設定ファイルやマークダウン ファイルを元にして、静的なサイトを生成してくれる » 本来ならば動的なフレームワークを使用して実装される ブログ等が、静的なサイトとして実装できる （パーマリンク、カテゴリ、タグ、記事を自動生成）

  7. 色々な言語ベースでツールがある Rubyの知識 + ブログが作りたかった → Jekyll StaticGen https://www.staticgen.com/

  8. JekyllBootstrapの仕組み 規則 » ファイル名 » 格納path » yaml設定値 » マークダウン

    / index.html / about.html / post / ... / css / ... / img / ... JekyllBootstap : http://jekyllbootstrap.com/ ビルド

  9. JekyllBotstrapの中身

  10. _postsには記事を置く » YYYY-MM-DD-post_title.md

  11. _postsには記事を置く yaml設定値 マークダウンで 記事を書く

  12. _config.ymlに設定いろいろ パーマリンク設定 <head> 情報 ページネーション設定 gem設定 任意の定数

  13. ビルドするとこんな感じ » /web/2017/04/jekyll_bootstrap4/ » /web/2017/04/s3_route53/

  14. カスタマイズしたとこ » Bootstrap 2 → 4 » previmのcssを拝借した » Font

    Awesome入れた » jekyll-paginate入れた » 各リストの生成スクリプトとか

  15. 各リストの生成スクリプト (๑•﹏•) < ERBみたいだけど違うよ、Liquidだよ

  16. こうしてできたのがコレ

  17. None

  18. 所感 » Jekyllはいいぞ » マークダウンスキーにはたまらない » 簡単・速い・楽ちん » 静的であることの安心感 »

    gemをカスタマイズしたい

  19. おわり。