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

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

Avatar for Matsuo Obu Matsuo Obu
April 26, 2017
Programming
97
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
630
僕が求めていたのはNext.jsだったんだ
Avatar for Matsuo Obu mqtsuo02
0
700
Repro Tech Hands-on : Nuxt.js
Avatar for Matsuo Obu mqtsuo02
1
930
ピピピのPWA
Avatar for Matsuo Obu mqtsuo02
0
740
GraphQLについての5分間
Avatar for Matsuo Obu mqtsuo02
0
820
Create React App 読解特急
Avatar for Matsuo Obu mqtsuo02
0
110

Other Decks in Programming

See All in Programming
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
550
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
120
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
240
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
840
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
290
PHP で mp3 プレイヤーを実装しよう
Avatar for memory m3m0r7
PRO
0
280
Google Nest CamとApple Vision frameworkと猫🐈🐈‍⬛ / onishi50
Avatar for Yutaro Muta yutailang0119
0
110
SkillがSkillを生む：QA観点出しを自動化した
Avatar for sontixyou sontixyou
6
3.4k
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
310
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
0
140
飯MCP
Avatar for Yusuke Wada yusukebe
0
510
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
3
280

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.6k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.1M
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
320
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
570
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.4k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
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. おわり。