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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Matsuo Obu Matsuo Obu
April 26, 2017
Programming
0
92

 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
1k
文学作品「檸檬」をReactで読む
Avatar for Matsuo Obu mqtsuo02
1
500
EmotionでReactをstylingすればモテるかもしれない
Avatar for Matsuo Obu mqtsuo02
0
620
僕が求めていたのはNext.jsだったんだ
Avatar for Matsuo Obu mqtsuo02
0
690
Repro Tech Hands-on : Nuxt.js
Avatar for Matsuo Obu mqtsuo02
1
920
ピピピのPWA
Avatar for Matsuo Obu mqtsuo02
0
730
GraphQLについての5分間
Avatar for Matsuo Obu mqtsuo02
0
810
Create React App 読解特急
Avatar for Matsuo Obu mqtsuo02
0
110

Other Decks in Programming

See All in Programming
Go1.26 go fixをプロダクトに適用して困ったこと
Avatar for Hiroki Kurasawa kurakura0916
0
330
LangChain4jとは一味違うLangChain4j-CDI
Avatar for Kenji Kazumura kazumura
1
150
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.5k
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.4k
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
620
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
Avatar for oga_aiichiro nanaism
0
240
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
290
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
170
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
Avatar for Jun okazaki okajun35
0
570
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.2k
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
410
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
450

Featured

See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
51k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
190
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
170
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
260
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190

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