---
tags:
  - 技术分享
---

> [如何将 github pages 迁移到 vercel 上托管](https://cloud.tencent.com/developer/article/1771693?from=article.detail.2065884&areaSource=106000.11&traceId=URfJ8WWU7TMKAua9v9kI1)


<h2 id="%E5%89%8D%E8%A8%80" name="%E5%89%8D%E8%A8%80"><strong>前言</strong></h2><p>早期网站使用 <code>github pages</code>,后来迁移到 coding,最近又放到腾讯云网站静态托管,无论是 coding 的 cos 存储桶,还是<a data-text-link="143_1771693" data-from="10680" href="https://cloud.tencent.com/product/wh?from=10680" target="_blank">静态网站托管</a></p><p>他们都是收费的,那有没有免费的托管商呢,既不影响网站的访问速度还免费,于是,找了一下,还真有,vercel和Netlify,就是免费的</p><p>其中大名顶顶的<code>Next.js</code>,<code>create-react-app</code>,<code>Nuxt.js</code>等就是部署在部署托管在<code>vercel</code>的,而<code>vuejs</code>,<code>reactjs</code>等就是托管在<code>Netlify</code>上的</p><p>想必经常打开这些鼎鼎大名官网的时候,访问速度还是可以的</p><p>今天说一下这个<code>vercel</code>,Vercel 可以部署任何前端应用程序的最佳场所。号称以零配置部署到我们的全球边缘网络,动态扩展到数百万个页面而不会费力</p><p>一键导入(支持 github,gitlab,BitBucket),自己的存储库，然后推送。vercel 内置的<code>CI / CD</code>系统会在每次代码更改时触发</p><p>体验过后,确实方便,强大</p><h1 id="01" name="01"><strong>01</strong></h1><p><strong>为什么选择 vercel</strong></p><p>⒈ 免费部署托管前端应用</p><p>⒉ 支持一键导入(github,gitlab),零配置</p><p>⒊ 支持自定义<a data-text-link="3020_1771693" data-from="10680" href="https://cloud.tencent.com/act/pro/domain-sales?from=10680" target="_blank">域名</a>以及配置 ssl 证书,https.</p><p>⒋ 简单友好,个人账户免费,可以部署 next.js,Nuxt.js,Gatsby.js,Angular,Ember.js,Hexo,Eleventy,Hugo,Docusaurus2,Preact,Dojo,Vue.js,Jekyll 等</p><h1 id="02" name="02"><strong>02</strong></h1><p><strong>前提条件</strong></p><p>⒈ 先成功部署 github pages(本文以 github pages 为例,其他类似的应用也是如此)</p><p>⒉ 然后登陆 vercel 官网, 一键导入</p><h1 id="03" name="03"><strong>03</strong></h1><p><strong>怎么使用呢</strong></p><p>在自己的 github 仓库中找到 github pages 仓库</p><figure class=""><div class="image-block"><span><div class="" style="text-align: center; position: relative;"><img src="https://cn.mcecy.com/image/20230324/6285ed9835abcf64f36a44b1d79a08aa.png" style="box-shadow: none; width: 1080px; display: inline-block;"></div></span></div></figure><p>(找到自己github pages的仓库)</p><figure class=""><div class="image-block"><span><div class="" style="text-align: center; position: relative;"><img src="https://cn.mcecy.com/image/20230324/b97055900dc7cca51de9bf384df0e9f5.png" style="box-shadow: none; width: 1080px; display: inline-block;"></div></span></div></figure><p>(在vercel上导入github 仓库的代码)</p><figure class=""><div class="image-block"><span><div class="" style="text-align: center; position: relative;"><img src="https://cn.mcecy.com/image/20230324/9a686b37919e00378a1db188ac2d0264.png" style="box-shadow: none; width: 1080px; display: inline-block;"></div></span></div></figure><p>
等待导入部署即可</p><h2 id="" name="">
</h2><h1 id="04" name="04"><strong>04</strong></h1><p><strong>自定义</strong><a data-text-link="10_1771693" data-from="10680" href="https://cloud.tencent.com/product/cns?from=10680" target="_blank"><strong>域名解析</strong></a></p><figure class=""><div class="image-block"><span><div class="" style="text-align: center; position: relative;"><img src="https://cn.mcecy.com/image/20230324/fd4eb1adf201cbb71a324ba3e9ce312a.png" style="box-shadow: none; width: 1080px; display: inline-block;"></div></span></div></figure><p>点击 Settings?Domains? 输入自己的域名，并在域名购买方控制台(在阿里买的域名就去阿里控制台,在腾讯云买的域名,就去腾讯云的控制台)添加域名解析（CNAME）</p><p>解析完成后即可通过自己的域名访问自己的博客了</p><figure class=""><div class="image-block"><span><div class="" style="text-align: center; position: relative;"><img src="https://cn.mcecy.com/image/20230324/cfee4cf38acaf7bd29e0ce74ce7b57fa.png" style="box-shadow: none; width: 1080px; display: inline-block;"></div></span></div></figure><h2 id="" name="">
</h2><h1 id="05" name="05"><strong>05</strong></h1><p><strong>总结</strong></p><p>当你不满足于 github pages,嫌弃它访问得慢,是可以选择 vercel 来进行托管的,也支持自定义域名,免费的一个 ssl 证书</p><p>只要一键导入代码就可以了的,非常简单方便,可以一键部署前端很多应用..</p>