2023-10-14 01:22:50 +08:00

12 lines
4.8 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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>