Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shifter Meetup West #3 スタティックサイトジェネレーターについて勉強する会
Search
NExT-Season
November 20, 2019
Technology
0
860
Shifter Meetup West #3 スタティックサイトジェネレーターについて勉強する会
NExT-Season
November 20, 2019
Tweet
Share
More Decks by NExT-Season
See All by NExT-Season
WordCamp EUに行ってきました📷&more… @高知
nextseason
0
37
2025-06-28_DEP-WP
nextseason
0
8
ZOOM,StreamYard,etc…のRTMPを IVSでまとめてOBSで配信
nextseason
0
660
Shifter Meetup West #2 これからのShifter 実践マイグレーション!
nextseason
0
430
MauticとWordPressを連携させてできること
nextseason
0
1k
Shifter Meetup West #1 はじめてのShifter 実践マイグレーション!
nextseason
0
260
Shifter Meetup West #0 女子力高めのキックオフ!
nextseason
0
320
CMC_Meetup 大阪キックオフ
nextseason
2
51
JAWS DAYS 2018 Photo Report
nextseason
0
20
Other Decks in Technology
See All in Technology
AWS CDKの仕組み / how-aws-cdk-works
gotok365
8
300
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
MobileActOsaka_250704.pdf
akaitadaaki
0
170
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
0
110
VGGT: Visual Geometry Grounded Transformer
peisuke
1
220
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
300
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
440
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
440
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
Claude Code に プロジェクト管理やらせたみた
unson
6
4.6k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
How to train your dragon (web standard)
notwaldorf
96
6.1k
Fireside Chat
paigeccino
37
3.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Visualization
eitanlees
146
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
ελςΟοΫαΠτδΣωϨʔλʔ ʹ͍ͭͯษڧ͢Δձ Shifter Meetup West #3 2019.11.20
Steps Who am I
Atsushi Ando ͋ΜͲ͏͋ͭ͠ DTP/web Design Engineer ArtDirector /Photograph twitter :
@Next_Season github : AtsushiA web : next-season.net Solutions Architect - Associate
Recent works Keynote MODX Concrete5 WordPress AWS XD Photography PhotoShop/Lightroom
Illustrator
#SVTI6( "EPCF9%6(,PCF +"846(,PCF $.4େࡕՆࡇΓ .0%9ͷ DPODSFUFΤόϯδΣϦετ Kobe Community &etc…
Let’s Shifter
https://next-season.net/cms/wordpress/1965/ Check લճ : #2 ͜Ε͔ΒͷShifter ࣮ફϚΠάϨʔγϣϯʂ
ҧ͏
Topics 1.What’s Static Site Generator 2.What’s JAM Stack 3.ͦΕɺ͓͍͍͠ͷʁ
Topics • Gatsby (Template : React | License : MIT)
• Hexo (Template : EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko | License : MIT) • Jekyll (Template :Liquid | License : MIT) • Gridsome (Template :Vue | License : MIT) What’s Static Site Generator https://www.staticgen.com/
Topics React GrapgQL What’s Static Site Generator Gatsbyjs
Topics 1.Client-Side Java Script 2.APIs (Application programming interface) 3.Markup https://jamstack.org/
Topics Before JAMStack [ex : LAMP] DB php httpαʔόʔ WebϖʔδΛݟ͍ͨ
htmlը૾ αʔόଆͰੜͨ͠ HTMLΛऔಘͯ͠දࣔ
Topics Before JAMStack [ex : WP] PHP Core Theme Plugin
Topics Before JAMStack [ex : WP]
Topics Before JAMStack [ex : WP]
Topics Before JAMStack [ex : WP]
Static Site Generator Topics After JAMStack αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ Ͱhtmlੜͯ͠දࣔ Static
Files (html / js /css) DataSources Files / APIs
Static Site Generator Topics After JAMStack WebϖʔδΛݟ͍ͨ html/JSΛऔಘ αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ
Ͱhtmlੜͯ͠දࣔ Static Files (html / js /css) DataSources Files / APIs
Topics 1.αʔόʹґଘ͠ͳ͍ίʔυʹΑΓCDNʹ ΑΔεέʔϧ͕༰қ 2.࠶ར༻ՄೳͳAPI 3.σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ ͦΕ͓͍͍͠ͷʁ
Topics CDNʹΑΔεέʔϧ͕༰қ
Topics ࠶ར༻ՄೳͳAPI
Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
Why Shifter
Why Shifter
Why Shifter αʔόͷ ͓कΓෆཁʂ
Let's start hands-on!
Overview શମͷྲྀΕ 1.ShifterΛWebhookରԠϓϥϯ(Tier 2Ҏ্)ʹมߋ͢Δ 2. NetlifyσϓϩΠ༻ͷςϯϓϨʔτΛΠϯϙʔτ͢Δ 3. NetlifyʹαΠτΛ࡞͢Δ 4.ShifterαΠτ͔ΒWebhookͰσϓϩΠ͢Δ https://github.com/getshifter/workshop/
https://www.digitalcube.jp/shifter/4434/
Check.1 ΞΧϯτͷ֬ೝ • ShifterΞΧϯτ͕͋Δ • GitHubΞΧϯτ͕͋Δ • NetlifyΞΧϯτ͕͋Δ https://github.com/getshifter/workshop/blob/master/step-by-step/netlify/README.md
Check.2 WPαΠτͷ֬ೝ •̍ͭҎ্ͷߘ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷݻఆϖʔδ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷλά͕ઃఆ͞Ε͍ͯΔ •̍ͭҎ্ͷΧςΰϦʔ͕ઃఆ͞Ε͍ͯΔ •ύʔϚϦϯΫʹຊޠؚ͕·Ε͍ͯͳ͍ https://github.com/getshifter/workshop/blob/master/step-by-step/gatsby/step1.md
Finish!! Have a fan Shifter Life!
Thank youɹ : )
Thank youɹ : )