logo头像

技术引领生活!

镜像网站和自定义域名

由于众所周知的原因,github 经常抽风,偶尔了解到 netlify 可以镜像本网站,于是特记录之….

多个 git 账号同步

在 .ssh 文件夹下生成一个 config 文件配置好各个私钥.如下示例.

1
2
3
4
5
6
7
8
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 按钮,然后在弹出框中输入自己需要更改的前缀名,点击保存即可,如下图所示:

图片

  • 如果有自定义域名可以使用 https 加密之类的,本屌就到这里就行…

参考教程

手把手教你使用 netlify 实现前端的 自动部署 + HTTPS

最牛逼的是在 github 上部署完毕后,netlify 会自动更新同步….


码云镜像

  • 方法一:(必须码云和 github 同一个邮箱)
    修改_config.yml 配置文件中添加码云
1
2
3
repo:
github: git@github.com:spygg/spygg.github.io.git
##gitee: git@gitee.com:spygg/spygg.git

自定义域名解析

  • 到阿里云购买一个域名
  • 在阿里控制台中添加域名解析
  • 在 github 工程设置中设置解析地址
  • 设置 CNAME
    1. 将 CNAME 放到 source 根目录下
    2. 内容只有一个(知乎上搜的是错误示范)
      1
      liusblog.top

注意事项

要重新设置 gitalk 的回调主页为最新域名

支持多个 gitalk 方法

  1. 在 github 上新申请一个 OAuth Apps
  2. 修改主题目录下的_config.yml 文件,添加一条 gitee 的记录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
## Gitalk评论
gitalk:
enable: true
clientID: 6c31603d4df9afc8351b
clientSecret: c9e81f3ac1492550170fccb28c0f8bb16e3b7ed1
repo: blogcomment
owner: spygg
admin: spygg
id: window.location.pathname
# perPage:

gitalkgitee:
enable: true
clientID: 2e6379556d0bea565323
clientSecret: 2feb2ad5f1301351c79e1d0e2b1a177bb0661ed7
repo: blogcomment
owner: spygg
admin: spygg
id: window.location.pathname
  1. 修改 gitalk.ejs 文件,主要是判断域名来加载不同的 oauth
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 的绝对路径链接

###优化图片

1
2
3
4
5
6
7
8
9
10
11
好吧 看来需要优化一下调色板

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 脚本
  1. 下载 google 的 cwebp
  2. 编写脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 控制台测试发现除了图片大问题外,还有就是卜算子访客统计导致网页刷新出来缓慢,去掉后基本秒开….

支付宝打赏 微信打赏

您的支持是我前行的动力!