$30 off During Our Annual Pro Sale. View Details »

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

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

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

Other Decks in Programming

See All in Programming
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
Avatar for Maple fuuki12
0
180
All(?) About Point Sets
Avatar for hole hole
0
240
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
6
2.9k
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
5
17k
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
13
6.9k
Media Capture and Streams: W3C仕様と現場での知見
Avatar for Ryota Nakamura nowaki28
0
120
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
370
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
Avatar for TVer Inc. techtver
PRO
3
1.3k
CSC305 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Google Antigravity and Vibe Coding: Agentic Development Guide
Avatar for MIKIO KUBO mickey_kubo
2
120
データファイルをAWSのDWHサービスに格納する / 20251115jawsug-tochigi
Avatar for kasacchiful kasacchiful
2
100
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
5
1.2k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k

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