原文链接镜像网站和自定义域名
由于众所周知的原因,github 经常抽风,偶尔了解到 netlify 可以镜像本网站,于是特记录之…
多个 git 账号同步
在 .ssh 文件夹下生成一个 config 文件配置好各个私钥.如下示例.
Host gitcafe.com
IdentityFile ~/.ssh/gitcafe
Host github.com
IdentityFile ~/.ssh/id_rsa
Host git.oschina.net
IdentityFile ~/.ssh/chitanda_osc
netfily 镜像
注册账号
Netlify 官网网站然后使用 github 账号登录
创建网站
- 点击 New site from Git 按钮
- 选择你需要部署的仓库(就是那个 username.github.io )
- 完成之后点击途中 deploy site 按钮
设置域名,绑定域名
-
可以看到 netlify 为我们随机生成了一个 netlify 下的域名,这里我们可以更改其前缀,并绑定到我们自己的域名下:
-
更改 netlify 域名前缀:点击上图中 Site settings 按钮,然后在下方点击 Change site name 按钮,然后在弹出框中输入自己需要更改的前缀名,点击保存即可,如下图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSdrMj1V-1583668916681)(/photos/镜像网站和自定义域名/更改名称.webp)]
- 如果有自定义域名可以使用 https 加密之类的,本屌就到这里就行…
参考教程
手把手教你使用 netlify 实现前端的 自动部署 + HTTPS
最牛逼的是在 github 上部署完毕后,netlify 会自动更新同步…
码云镜像
- 方法一:(必须码云和 github 同一个邮箱)
修改_config.yml 配置文件中添加码云
repo:
github: git@github.com:spygg/spygg.github.io.git
##gitee: git@gitee.com:spygg/spygg.git
- 方法二:
在码云中新建一个和你用户名一样的库,新建的时候选择导入库 导入的地址就是你 github 这个地址
如https://github.com/spygg/spygg.github.io
自定义域名解析
- 到阿里云购买一个域名
- 在阿里控制台中添加域名解析
- 在 github 工程设置中设置解析地址
- 设置 CNAME
- 将 CNAME 放到 source 根目录下
- 内容只有一个(知乎上搜的是错误示范)
liusblog.top
注意事项
要重新设置 gitalk 的回调主页为最新域名
支持多个 gitalk 方法
- 在 github 上新申请一个 OAuth Apps
- 修改主题目录下的_config.yml 文件,添加一条 gitee 的记录
## Gitalk评论
gitalk:
enable: true
clientID: xxxxx
clientSecret: xxxxx
repo: blogcomment
owner: spygg
admin: spygg
id: window.location.pathname
# perPage:
gitalkgitee:
enable: true
clientID: xxxxx
clientSecret: xxxx
repo: blogcomment
owner: spygg
admin: spygg
id: window.location.pathname
- 修改 gitalk.ejs 文件,主要是判断域名来加载不同的 oauth
<link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.6.0/gitalk.min.css">
<script src="https://cdn.bootcss.com/gitalk/1.6.0/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
var gitalk;
if(window.location.host === 'spygg.gitee.io'){
gitalk = new Gitalk({
// Gitalk配置
clientID: "<%= theme.gitalkgitee.clientID%>",
clientSecret: "<%= theme.gitalkgitee.clientSecret%>",
repo: "<%= theme.gitalkgitee.repo%>",
owner: "<%= theme.gitalkgitee.owner%>",
admin: ["<%= theme.gitalkgitee.admin%>"],
id: md5(<%= theme.gitalkgitee.id%>),
distractionFreeMode: true
});
}
else{
gitalk = new Gitalk({
// Gitalk配置
clientID: "<%= theme.gitalk.clientID%>",
clientSecret: "<%= theme.gitalk.clientSecret%>",
repo: "<%= theme.gitalk.repo%>",
owner: "<%= theme.gitalk.owner%>",
admin: ["<%= theme.gitalk.admin%>"],
id: md5(<%= theme.gitalk.id%>),
distractionFreeMode: true
});
}
gitalk.render('gitalk-container');
</script>
CDN 加速
- 在主题的_config.yml 中添加 bootstrap 和 fontAwesome 的 CDN
- 替换主页的背景图片和头像为 gittee 的绝对路径链接
- 替换 default,tagcanvas,gitment 等 css 到 gitee 的绝对路径链接
###优化图片
好吧 看来需要优化一下调色板
ffmpeg -i in.webp -vf palettegen=max_colors=256:stats_mode=single -y out_3.webp
这里的输出结果是一个调色板 并不是完整图像 由于这是单张静图所以mode使用的是single
这个参数有几种具体区别可以看文档 http://ffmpeg.org/ffmpeg-all.html#palettegen-1
再用优化过的调色板去转换 得到结果 116 KB
ffmpeg -i in.webp -i out_3.webp -lavfi "[0][1:v] paletteuse" -pix_fmt pal8 -y out_4.webp
- 批量转化 webp 脚本
- 下载 google 的 cwebp
- 编写脚本
import os
def walk(path):
for root, dirs, files in os.walk(path, topdown=False):
for name in files:
filename = os.path.join(root, name)
picname = os.path.splitext(filename)[0]
ext = os.path.splitext(filename)[-1][1:]
cmd = "cwebp -q 20 %s -o %s.webp" % (filename, picname)
if ext == 'png' or ext == 'jpg' or ext == 'jpeg':
print(cmd)
output = os.popen(cmd)
print(output.read())
walk('./source')
去掉影响大户
经过 chrome 和 google console 控制台测试发现除了图片大问题外,还有就是卜算子访客统计导致网页刷新出来缓慢,去掉后基本秒开…