正因是梦,尤需真活。

Hugo部署与踩坑

2021.07.07

Hugo的部署

自安装hugo起,至此blog正式部署成功大概过去了半个月

说实话,我也懒得整理部署hugo的指令了,只是简述一下整个hugo部署以来的历程

安装hugo

直接从github上下载,或者clone下来

git clone https://github.com/gohugoio/hugo

找到合适的主题

其实就是用别人写好的blog,用别人写好的css,像逛菜市场一样挑一个顺眼的,拼拼凑凑,修修剪剪,缝缝补补

“菜市场"↓

https://themes.gohugo.io/

我这里用的是ZOZO主题

git clone https://github.com/varkai/hugo-theme-zozo themes/zozo

修改内容

对于网页什么的,我是一窍不通,唯一一点印象是初中电脑课上学过一丢丢,所以我全是靠作者在config.toml里留下的注释改完的全部,在此再次感谢各位作者

对于markdown语言,我也是一窍不通,但是看了网上的教程后,也是勉强布置完了

这里不贴一下某位启蒙我的dalao实在是不合适

dalao的整理

生成静态网页

在根目录下输入

hugo -t zozo

进行渲染,生成public文件

推送至github $^{[1]}$

新建一个名为***.github.io的库

这一部分详见Git基本操作

cd public
git init
# 仓库初始化
git add .
# 添加所有文件到暂存区
git remote add git@github.com:xxxxxxx
# 指定远程仓库 xxxxxxx修改为自己项目主页的ssh地址
git commit -m "first commit"
# 提交
git push -u origin master
# 推送

上传成功后,就可以使用***.github.io连接了

更新后再次push

git status
git add .
git commit -m "updates"
git push -u origin master

购买域名并映射$^{[2]}$

上网购买一个域名,我依旧是在阿里的平台上买的,挑了一个8块一年的,四舍五入就是不要钱

上传CNAME文件,里面为你的域名

fdxn.xyz

ping你的***.github.io域名,得到一个IP Web Image

在域名控制台修改域名解析记录 Web Image

添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,这样通过fdxn.xyz和www.fdxn.xyz都能访问到我的博客了 Web Image

至此全部部署结束

全过程中的踩坑

当然不可能什么事情都如此顺利,一路坎坷,善用搜索引擎。在此特别鸣谢GoogleCSDN两位大哥,没有这两位大哥就没有今天的网页

仓库同步$^{[3]}$

每次第一次上传至库的时候,都很顺利,但每次更新上传总是有大问题

error: failed to push some refs to 'github.com:FDXN/FDXN.github.io' 

hint: Updates were rejected because the remote contains work that you do 
hint: not have locally. This is usually caused by another repository pushing 
hint: to the same ref. You may want to first integrate the remote changes 
hint: (e.g., 'git pull ...') before pushing again. 
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

以上问题基本出在git上对它进行了在线修改,但是没有对本地库进行同步

处理办法在Git基本操作中也有提到,实在不行就直接删库

渲染

往往一件事情出错,不是表面上看上去那么简单,表面上看上去是渲染出的问题,其实究其根本,还是baseurl设置问题,使得上传后网页无法找到css,它依旧在默认的localhost:1313上查找资源,这当然会丢失,显现出渲染失败的样子

看待一个问题 要透过问题看本质

右键的检查是个好东西 希望以后的我能记住

在浏览器中https请求http资源$^{[4]}$

这一次我的浏览器依旧显示渲染失败的问题,但是有了经验的我,打开检查

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure stylesheet '<URL>'. This request has been blocked; the content must be served over HTTPS.

找到原因并上网查找问题所在

报错原因: HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错

解决办法: 在页面中加入meta头:

header("Content-Security-Policy: upgrade-insecure-requests");

这是一句html的指令,并且我们的html是生成的,所以我们如果一个一个改的话,治标不治本,所以找到head.html这个文件 Web Image

在全局中加入这条指令,全局调用,治标治本

参考链接