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
Building blog system using static site generato...
Search
meganii
January 19, 2019
Technology
0
880
Building blog system using static site generator and Azure DevOps
Azure DevOps Tokyo, Japan 2nd impact のLT発表資料です。
meganii
January 19, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
900
Geminiとv0による高速プロトタイピング
shinya337
0
250
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
8.2k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
340
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
Claude Code に プロジェクト管理やらせたみた
unson
4
2.3k
AWS認定を取る中で感じたこと
siromi
1
170
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Visualization
eitanlees
146
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Rails Girls Zürich Keynote
gr2m
94
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
A Modern Web Designer's Workflow
chriscoyier
694
190k
Transcript
(LT) Azure DevOpsͱStatic Site GeneratorΛ ར༻ͯ͠ϒϩάڥΛߏஙͯ͠Έͨ Azure DevOps Tokyo,
Japan 2nd impact 2019/01/19 @meganii
@meganii Ί͕ʹ͍ • Twitter: meganii • Blog: https://www.meganii.com/ • ͓ࣄ:
ࣾSE(Azureؔ࿈) About me Azure DevOpsΛࣄͰ͍͍ͨͨΊษڧத
ຊ͍͑ͨ͜ͱ (1)Static Site GeneratorͰͷϒϩάߏங͍͍ͧʂ (2)Azure DevOpsͰͷϒϩάڥߏஙͳ͔ͳ͔Α͍ͧʂ (3)Azure DevOpsͷใ͕ͳ͔ͳ͔ݟ͚ͭΒΕͳͯ͘ࠔͬͯΔ ॿ͚͍ͯͩ͘͞ʂ
1. Static Site GeneratorͰͷ ϒϩάߏங
ߦ͖͔͚ͨͬͨΕͲɺߦ͚ͳ͔ͬͨɾɾɾ
ݹ͖ྑ͖࣌ 3) Yahoo! δΦγςΟʔζ 1)ϝϞா 2) FFFTP ͬͯͯ͜͜ͷ੩తαΠτ HTMLλάଧͪ FTPసૹ
Web
ࠓʁ • CMSͱͯ͠ɺWordPress͕ଟ͍ʁ • ϝϯς͕େมʢDatabase, Security, Performance….ʣ • WordPressʁ •
ಈతαΠτ͔Βݹ͖ྑ͖੩తαΠτͷ༳Γ͠
Tools Sandbox Static Site Generator CI/CD , Hosting Service ฏΛੜ͖ൈ͍ͨࢲͨͪ
ΑΓΑ͍ʮ༡ͼಓ۩ʯͱʮ༡ͼʯΛखʹೖΕͨ
Static Site Generator • ੩తͳαΠτΛੜ͢Δπʔϧ • Jekyll, Octopress, Middleman(Ruby) •
Hexo(JavaScript) • Hugo(Golang) • Gatsby(JavaScript(React.js))
Hugo • The world’s fastest framework for building websites. •
GolangͷStatic Site GeneratorͰ͋ΓϏϧυ͕ര https://gohugo.io/
Gatsby • Gatsby.js is a static PWA (Progressive Web App)
generator. React.js, GraphQLͳͲϞμϯͳϑϩϯτΤϯυͷٕज़Λར༻ͨ͠Static Site GeneratorͷҰ෦ • GraphQLͷΠϯλʔϑΣʔεͰಁաతʹσʔλιʔε(Markdown fileɺ JSONɺDatabase)Λѻ͏͜ͱ͕Ͱ͖Δ • Կߟ͑ͳͯ͘αΠτ͕രʹͳΔ Preload, Gatsby Link(ը໘ସͳ͠Ͱͷը໘ભҠ) https://www.gatsbyjs.org/
Static Site GeneratorΛར༻͢ΔϝϦοτ • HTML + CSS + JavaScriptͰߏ͞Ε͍ͯΔͨΊܰྔ •
DatabaseΛߟ͑ͳͯ͘ࡁΉ • WordPressͷΑ͏ʹηΩϡϦςΟύονద༻ͷ͜ͱΛߟ͑ͳ ͯ͘Α͍
Static Site GeneratorΛ༻͍ͨ ੩తαΠτӡ༻্ͷ՝ • ຖճϩʔΧϧͰϏϧυͯ͠ɺखಈσϓϩΠ໘ • ϥϯΩϯάͷΑ͏ͳಈతͳίϯςϯπ͕ඞཁ • ࣗಈͰΔͨΊʹʁ
CI/CDαʔϏεͱHostingͷར༻ • Ͳ͜ͰϏϧυ͢Δ͔ • Ͳ͜ʹϗετ͢Δ͔
ϒϩάڥʹٻΊΔ͜ͱ • جຊແྉͰ͑Δ͜ͱ (ຖ݄͏͓ۚɾɾɾ) • ࿈ܞ͕؆୯Ͱ͋Δ͜ͱ (ར༻͢ΔαʔϏεͳΔ͘গͳ͘) • Public ʹ͠ͳͯ͘ར༻Ͱ͖Δ͜ͱ
(SourcePrivateͰӡ༻͍ͨ͠)
Comparison Provider Source Management CI/CD Hosting Remarks Mix Private Repository
(Bitbucket, GitLab) CI Service (Circle CI) Hosing Service (GitHub Pages, Google Firebase) όϥόϥͷͨΊਏ͍ GitHub GitHub (GitHub Actions) beta GitHub Pages ·ͩCI/CD͕ GA͍ͯ͠ͳ͍ GitLab GitLab GitLab CI GitLab Pages શ෦ೖΓ͕ͩɺ CI͕͍ҹ Netlify - (GitHub, Bitbucket) Netlify Netlify ຊ͔ΒͷΞΫηε͕ ͍ҹ Microsoft Azure Repos Azure Pipelines GitHub Pages Awesome!!!!
2. Azure DevOpsͰͷ ϒϩάڥߏங
Azure Repos Azure Functions CI/CD GitHub Pages Azure Pipelines Source
Hosting git push Local WorkFlow Git pushҎ֎ͰίϯςϯπΛߋ৽͢Δ߹ Queue build Markdown
Trigger • git push࣌ • εέδϡʔϥʢྫ͑ຖߋ৽ʣ ˞ Azure DevOpsʹϩάΠϯͯ͠ͳ͍ͱ࣮ߦ͞Εͳ͍ʁ •
Azure Pipelines্Ͱखಈ࣮ߦ • Azure FunctionsͷURL࣮ߦ
Azure Pipelines
YAML for Hugo (1)Installing Hugo binary (2)Build (3)Git commit trigger:
- master pool: vmImage: 'Ubuntu-16.04' variables: GOBIN: '$(GOPATH)/bin' # Go binaries path GOROOT: '/usr/local/go1.11' # Go installation path GOPATH: '$(system.defaultWorkingDirectory)/gopath' # Go workspace path modulePath: '$(GOPATH)/src/github.com/$(build.repository.name)' # Path to the module's code steps: - script: | mkdir -p '$(GOBIN)' mkdir -p '$(GOPATH)/pkg' mkdir -p '$(modulePath)' shopt -s extglob echo '##vso[task.prependpath]$(GOBIN)' echo '##vso[task.prependpath]$(GOROOT)/bin' displayName: 'Set up the Go workspace' - script: | mkdir ~/tmp cd ~/tmp wget 'https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_0.53_Linux-64bit.tar.gz' tar zxvf hugo_0.53_Linux-64bit.tar.gz mv hugo $(GOBIN) displayName: 'Set up Hugo' - script: | hugo version displayName: 'Check Hugo version' - script: | hugo displayName: 'Build content by hugo' - script: | git clone https://meganii:$(GITHUB_PARSONAL_ACCESS_TOKEN)@github.com/meganii/www.meganii.com cp -rp public/* www.meganii.com cd www.meganii.com git config --local user.name $(GIT_USER) git config --local user.email $(GIT_EMAIL) git add --all git commit -m "[skip ci] build from azure" git push -f origin master displayName: 'Deploy to GitHub Pages' งғؾͰॻ͍͍ͯΔͷͰɺ ਖ਼͍͠ॻ͖ํืूதɾɾɾ
Azure Functions const azdev = require('azure-devops-node-api'); const orgUrl = `https://dev.azure.com/${process.env.AZURE_DEVOPS_PROJECT_NAME}`;
const token = process.env.AZURE_DEVOPS_API_KEY; const projectName = 'github-pages'; module.exports = async function (context, req) { context.log('JavaScript HTTP trigger function processed a request.'); let authHandler = await azdev.getPersonalAccessTokenHandler(token); let connection = await new azdev.WebApi(orgUrl, authHandler); let vstsBuild = await connection.getBuildApi(); const builds = await vstsBuild.getBuilds(projectName); const build = await vstsBuild.getBuild(builds[0].id, projectName); const res = await vstsBuild.queueBuild(build, projectName); context.res = { // status: 200, /* Defaults to 200 */ body: res.status }; }; ͬͱ؆୯ͳํ๏͕͋Εڭ͍͑ͯͩ͘͞
None
ࠓޙΓ͍ͨ͜ͱ • Docker containerΛར༻ͨ͠Build. CacheͬͯͲ͏ͬͯΔʁ • CD (Release)ͷར༻ • Gatsby.jsͰScrapboxΛσʔλιʔεʹ͍ͨ͠
• ॻ͘ͱ͖Scrapboxɻදࣔ੩తαΠτ
Thank you @meganii