gitpage镜像网站自定义域名及优化

原文链接镜像网站和自定义域名

由于众所周知的原因,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
  1. 将 CNAME 放到 source 根目录下
  2. 内容只有一个(知乎上搜的是错误示范)

  liusblog.top
  

注意事项

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

支持多个 gitalk 方法

1. 在 github 上新申请一个 OAuth Apps
2. 修改主题目录下的_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

3. 修改 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 压缩 png 图片 与 tinypng 压缩结果对比

好吧 看来需要优化一下调色板

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. 编写脚本

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 控制台测试发现除了图片大问题外,还有就是卜算子访客统计导致网页刷新出来缓慢,去掉后基本秒开…