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

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

Matsuo Obu
April 26, 2017
Programming
0
61

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

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

Matsuo Obu

April 26, 2017
Tweet

More Decks by Matsuo Obu

See All by Matsuo Obu
Reactの歴史
mqtsuo02
0
880
文学作品「檸檬」をReactで読む
mqtsuo02
1
440
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
510
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
590
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
680
ピピピのPWA
mqtsuo02
0
620
GraphQLについての5分間
mqtsuo02
0
720
Create React App 読解特急
mqtsuo02
0
65

Other Decks in Programming

See All in Programming
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
240
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
160
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.5k
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
Prolog入門
qnighy
3
860
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
240
Ruby Parser progress report 2024
yui_knk
2
200
Swiftコードバトル必勝法
toshi0383
0
150
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
140
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
390
Jakarta EE meets AI
ivargrimstad
1
170

Featured

See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Documentation Writing (for coders)
carmenintech
65
4.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Building Adaptive Systems
keathley
36
2.1k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
How to train your dragon (web standard)
notwaldorf
85
5.6k
It's Worth the Effort
3n
182
27k
Writing Fast Ruby
sferik
623
60k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Principles of Awesome APIs and How to Build Them.
keavy
125
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. おわり。