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
75

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

Other Decks in Programming

See All in Programming
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
120
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
250
CSC305 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
CSC509 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
440
Swift Concurrency - 状態監視の罠
Avatar for Yuki Yasoshima objectiveaudio
2
490
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
130
Pythonスレッドとは結局何なのか？ CPython実装から見るNoGIL時代の変化
Avatar for curekoshimizu curekoshimizu
5
1.7k
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
2
520
ソフトウェア設計の実践的な考え方
Avatar for 増田 亨 masuda220
PRO
4
540
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
0
150
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
11
2.3k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
250

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Done Done
Avatar for chrislema chrislema
185
16k

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