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

Other Decks in Programming

See All in Programming
testcontainers のススメ
sgash708
1
120
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
770
103 Early Hints
sugi_0000
1
230
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
260
MCP with Cloudflare Workers
yusukebe
2
220
Jakarta EE meets AI
ivargrimstad
0
240
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
180
ドメインイベント増えすぎ問題
h0r15h0
2
290
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
930

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Producing Creativity
orderedlist
PRO
341
39k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Designing Experiences People Love
moore
138
23k
Side Projects
sachag
452
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Docker and Python
trallard
42
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Unsuck your backbone
ammeep
669
57k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The World Runs on Bad Software
bkeepers
PRO
65
11k
How STYLIGHT went responsive
nonsquared
95
5.2k

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