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
76

 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
980
文学作品「檸檬」を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
880
ピピピの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
96

Other Decks in Programming

See All in Programming
ネストしたdata classの面倒な更新にさようなら！Lensを作って理解するArrowのOpticsの世界
Avatar for shiita0903 shiita0903
1
180
Inside of Swift Export
Avatar for giginet giginet
PRO
1
250
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
5
1.1k
data-viz-talk-cz-2025
Avatar for Leonardo Collado-Torres lcolladotor
0
100
퇴근 후 1억이 거래되는 서비스 만들기 | 내가 AI를 사용하는 방법
Avatar for Seungmin 마량 maryang
1
160
CSC509 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
28
6.9k
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
18
9.2k
Ktorで簡単AIアプリケーション
Avatar for Keita Tsukamoto tsukakei
0
120
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
240
CSC305 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.4k

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
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. おわり。