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
830
Shifter Meetup West #3 スタティックサイトジェネレーターについて勉強する会
NExT-Season
November 20, 2019
Tweet
Share
More Decks by NExT-Season
See All by NExT-Season
ZOOM,StreamYard,etc…のRTMPを IVSでまとめてOBSで配信
nextseason
0
650
Shifter Meetup West #2 これからのShifter 実践マイグレーション!
nextseason
0
420
MauticとWordPressを連携させてできること
nextseason
0
990
Shifter Meetup West #1 はじめてのShifter 実践マイグレーション!
nextseason
0
250
Shifter Meetup West #0 女子力高めのキックオフ!
nextseason
0
310
CMC_Meetup 大阪キックオフ
nextseason
2
50
JAWS DAYS 2018 Photo Report
nextseason
0
20
WordBench Kobe #76 @078kobe
nextseason
0
46
AWS re:Invent 2017 Photo Report
nextseason
0
360
Other Decks in Technology
See All in Technology
技術書典18結果報告
mutsumix
2
200
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
440
2025advance01
minamizaki
0
140
現場で役立つAPIデザイン
nagix
1
120
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
760
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
340
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
200
AIエージェント実践集中コース LT
okaru
1
180
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
AIコーディング新時代を生き残るための試行錯誤
tomohisa
0
670
メルカリにおけるデータアナリティクス AI エージェント「Socrates」と ADK 活用事例
na0
14
6.6k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A better future with KSS
kneath
239
17k
Producing Creativity
orderedlist
PRO
346
40k
Embracing the Ebb and Flow
colly
85
4.7k
Designing Experiences People Love
moore
142
24k
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
186
15k
Six Lessons from altMBA
skipperchong
28
3.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
BBQ
matthewcrist
89
9.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ɹ : )