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
79
2025-06-28_DEP-WP
nextseason
0
9
ZOOM,StreamYard,etc…のRTMPを IVSでまとめてOBSで配信
nextseason
0
670
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
21
Other Decks in Technology
See All in Technology
AIと描く、未来のBacklog 〜プロジェクト管理の次の10年を想像し、創造するセッション〜
hrm_o25
0
110
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
470
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
910
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
230
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
450
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
170
会社にデータエンジニアがいることでできるようになること
10xinc
8
1.2k
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
150
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
2
160
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
150
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Music & Morning Musume
bryan
46
6.7k
Building Applications with DynamoDB
mza
96
6.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Designing for Performance
lara
610
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Into the Great Unknown - MozCon
thekraken
40
2k
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ɹ : )