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，或再調整樣版。

404協尋兒少專案

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