Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building blog system using static site generator and Azure DevOps

meganii
January 19, 2019

Building blog system using static site generator and Azure DevOps

Azure DevOps Tokyo, Japan 2nd impact のLT発表資料です。

meganii

January 19, 2019
Tweet

Other Decks in Technology

Transcript

  1. @meganii Ί͕ʹ͍ • Twitter: meganii • Blog: https://www.meganii.com/ • ͓࢓ࣄ:

    ࣾ಺SE(Azureؔ࿈) About me Azure DevOpsΛ࢓ࣄͰ࢖͍͍ͨͨΊษڧத
  2. Static Site Generator • ੩తͳαΠτΛੜ੒͢Δπʔϧ • Jekyll, Octopress, Middleman(Ruby) •

    Hexo(JavaScript) • Hugo(Golang) • Gatsby(JavaScript(React.js))
  3. Hugo • The world’s fastest framework for building websites. •

    Golang੡ͷStatic Site GeneratorͰ͋ΓϏϧυ͕ര଎ https://gohugo.io/
  4. 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/
  5. Static Site GeneratorΛར༻͢ΔϝϦοτ • HTML + CSS + JavaScriptͰߏ੒͞Ε͍ͯΔͨΊܰྔ •

    DatabaseΛߟ͑ͳͯ͘ࡁΉ • WordPressͷΑ͏ʹηΩϡϦςΟύονద༻ͷ͜ͱΛߟ͑ͳ ͯ͘΋Α͍
  6. 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!!!!
  7. Azure Repos Azure Functions CI/CD GitHub Pages Azure Pipelines Source

    Hosting git push Local WorkFlow Git pushҎ֎ͰίϯςϯπΛߋ৽͢Δ৔߹ Queue build Markdown
  8. 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' งғؾͰॻ͍͍ͯΔͷͰɺ ਖ਼͍͠ॻ͖ํืूதɾɾɾ
  9. 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 }; }; ΋ͬͱ؆୯ͳํ๏͕͋Ε͹ڭ͍͑ͯͩ͘͞