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
73

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

Other Decks in Programming

See All in Programming
Jakarta EE Meets AI
Avatar for ivargrimstad ivargrimstad
0
640
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
Avatar for Daniel Sogl danielsogl
0
100
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
1
250
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.3k
新世界の理解
Avatar for Akihito Koriyama koriym
0
130
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
180
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
140
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
13
7k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
Avatar for sushi-cat sushi0120
0
250
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
SwiftでMCPサーバーを作ろう！
Avatar for giginet giginet
PRO
2
230

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
22
1.4k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k

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