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

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

Avatar for Matsuo Obu Matsuo Obu
April 26, 2017
Programming
98
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
930
ピピピのPWA
Avatar for Matsuo Obu mqtsuo02
0
750
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
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
410
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
290
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
530
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
220
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
0
130
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
ECR拡張スキャンでSBOMを収集して サプライチェーン攻撃の影響調査を 爆速で終わらせてみた
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
180
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
300
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
130
【ディップ｜26年新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
290
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
2.2k
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
5
800

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
300
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
510
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
120
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
410
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
110
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
120
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k

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