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

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

Matsuo Obu
April 26, 2017
Programming
0
65

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

Other Decks in Programming

See All in Programming
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
1
180
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.4k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
GoとPHPのインターフェイスの違い
shimabox
2
170
Immutable ActiveRecord
megane42
0
140
Spring gRPC について / About Spring gRPC
mackey0225
0
220

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
A Tale of Four Properties
chriscoyier
158
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Designing for Performance
lara
604
68k
Music & Morning Musume
bryan
46
6.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Side Projects
sachag
452
42k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k

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