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
820
文学作品「檸檬」をReactで読む
mqtsuo02
1
410
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
470
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
560
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
640
ピピピのPWA
mqtsuo02
0
570
GraphQLについての5分間
mqtsuo02
0
680
Create React App 読解特急
mqtsuo02
0
63

Other Decks in Programming

See All in Programming
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
エンターテイメント業界で利用されるAWS
demuyan
0
200
Semantic search with Django and pgvector
pauloxnet
0
240
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
"config" ってなんだ？ / What is "config"?
okashoi
0
210
Milestoner
bkuhlmann
1
400
雑に思考を整理する技術と効能
konifar
55
25k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
330
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
オブジェクト指向のリ・オリエンテーション～歴史を振り返り、AI時代に向きなおる～
hanyudaeiiti
9
5.6k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630

Featured

See All Featured
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Design by the Numbers
sachag
274
18k
We Have a Design System, Now What?
morganepeng
42
6.7k
Gamification - CAS2011
davidbonilla
76
4.6k
Optimizing for Happiness
mojombo
370
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Building Adaptive Systems
keathley
30
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Music & Morning Musume
bryan
41
5.6k

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