当前位置:首页 » 《我的小黑屋》 » 正文

WebStack-Hugo项目部署到GithubPage 和 Vercel

18 人参与  2024年10月05日 10:40  分类 : 《我的小黑屋》  评论

点击全文阅读


首先我们介绍一下部署最基础的静态网页, 最终的效果是展示出一个 Hello, github pages :) 页面.

demo 地址: github repository

github page 地址: Github Page demo

前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.

create_repository

确认完成后会看到如下页面:

after_create_repository

1.2 为 repository 开启 github page 选项

如图, 我们选中 Setting tab

repository_setting_page

往下滚动, 找到 Github Pages 选项, 将 Source 改为 master branch, 最后点击 Save 按钮

github_page_finish_setting

最后我们会得到一个链接, 通过这个链接, 待会我们就能通过这个链接访问到该项目的 github pages 页面.

1.3 代码 clone 到本地, 并创建几个基本文件

create_sample_files

注意这里 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 上去后, 可能要过几分钟才会部署好生效

效果如图 ⬇️

simplest demo

部署到 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 不存在。


点击全文阅读


本文链接:http://zhangshiyu.com/post/167889.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 新章速递养大的反派疯魔了是什么小说(江曜姬时语)完本阅读无广告(江曜姬时语)
  • 爱,一触就破无广告_妹妹夏夏孟夏人气小说_小说后续在线阅读_无删减免费完结_
  • 他死后前妻疯魔了彩蛋(顾煜迟林筱棠)全书在线下载阅读完美终章小说大结局
  • 此后锦书休寄周窈音全文最新章节(周窈音)全文免费阅读无弹窗大结局_周窈音免费阅读
  • 弹幕说我是捞女?反手收购男主公司养鸡(林朝曦沈墨川)_弹幕说我是捞女?反手收购男主公司养鸡
  • 没给寡嫂抢到La******,老公把我和儿子做成蜡像(顾云州沈云烟)_没给寡嫂抢到La******,老公把我和儿子做成蜡像顾云州沈云烟
  • 出狱后,假千金靠玄术杀疯了(顾九音霍霆修)_出狱后,假千金靠玄术杀疯了
  • 养妹偷我认亲玉佩当上千金,男友当场分手超长版_玉佩陈雨柔养父母一口气看完_小说后续在线阅读_无删减免费完结_
  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1