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
67

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

Other Decks in Programming

See All in Programming
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
Avatar for nrs nrslib
6
1.3k
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
0
220
生成AIで日々のエラー調査を進めたい
Avatar for aboy yuyaabo
0
210
コード書くの好きな人向けAIコーディング活用tips #orestudy
Avatar for Hiromi Hishida 77web
3
240
バランスを見極めよう！実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
Avatar for whatasoda whatasoda
2
810
AIエージェントによるテストフレームワーク Arbigent
Avatar for takahirom takahirom
0
350
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
740
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
670
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.3k
【TSkaigi 2025】これは型破り？型安全？ 真実はいつもひとつ！（じゃないかもしれない）TypeScript クイズ〜〜〜〜！！！！！
Avatar for Kimita Shoichi kimitashoichi
1
300
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
380
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
490

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
609
69k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
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. おわり。