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

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

Avatar for Matsuo Obu Matsuo Obu
April 26, 2017
Programming
100
0

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

JekyllとBootstrapを使って静的なブログを作ってみた話。「俺の話を聞け！！LT大会 #2」で発表 (2017-04-26)

Avatar for Matsuo Obu

Matsuo Obu

April 26, 2017

More Decks by Matsuo Obu

See All by Matsuo Obu
Reactの歴史
Avatar for Matsuo Obu mqtsuo02
0
1.1k
文学作品「檸檬」をReactで読む
Avatar for Matsuo Obu mqtsuo02
1
520
EmotionでReactをstylingすればモテるかもしれない
Avatar for Matsuo Obu mqtsuo02
0
640
僕が求めていたのはNext.jsだったんだ
Avatar for Matsuo Obu mqtsuo02
0
710
Repro Tech Hands-on : Nuxt.js
Avatar for Matsuo Obu mqtsuo02
1
950
ピピピのPWA
Avatar for Matsuo Obu mqtsuo02
0
770
GraphQLについての5分間
Avatar for Matsuo Obu mqtsuo02
0
830
Create React App 読解特急
Avatar for Matsuo Obu mqtsuo02
0
130

Other Decks in Programming

See All in Programming
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
230
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
340
Cloudflare is Agents
Avatar for chimame chimame
0
170
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
270
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
520
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
4.8k
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
240
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
220
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
240
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
420
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
250

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
450
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
190
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
530
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.8k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
620
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k

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