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

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

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

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

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

Matsuo Obu

April 26, 2017
Tweet

More Decks by Matsuo Obu

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

Other Decks in Programming

See All in Programming
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
Cursor Meetup Tokyo ゲノミクスとCursor： 進化と制約のあいだ
Avatar for Masaru Koido koido
2
1k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
810
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
380
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
530
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
770
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
Avatar for Kentaro Yoshida y_ken
0
250
AIネイティブなプロダクトをGolangで挑む取り組み
Avatar for nmatsumoto4 nmatsumoto4
0
120
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
960
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
160
F#で自在につくる静的ブログサイト - 関数型まつり2025
Avatar for pizzacat83 pizzacat83
0
310
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
130

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k

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. おわり。