首先我们先容一下部署最基础的静态网页, 终极的结果是展示出一个 Hello, github pages  页面.
demo 地点: github repository
github page 地点: Github Page demo
前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.
确认完成后会看到如下页面:
1.2 为 repository 开启 github page 选项
如图, 我们选中 Setting tab
往下滚动, 找到 Github Pages 选项, 将 Source 改为 master branch, 末了点击 Save 按钮
末了我们会得到一个链接, 通过这个链接, 待会我们就能通过这个链接访问到该项目的 github pages 页面.
1.3 代码 clone 到本地, 并创建几个基本文件
留意这里 html 因为和 css 以及 js 放在同一目录, 所以我们用相对路径来引用.
代码逻辑很简单, 就是在页面加载好后在页面中添加 Hello, github pages 这段文字.
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Github Page demo</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
- <script src="index.js"></script>
- </head>
- <body>
- <div id="main-content">
- </div>
- </body>
- </html>
" tabindex="0" role="button">
index.js
- window.onload = function() {
- document.getElementById('main-content').innerHTML = 'Hello, github pages :)'
- }
main.css
- #main-content {
- font-size: 36px;
- font-weight: bold;
- padding: 16px;
- }
- cd github-pages-demo
- git add .
- git commit -m "Add simple code"
- git push
现在我们访问之前开启 github pages 选项时得到的 url, 就可以看到结果了
注: 代码 push 上去后, 大概要过几分钟才会部署好生效
结果如图 ⬇️
部署到 Vercel
打开 https://vercel.com/ ，然后选择 Add New，选择 Project，然后选择上面的 github 的 Project，按照提示就可以部署成功啦。
部署到Hugo到 Vercel
上面的堆栈代码，直接替换为Hugo 编译后的 public 目录下的所有内容。
然后重新回到 Vercel 重新进行 ReDeploy 即可。
Hugo到 Vercel报错解决
问题描述
部署到Vercel全都是XML文件
Vercel是著名PAAS服务，相比于 Github Pages，此中国大陆可直接访问，因此尝试把Hugo站点发布到vercel中，部署后遇到问题，所有页面都为xml文件，如下所示：
Vercel没有找到匹配的模板文件
尝试查找缘故原由，发现日志中输出了大量的告诫错误，如下所示。其说明没有匹配到样式文件。
WARN 2024/07/29 12:37:35 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
问题解决
解决Hugo版本问题
经过查阅，Vercel 中设置环境变量 HUGO_VERSION 为 0.122.0 可以解决该问题。
Vercel 文档中有写修改 HUGO_VERSION 的要求，修改 HUGO_VERSION 必要看有没有对应的 Github Release，比如 0.92.2 存在，但 0.92 不存在。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
