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
740
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
600
Shifter Meetup West #2 これからのShifter 実践マイグレーション!
nextseason
0
380
MauticとWordPressを連携させてできること
nextseason
0
890
Shifter Meetup West #1 はじめてのShifter 実践マイグレーション!
nextseason
0
210
Shifter Meetup West #0 女子力高めのキックオフ!
nextseason
0
270
CMC_Meetup 大阪キックオフ
nextseason
2
47
JAWS DAYS 2018 Photo Report
nextseason
0
16
WordBench Kobe #76 @078kobe
nextseason
0
41
AWS re:Invent 2017 Photo Report
nextseason
0
310
Other Decks in Technology
See All in Technology
Databricks Appのご紹介
databricksjapan
0
370
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
120
From LibreOffice to « La Suite » : providing civil servants with Free Software sovereign tools
bluehats
0
100
エンジニア向け会社紹介資料
caddi_eng
14
270k
Efficient zero-copy networking using io_uring
ennael
PRO
0
400
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
300
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
560
トークナイザー入門
payanotty
2
1k
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
700
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
2k
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
Featured
See All Featured
The Invisible Customer
myddelton
119
13k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Six Lessons from altMBA
skipperchong
26
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Producing Creativity
orderedlist
PRO
341
39k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.7k
How GitHub (no longer) Works
holman
311
140k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Automating Front-end Workflow
addyosmani
1365
200k
Statistics for Hackers
jakevdp
796
220k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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ɹ : )