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
はじめてのスタティックサイト ジェネレーター.
Search
DigitalCube Inc.
April 03, 2019
Technology
0
2.5k
はじめてのスタティックサイト ジェネレーター.
スタティックサイト ジェネレーターの概要やGatsbyのチュートリアル、 スタティックサイト ホスティング「surge」や「Netlify」へのデプロイについての紹介。
DigitalCube Inc.
April 03, 2019
Tweet
Share
More Decks by DigitalCube Inc.
See All by DigitalCube Inc.
ISMSを3ヶ月で爆速取得したプロジェクトマネジメントのコツ
digitalcube
0
490
地方の零細企業が AWS MarketPlace 使って10年どうだった?
digitalcube
0
990
[株式会社デジタルキューブ] 会社概要
digitalcube
1
7.3k
[4/7 開催] Shifter オンラインミートアップ!春のフレッシャーズ祭り
digitalcube
0
620
WordPress のフルサイト編集を使ったサイト作成と Shifter を使ってノーコードで安全なサイトを運用する
digitalcube
0
850
Shifter の基本と最新情報
digitalcube
0
190
[12/10 開催] Shifter オンラインミートアップ!
digitalcube
0
71
Snow Monkey での 自社サービスサイト構築事例
digitalcube
0
690
Shifter 新ダッシュボード 3 つのポイントをご紹介
digitalcube
0
430
Other Decks in Technology
See All in Technology
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
M3 Expressiveの思想に迫る
chnotchy
0
110
rubygem開発で鍛える設計力
joker1007
2
220
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
550
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
220
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
Lambda Web Adapterについて自分なりに理解してみた
smt7174
4
120
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
180
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Balancing Empowerment & Direction
lara
1
380
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Music & Morning Musume
bryan
46
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
140
7k
Code Review Best Practice
trishagee
68
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
͡ Ίͯͷ ε λ ςΟ ο Ϋ αΠ τ
δΣ ω Ϩ ʔ λ ʔ S E I J I A K AT S U K A D I G I TA L C U B E C O . LT D .
W K J + C S M D I G
I TA L C U B E W H O A M I ? S E I J I A K AT S U K A amimoto-ami.com getshifter.io
• What’s Static Site Generatorʁ • Try Gatsby • What’s
Static Site Hosting? Agenda
W H AT ’ S S TAT I C S
I T E G E N E R AT O R ʁ
ͲΜͳͷʁ •֤ݴޠϥΠϒϥϦʹΑΔςϯϓϨʔτΤϯδϯ͔ΒJavaScriptͱ APIͰಈతͳσʔλίϯςϯπΛѻ͏੩తαΠτ͕࡞Ͱ͖ΔϏϧυ πʔϧ •δΣωϨʔλʔ͝ͱͷެࣜαΠτίϛϡχςΟ͕ެ։͍ͯ͠Δ ͷΛར༻͢Δ͔ΧελϚΠζͯ͠ར༻
ಛ • ϓϩδΣΫτgitͰཧ • CLIத৺ͰγϯϓϧʹߏஙͰ͖ΔڥͰͲ͜ͰͰ։ൃͰ͖Δ • αʔόʔαΠυͷߏWebCDNͷΈ S3SaaSར༻ͳͲαʔόʔෆཁͳબࢶ • ݕࡧϑΥʔϜͳͲJavaScript֎෦࿈ܞΛ׆༻
• σϓϩΠΞτϛοΫʹߦ͏
ͲΜͳͷ͕͋Δʁ https://www.staticgen.com • 250छྨۙ͘ܝࡌ • ࣮͍ͯ͠Δݴޠ • ςϯϓϨʔτͷݴޠ
T RY G AT S B Y
• ReactͷελςΟοΫαΠτ δΣωϨʔλʔ • HTML / CSS / JavaScript /
React.js / GraphQLͰߏ • WordPress, ϦϙδτϦ্ͷϑΝΠϧ, Markdown, API, Database, YamlͳͲ Λಉ͡ΠϯλʔϑΣʔεͰσʔλιʔεʹͰ͖Δ ࢀߟɿhttps://wp-kyoto.net/gatsbyͰwordpress-siteͷϑϩϯτΤϯυΛ࡞ͬͯΈΔ • ੩తHTMLReactͷSPAͱͯ͠ͷҐஔ͚
https://github.com/gatsbyjs/gatsby • ੩తαΠτͷϦιʔεͷσʔλऔ ಘʹGraphQLΛ༻ WordPress, S3, Firesore, etc… • GraphQLαʔόʔෆཁ
σʔλιʔεʹϓϥάΠϯͰରԠ Gatsby on GraphQL
Show case https://www.gatsbyjs.org/showcase/
1. ։ൃڥͷηοτΞοϓ Install Node.js, Install Git, Using the Gatsby CLI
2. Gatsby αΠτͷ࡞ $ gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO] σΟϨΫτϦͷ࡞ͱςϯϓϨʔτྨͷऔಘ 3. gatsby developίϚϯυͰαʔόʔىಈ $ gatsby develop ʮhttp://localhost:8000ʯͰϗοτϦϩʔυ͠ͳ͕Βߏங Hello world ʹτϥΠ https://www.gatsbyjs.org/tutorial/part-zero/
Edit, Preview (src/pages/index.js)
• ੩తϑΝΠϧΛδΣωϨʔτ gatsbyίϚϯυͰsrc/publicԼͷjsϑΝΠϧ͔ΒHTMLΛੜ $ gatsby build • ελςΟοΫαΠτ ϗεςΟϯάʮsurge.shʯʹσϓϩΠ $
npm install --global surge (SuegeͷϑϦʔΞΧϯτΛొ) $ surge public/ (σϓϩΠ) ΞΫηεՄೳͳURL͕දࣔ͞ΕΔ Go live via surge!
W H AT ’ S S TAT I C S
I T E H O S T I N G ?
SurgeͬͯͳΜͩʁ https://surge.sh/pricing • ελςΟοΫαΠτ ༻ͷϗε ςΟϯάαʔϏε • ແྉͰSSL (ఏڙ͞ΕΔURL) ΧελϜυϝΠϯ(Not
ssl)ʹର Ԡ • CLI (surgeίϚϯυ)Ͱૢ࡞
ελςΟοΫαΠτ ϗεςΟϯάͷछྨ https://www.slant.co/topics/2256/~best-static-website-hosting-provider#1 1. HostingͷΈ GitHubPagesGitLabPages Amazon S3 /
EC2 / VPS ͳͲ 2. Ϗϧυ, σϓϩΠ, ϗεςΟϯά Netlify (GitHub / GitLab / Bitbucket) 3. CMS, Ϗϧυ, σϓϩΠ, ϗεςΟϯά Netlify CMS , forestry.io, 4. All in One, Full Web UI for WordPress Shifter WordPressͷ੩తԽ͔ΒGlobal CDN·Ͱ
1. GitHub, GitLab, BitbucketΞΧϯτΛ༻ҙ 2. NetlifyͷΞΧϯτΛ༻ҙ GitHub, GitLab, BitbucketͰϩάΠϯՄೳ 3.
NetlifyʹϦϙδτϦΛඥ͚ σϓϩΠίϚϯυʮGatsyby buildʯ ެ։σΟϨΫτϦʮpublic/ʯ 4. ϦϙδτϦʹcommit & push Netlify͕δΣωϨʔτͯ͘͠ΕΔͷͰศར 5. That’s it! gatsby-cliΛ͏߹ͪ͜ΒΛࢀর A Step-by-Step Guide: Gatsby on Netlify ͓·͚ Go live via Netlify!
• ඪ४ػೳ Global deployment, right from Git HTTPS, custom domains,
DNS management • CDNͷଳҬɿ100GB/݄ • Ϣʔβʔɿ1໊ • OrganizationɿProҎ্ • ύεϫʔυϩάΠϯɿProҎ্ • ACLɿBusinessҎ্ • Audit log ɿBusinessҎ্ Free usage
Less Is More. Let's go static with Shifter. • ΑΓྑ͍ύϑΥʔϚϯε
(Static HTML + CDN) • ΑΓߴ͍ηΩϡϦςΟ (Micro services archtechture) • ΑΓ҆ՁͰ؆୯ͳεέʔϦϯά (No ops) • ΑΓྑ࣭ͳ։ൃऀΤΫεϖϦΤϯε (Cool, Clean architecture, Community friendly)
T H A N K S !