测试部署网站踩过的坑,以供参照
代码高亮
- 和Markdown语法相同
highlight
数学公式
- 和Latex语法相同$a\ne1$ $$ \rho(\frac{\partial \mathbf{v}}{\partial t}+(\mathbf{v}\cdot\nabla)\mathbf{v})=-\nabla p+\mu \nabla^2\mathbf{v}+f $$
$$ \rho(\frac{\partial \mathbf{v}}{\partial t}+(\mathbf{v}\cdot\nabla)\mathbf{v})=-\nabla p+\mu \nabla^2\mathbf{v}+f $$
插入音频
- 网易云外链:(通过网页版生成)
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22716498&auto=1&height=66"></iframe>
- meting生成歌单:(注意markdown编辑千万别加代码高亮的```)
<div
class="aplayer"
data-id="7862539210"
data-server="tencent"
data-type="playlist"
data-mutex="true"
data-mini="false"
data-loop="none">
</div>
- meting生成歌单和歌曲:
<div
class="aplayer"
data-id="004351Vk3uwOhB"
data-server="tencent"
data-type="song"
data-mutex="true"
data-mini="false"
data-loop="none">
</div>
ps. qq音乐的id如加粗位置y.qq.com/n/yqq/song/004351Vk3uwOhB.html
插入图片
- 本地图片:(用相对路径,放在po文同名文件夹里就可以)
![a384e65513662ecb7b2178005e2e4055](/img/a384e65513662ecb7b2178005e2e4055.jpg),位于static文件夹下
- 外链图片:(markdown语法即可)
![sample](https://image.gcores.com/53c055e8-414d-45df-8998-d9f4cf4c4448.jpg?x-oss-process=image/quality,q_90/watermark,image_d2F0ZXJtYXJrLnBuZw,g_se,x_10,y_10)
- 图床图片:(使用sm.ms)
![4acf7ad5-19ad-4310-bbf5-79829bd4c5a9.jpg](https://i.loli.net/2021/02/05/OiyAj73IlBeozK6.jpg)
插入视频
- 视频网站外链:
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=26418723&bvid=BV1Ss411p72p&cid=45397246&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"> </iframe>
</div>
评论系统
使用了gitalk,参照教程注册并配置
遇到了报错
Error: Request failed with status code 403
原因是原有的CORS proxy不能用了,需要给gitalk传一个新的地址替换掉
Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token
参考Gitalk 评论登录 403 问题解决 | 静觅,在主题的
layout
部分中添加相应的proxy
选项,对我用的fluid主题来说是/themes/fluid/layout/_partial/comments/gitalk.ejs
,添加选项proxy: '<%= theme.gitalk.proxy %>'
相应地,在
_config.fluid.yml
中gitalk
部分添加proxy: <你自己的CORS proxy>/https://github.com/login/oauth/access_token
基于Zibri/cloudflare-cors-anywhere: CORS “anywhere” proxy in a Cloudflare worker,部署自己的CORS proxy
- 首先注册Cloudflare帐号
- 在Cloudflare Workers®中添加新的workers,把Zibri/cloudflare-cors-anywhere: CORS “anywhere” proxy in a Cloudflare worker中的
index.js
复制进脚本区保存并部署 - 生成一个形如
https://xxxx.xxxx.workers.dev/
的网址即你个人的CORS proxy,填入前述的<你自己的CORS proxy>
位置
clean
后重新generate
再deploy
出去就好了
自定义域名
在domcomp可以选择哪个网站买域名比较便宜
买一个自己的域名,比如我是在Alldomains买的,域名是
rlyehzoo.xyz
查看管理GitHub Pages 站点的自定义域- GitHub Docs得到自定义域的ip地址,比如目前是
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
在购买域名的网站中配置DNS:创建四个条目,使用二级域名的话,名称填
@
,否则填子域名字;选择A
记录;ip分别填上述查询得到的四个ip在网页仓库的
Settings
里Custom domain
处填入域名,这会在仓库里生成一个CNAME
文件,并稍后勾选Enforce HTTPS
确保https
连接在本地的
source
中添加相同的CNAME
文件在
_config.yml
的skip_render:
填入CNAME
假如提示不安全,需要稍等证书同步好后即恢复
CDN服务
- 用的cloudfare的免费服务,只需要在域名注册的机构更改
nameserver
为cloudfare提供的即可
自建图床
利用backblaze和cloudflare建立图床和存储音频,参考如下教程
- Backblaze B2 + CloudFlare 搭建图床. Backblaze B2… | by Flinty Lemming | Medium
- Using Backblaze B2 and Cloudflare Workers for free image hosting
页面规则只需要第一个就够了,那个not found的不需要配置
Cloudflare Page部署
- 按照hexo教程部署好后,将包含src的整个根目录建立github仓库
- 在Cloudflare Pages中,新建项目,并将上一步骤的仓库授权给Cloudflare,并选用框架预设hexo
- enjoy
常见报错
to be continued
其他
以上です。