2017年10月20日

Github Pages with Cloudflare CDN and HTTPS

放在 Github 上的網站也可以支援 HTTPS 連線,但是使用自訂網域的用戶還是要透過其他方式才能支援,最簡單的方式還是透過 Cloudflare,來啟用 CDN 和 HTTPS 支援,可參考:

透過Cloudflare 免費憑證,將GitHub Pages綁定個人網域也支援SSL加密連線

設定上不難,跟上次差不多,也是要注意網站是否有載入不安全的檔案,相關連結要修改成使用 https:// 或者是只寫 //

有空再來搞 404 頁面


Blogger with Cloudflare, HTTPS and OpenGraph

今天把部落格升級成只支援 HTTPS 了!

之前 Blogger 早就支援 HTTPS 了,不支援使用自訂網域的站台。最簡單的解決方式就是透過 CDN 業者(如 Cloudflare)來幫忙處理使用者到部落格這一段連線。Cloudflare 部分的設定很簡單,就是把自己網域的 name server 轉到 Cloudflare ,針對特定網址啟用 CDN,並設定好要套用 SSL 連線的網站 pattern,細節可以參考:

[教學]Cloudflare 免費不限流量CDN、DNS代管,網站全球加速、減輕伺服器負擔

另外,在 Blogger 端則需要注意網站上是否有載入非 HTTPS 連線的物件,如圖檔/script/iframe 等等,最好是一起設定成使用 HTTPS 連線來載入。Chrome 的developer console 會顯示不安全的部分,可以參考修改之。主要參考如下:

[教學] BLOGGER 自訂網址套用 CLOUDFLARE FLEXIBLE SSL 設定全流程
How To Migrate From HTTP To HTTPS On Blogger Blog With Custom Domains

我主要改掉了圖檔的連結 tag 和幾個內嵌 iframe,並修改 blogger template search widget 李的連結,改成 data:blog.searchUrl.https,並且關掉導覽列。blogger template 裡關於 url 的 tag 幾乎都多了 https 的屬性可以使用,我在修改 opengraph 屬性時,用到不少。

之前參考以下資訊作了 facebook opengraph的meta data屬性支援:

[1] http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html
[2] http://philotech1982.blogspot.tw/2014/12/metatagsforbloggersharing.html
[3] http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html
[4] https://gist.github.com/pathawks/1343315
[5] https://developers.facebook.com/tools/debug/og/object/

這次就順便重新整理,加上 HTTPS 的部分並移到前面,取代掉 all-head-content 這部分的 blogger template ,因為這部分 template 不會自動產生 HTTPS 連結。最後的成果如下:


另外也順便調整了版面寬度和 title 格式。之後可能會再加上 logo,或再調整樣版。


2017年10月13日

404協尋兒少專案

404協尋兒少專案出來一陣子了,剛剛又看到就想來支持一下。這邊先簡單利用 Blogger 內建的功能加入一段該專案提供的 html snippet就行了,大概會長的像這樣,版面還要調整一下,之後換佈景主題時再一起弄吧。Github 上還有一個小網站,改天再參考官方說明來實做。