Hugo的部署
自安装hugo起,至此blog正式部署成功大概过去了半个月
说实话,我也懒得整理部署hugo的指令了,只是简述一下整个hugo部署以来的历程
安装hugo
直接从github上下载,或者clone下来
git clone https://github.com/gohugoio/hugo
找到合适的主题
其实就是用别人写好的blog,用别人写好的css,像逛菜市场一样挑一个顺眼的,拼拼凑凑,修修剪剪,缝缝补补
“菜市场"↓
我这里用的是ZOZO主题
git clone https://github.com/varkai/hugo-theme-zozo themes/zozo
修改内容
对于网页什么的,我是一窍不通,唯一一点印象是初中电脑课上学过一丢丢,所以我全是靠作者在config.toml
里留下的注释改完的全部,在此再次感谢各位作者
对于markdown语言,我也是一窍不通,但是看了网上的教程后,也是勉强布置完了
这里不贴一下某位启蒙我的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
在域名控制台修改域名解析记录
添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,这样通过fdxn.xyz和www.fdxn.xyz都能访问到我的博客了
至此全部部署结束
全过程中的踩坑
当然不可能什么事情都如此顺利,一路坎坷,善用搜索引擎。在此特别鸣谢Google和CSDN两位大哥,没有这两位大哥就没有今天的网页
仓库同步$^{[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
这个文件
在全局中加入这条指令,全局调用,治标治本