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
770
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
620
Shifter Meetup West #2 これからのShifter 実践マイグレーション!
nextseason
0
390
MauticとWordPressを連携させてできること
nextseason
0
920
Shifter Meetup West #1 はじめてのShifter 実践マイグレーション!
nextseason
0
220
Shifter Meetup West #0 女子力高めのキックオフ!
nextseason
0
290
CMC_Meetup 大阪キックオフ
nextseason
2
48
JAWS DAYS 2018 Photo Report
nextseason
0
19
WordBench Kobe #76 @078kobe
nextseason
0
42
AWS re:Invent 2017 Photo Report
nextseason
0
330
Other Decks in Technology
See All in Technology
UI State設計とテスト方針
rmakiyama
2
580
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
260
20241220_S3 tablesの使い方を検証してみた
handy
4
390
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
310
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k
ハイテク休憩
sat
PRO
2
150
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
160
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Site-Speed That Sticks
csswizardry
2
190
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Cult of Friendly URLs
andyhume
78
6.1k
Fireside Chat
paigeccino
34
3.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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ɹ : )