原文鏈接鏡像網站和自定義域名
由於衆所周知的原因,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: [email protected]:spygg/spygg.github.io.git
##gitee: [email protected]: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 控制檯測試發現除了圖片大問題外,還有就是卜算子訪客統計導致網頁刷新出來緩慢,去掉後基本秒開…