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

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

Matsuo Obu
April 26, 2017
Programming
0
64

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

Other Decks in Programming

See All in Programming
Amazon Qを使ってIaCを触ろう！
maruto
0
400
cmp.Or に感動した
otakakot
2
150
ヤプリ新卒SREの オンボーディング
masaki12
0
130
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
イベント駆動で成長して委員会
happymana
1
320
EventSourcingの理想と現実
wenas
6
2.3k
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
330
Remix on Hono on Cloudflare Workers
yusukebe
1
290
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
290

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.3k
It's Worth the Effort
3n
183
27k
Designing for humans not robots
tammielis
250
25k
Building Applications with DynamoDB
mza
90
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Designing for Performance
lara
604
68k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Raft: Consensus for Rubyists
vanstee
136
6.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. おわり。