[{"data":1,"prerenderedAt":220},["ShallowReactive",2],{"content:\u002F2024\u002F24548":3,"surround:\u002F2024\u002F24548":209},{"id":4,"title":5,"body":6,"categories":184,"date":186,"description":187,"draft":188,"extension":189,"image":190,"meta":191,"navigation":193,"path":194,"permalink":195,"published":195,"readingTime":196,"recommend":195,"references":195,"seo":201,"sitemap":202,"stem":203,"tags":204,"type":207,"updated":186,"__hash__":208},"content\u002Fposts\u002F2024\u002F24548.md","Vercel+GitHub 双端自动部署",{"type":7,"value":8,"toc":172},"minimark",[9,14,21,34,37,41,46,57,59,63,68,81,83,87,92,99,107,109,113,118,129,131,135,144,150,152,156,161,163,167],[10,11,13],"h2",{"id":12},"一-准备工作","一. 准备工作",[15,16,17],"blockquote",{},[18,19,20],"p",{},"在开始之前，确保你已经完成以下准备工作：",[22,23,24,28,31],"ul",{},[25,26,27],"li",{},"一个 GitHub 仓库，用于存放博客源码。",[25,29,30],{},"一个 Vercel 账户，用于部署博客。",[25,32,33],{},"一个 GitHub Pages 仓库（可选），用于部署博客。",[35,36],"hr",{},[10,38,40],{"id":39},"二-创建-github-仓库","二. 创建 GitHub 仓库",[15,42,43],{},[18,44,45],{},"首先，在 GitHub 上创建一个新的仓库，用于存放你的博客源码。你可以选择使用静态站点生成器（如 Hugo、Jekyll、Hexo 等）来生成博客。",[47,48,54],"pre",{"className":49,"code":51,"language":52,"meta":53},[50],"language-bash","# 克隆仓库到本地\ngit clone https:\u002F\u002Fgithub.com\u002Fyour-username\u002Fyour-repo.git\ncd your-repo\n","bash","",[55,56,51],"code",{"__ignoreMap":53},[35,58],{},[10,60,62],{"id":61},"三-配置-github-pages-部署","三. 配置 GitHub Pages 部署",[15,64,65],{},[18,66,67],{},"GitHub Pages 是 GitHub 提供的静态站点托管服务。你可以通过以下步骤将你的博客部署到 GitHub Pages：",[69,70,71,74],"ol",{},[25,72,73],{},"在 GitHub 仓库的设置中，找到 \"Pages\" 选项。",[25,75,76,77,80],{},"选择 ",[55,78,79],{"code":79},"gh-pages"," 分支作为 GitHub Pages 的源。",[35,82],{},[10,84,86],{"id":85},"四-配置-github-actions-自动构建","四. 配置 GitHub Actions 自动构建",[15,88,89],{},[18,90,91],{},"GitHub Actions 是 GitHub 提供的 CI\u002FCD 工具，可以帮助你自动化构建和部署流程。以下是一个简单的 GitHub Actions 配置文件示例，用于自动构建博客并部署到 Vercel 和 GitHub Pages。",[18,93,94,95,98],{},"在 ",[55,96,97],{"code":97},".github\u002Fworkflows\u002Fdeploy.yml"," 文件中添加以下内容：",[47,100,105],{"className":101,"code":103,"language":104,"meta":53},[102],"language-yaml","# 当有改动推送到master分支时，启动Action\n\nname: 自动部署\n\non:\n\n  push:\n\n    branches:\n\n      - main \n\n  release:\n\n    types:\n\n      - published\n\njobs:\n\n  deploy:\n\n    runs-on: ubuntu-latest\n\n    steps:\n\n    - name: 检查分支\n\n      uses: actions\u002Fcheckout@v2\n\n      with:\n\n        ref: main \n\n    - name: 安装 Node\n\n      uses: actions\u002Fsetup-node@v1\n\n      with:\n\n        node-version: \"16.x\"\n\n    - name: 安装 Hexo\n\n      run: |\n\n        export TZ='Asia\u002FShanghai'\n\n        npm install hexo-cli -g\n\n\n    - name: 安装依赖\n\n      if: steps.cache.outputs.cache-hit != 'true'\n\n      run: |\n\n        npm install --save\n\n    - name: 生成静态文件\n\n      run: |\n\n        hexo clean\n\n        hexo generate\n        \n\n    - name: 部署到Github\n    \n      uses: JamesIves\u002Fgithub-pages-deploy-action@v4\n      \n      with:\n      \n        token: ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #更改为gihub仓库的token\n        \n        repository-name: \u002Fghlsp\u002Fghlsp.github.io\n        \n        branch: gh-pages\n        \n        folder: public\n        \n        commit-message: \"${{ github.event.head_commit.message }} Updated By Github Actions\"\n\n","yaml",[55,106,103],{"__ignoreMap":53},[35,108],{},[10,110,112],{"id":111},"五-配置-vercel-部署","五. 配置 Vercel 部署",[15,114,115],{},[18,116,117],{},"Vercel 是一个非常流行的静态站点托管平台，支持自动部署。你可以通过以下步骤将你的博客部署到 Vercel：",[69,119,120,123,126],{},[25,121,122],{},"登录 Vercel 并导入你的 GitHub 仓库。",[25,124,125],{},"在 Vercel 上配置自动部署，选择你的 GitHub 仓库并设置构建命令和输出目录。",[25,127,128],{},"添加自定义域名。",[35,130],{},[10,132,134],{"id":133},"六-提交代码并触发部署","六. 提交代码并触发部署",[15,136,137],{},[18,138,139,140,143],{},"完成以上配置后，提交你的代码到 ",[55,141,142],{"code":142},"main"," 分支，GitHub Actions 将会自动触发构建和部署流程。",[47,145,148],{"className":146,"code":147,"language":52,"meta":53},[50],"git add .\ngit commit -m \"Initial commit with GitHub Actions configuration\"\ngit push origin main\n",[55,149,147],{"__ignoreMap":53},[35,151],{},[10,153,155],{"id":154},"七-验证部署","七. 验证部署",[15,157,158],{},[18,159,160],{},"等待 GitHub Actions 完成构建和部署后，你可以访问 Vercel 和 GitHub Pages 提供的 URL 来验证你的博客是否成功部署。",[35,162],{},[10,164,166],{"id":165},"八-总结","八. 总结",[15,168,169],{},[18,170,171],{},"通过以上步骤，你已经成功配置了 GitHub Actions 自动构建博客，并实现了双端部署到 Vercel 和 GitHub Pages。这种自动化部署流程可以大大提高开发效率，确保你的博客始终保持最新状态。",{"title":53,"searchDepth":173,"depth":173,"links":174},4,[175,177,178,179,180,181,182,183],{"id":12,"depth":176,"text":13},2,{"id":39,"depth":176,"text":40},{"id":61,"depth":176,"text":62},{"id":85,"depth":176,"text":86},{"id":111,"depth":176,"text":112},{"id":133,"depth":176,"text":134},{"id":154,"depth":176,"text":155},{"id":165,"depth":176,"text":166},[185],"技术","2024-07-20 00:00:00","在现代开发中，自动化部署是一个非常重要的环节。本文将介绍如何使用 GitHub Actions 自动构建博客，并同时部署到 Vercel 和 GitHub Pages 上。",false,"md","https:\u002F\u002Fimg.zhkax.cn\u002Fcover\u002F2.webp",{"slots":192},{},true,"\u002F2024\u002F24548",null,{"text":197,"minutes":198,"time":199,"words":200},"4 min read",3.29,197400,658,{"title":5,"description":187},{"loc":194},"posts\u002F2024\u002F24548",[205,206],"Github","Vercel","post","srWS-OA5cyDKkN63Reo1HgMQV3ObZxXIFC_t6prztbY",[210,215],{"title":211,"path":212,"stem":213,"date":214,"type":207,"children":-1},"Termux部署hexo","\u002F2022\u002F34548","posts\u002F2022\u002F34548","2022-10-06 13:26:50",{"title":216,"path":217,"stem":218,"date":219,"type":207,"children":-1},"利用 cdn 加速 vercel","\u002F2025\u002F55886","posts\u002F2025\u002F55886","2025-03-09 16:41:06",1787456845869]