[教學] Blogger 自訂網址套用 CloudFlare Flexible SSL 設定全流程

隨著 Blogger 將 blogspot 網域全面支援「HTTPS」之後，現在使用「Blogger 自訂網址 ( 網域名稱 )」的站長，套用「CloudFlare Flexible SSL」幫自己的 Blogger 網誌加入「HTTPS」連線已經相當容易。

如果你的 Blogger 自訂網址本身就在使用 CloudFlare 的 DNS，在 Blogger 後台新創「子域」網誌應用「CloudFlare Flexible SSL」，處理 Blogger「混合性內容」只要三分鐘就能完成基礎設定。

設置流程要開始了，我們會在 Blogger 後台新創一個「子域」網誌做練習。如果你沒有建立「子域」的經驗，可以參考「Blogger 自訂網址綁定自有域名」。如果你還沒使用「CloudFlare 的 DNS」，也可以參考「註冊申請 Cloudflare CDN 網址綁定 DNS 設定」。

混合性內容：
當網站使用 HTTPS 連線時，網站中如果含有 http 連線的 ( 圖片、影片、CSS 樣式表、js 指令碼 )，這時 HTTPS 連線的網站中含有未加密的 http 連線資料，而瀏覽器就會產生混合內容錯誤指示。

相關連結

HTTPS 範例網址「https://demo2.techcoke.com/」 Always Use HTTPS

設置流程

1. 網址遷移到 CloudFlare DNS 代管
2. Blogger 後台，建立「子域」網誌
3. 開啟 CloudFlare Flexible SSL 全域性設定
4. 設定 Flexible SSL 使用 Always Use HTTPS
5. 修正「Blogger 自訂網址」的混合性內容

設定教學

Step 1

網址遷移到 CloudFlare DNS 代管

運用CloudFlare 的 Flexible SSL 幫自己的網址加上 HTTPS，需要使用 CloudFlare DNS 和 CDN。所以先前往 CloudFlare 註冊申請一個帳號，並將 DNS 代管轉移到 CloudFlare。

如果你還沒開始使用「CloudFlare 的 DNS」，詳細的設定流程可以參考「註冊申請 Cloudflare CDN 網址綁定 DNS 設定」。

接著我們在 CloudFlare 的 DNS 頁籤建立一個「子網域」。下圖的示例，建立了一個「demo2」的子網域 CNAME，指向 Blogger 的「ghs.google.com」，並確定右邊的「橘色雲朵」是開啟的。(* 顯示為「橘色雲朵」，即為開啟 CloudFlare 的 CDN。顯示為「灰色雲朵」，只有使用 CloudFlare 的 DNS 代管。

Step 2

Blogger 後台，建立「子域」網誌

接著在 Blogger 後台，建立一個「demo2 (子網域 )」網誌做為練習使用。這一步驟建立的「子域」，與剛才在「STEP 1」CloudFlare DNS 建立的 CNAME 必須相同。如果你沒有建立「子域」的經驗，可以參考「Blogger 自訂網址綁定自有域名 (* step 2 的部份)」。

Step 3

開啟 CloudFlare Flexible SSL 全域性設定

CloudFlare Flexible SSL 的全域性設定設置過後，只要在剛才「STEP 1」於 DNS 頁籤中有開啟雲朵的 CNAME 「子域」資料，都會開始套用「Flexible SSL」的 HTTPS。

選擇「Crypto」頁籤，在 SSL (with SPDY) 選項的下拉式選單，選取「Flexible」。

接著，按下鍵盤的「F5」刷新頁面，過一段時間後，即會出現「ACTIVE CERTIFICATE」的字樣。

Step 4

設定 Flexible SSL 使用「Always Use HTTPS」

在「Page Rules」頁籤中，我們可以為個別的 CNAME 建立規則。 剛才「STEP 3」的 「Flexible SSL 全域設定」是全網域都適用 (* 只要「DNS 頁籤」有開啟橘色雲朵都適用。)，如果要為個別網址建立特殊規則，可以在「Page Rules」頁籤中做設定。

這一步，我們要為「demo2」這個子域建立「Always Use HTTPS」的規則，讓網址一直是以 HTTPS 連線。(* 目前 Free 版本，最多能夠添加三筆規則。 )

接著，點選「Page Rules」頁籤，按下畫面中的「Create Page Rule」。

然後我們添加一個子域名網址「例：http://demo2.techcoke.com/* ( demo2 後面的「techcoke.com」，請改為你的網址 )」放到圖中的框格中，再按下「Add a Setting」。

(* 設置網址後方的米字「*」記號，是將網址後面的結構網層，也運用到設定中。例如：/?m=1、/?m=0、/p/static_page.html、/2017/01/post_page.html )



選擇「Always Use HTTPS」，最後再按下「Save and Deploy」。

到這裡，我們的「demo2 (子網域 ) 網誌」網址就開始應用到 CloudFlare 提供的 HTTPS 了，而且處於一直 HTTPS 連線的狀態。前往自己剛創立的子域網址，可以看到 HTTPS 型式的網址出現了。

由於網頁中還含有「混合性內容」的問題，所以 HTTPS 型式的網址還無法有綠色圖章。接下來，在「STEP 5」我們要開始處理 Blogger「混合性內容」的問題。

Step 5

修正「Blogger 自訂網址」的混合性內容

Blogger 將 blogspot 網域全面支援「HTTPS」之後，已經將大部份的「混合性內容」都處理掉了。以「Blogger 自訂網址用戶」的角度來觀察，完全新建一個官方提供的網誌來套用「CloudFlare HTTPS」，目前僅剩網誌的「icon」需要做處理。以下我們觀察一下該如何做設定。

前往 Blogger 後台的「範本 〉編輯 HTML」，搜尋並直接添加下面的代碼替換掉「<b:include data='blog' name='all-head-content'/>」。並將下方代碼中具有 demo2.techcoke.com 的網址更改為你的網址。

<!-- <b:include data='blog' name='all-head-content'/> -->

<meta content='blogger' name='generator'/>
<link href='https://demo2.techcoke.com/favicon.ico' rel='icon' type='image/x-icon'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.isMobile'>
<link href='https://demo2.techcoke.com/?m=1' rel='canonical'/>
<b:else/>
<link href='https://demo2.techcoke.com/' rel='canonical'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<b:if cond='data:blog.isMobile'>
<link expr:href='data:blog.url' rel='canonical'/>
<b:else/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
</b:if>

<link rel='alternate' type='application/atom+xml' expr:title='data:blog.title + &quot; - Atom&quot;' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' />
<link rel='alternate' type='application/rss+xml' expr:title='data:blog.title + &quot; - RSS&quot;' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' />

<link rel='openid.server' href='https://www.blogger.com/openid-server.g' />
<link rel='openid.delegate' href='https://demo2.techcoke.com/' />

接著我們要註釋掉導覽列，因為導覽列中也藏著一個 Blogger「icon」資料。搜尋範本中的「id='navbar'」，接著用『<!--  -->』註釋掉整個包含「<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'> ~ </b:section>」導覽列資料。如下圖：

處理完「icon」的問題之後，我們就完成了整個 Blogger 自訂網址套用 CloudFlare Flexible SSL 的基礎設定了。接下來前往自己的網址，可以看到不管逛到站內的哪個連結頁面，網址都以 HTTPS 的型式呈現，綠色圖章也出來了。

首選網址 canonical

如果要在正式運行網站使用 HTTPS，我們新加入的「canonical」資料，還須做細部調整。讓網站的各個頁面都將首選網址指向「HTTPS 網址」。Blogger 自訂網址調整「canonical」資料，可參考：「Blogger 啟用 HTTPS 之後，建立網址 canonical 首選版本」。

「Blogger 自訂網址」的混合性內容

較深入的「混合性內容」問題，或是還有可能發生問題的關聯處理細則。可參考：「Blogger 自訂網址套用 Cloudflare HTTPS 之後問題總整理」。

取消 Flexible SSL Always Ues HTTPS 的問題

取消 CloudFlare 的 Flexible SSL Always Ues HTTPS 之後，可能會遇到瀏覽器記憶網站 HTTPS 資料的問題，會導致有一段時間，自己的網站無法連入。

本篇僅就練習 HTTPS 操作設置過程，如果不確定往後都要將網站導向 HTTPS 連線，建議不要將自己平常寫作的網誌設定到 HTTPS 上頭。

小結

使用 CloudFlare Flexible SSL 來部署「Blogger 自訂網址用戶」的 HTTPS，一定得開啟 CloudFlare 的 CDN。目前使用 CloudFlare CDN，在網路尖峰時間往往 ping 值會過高，偶而還會掉 ping，網頁開啟速度這部份 CloudFlare 與中華電信在網路銜接上還在拉扯，詳情可見「這裡」。

所以，對網站速度有要求的朋友，要使用 CloudFlare 的 Flexible SSL 部署 HTTPS 在自己「Blogger 自訂網域」的網站上，還需多做斟酌。網站 HTTPS 化是未來趨勢，希望  CloudFlare 與中華電信兩者能在這個部份取得彼此的平衡。

會有這篇，主要是觀察網友在留言版的提問。心想也許寫一篇完整流程，這樣大家在設定時也比較不容易出錯。而實際在 Blogger 使用「子域」新創網誌，套用 CloudFlare 的 HTTPS 加上處理「混合性內容」，整體完工時程大概不到三分鐘。

如果你的網站在套用 CloudFlare 的 HTTPS 時無從下手，不妨參考本篇的操作流程。

相關文章

Blogger 自訂網址套用 Cloudflare HTTPS 之後問題總整理 ( 持續更新 )

Blogger 自訂網址使用 CloudFlare Flexible SSL 設定 HTTPS

Blogger 使用 Cloudflare CDN、DNS 的幾點心得

Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！

[教學] 註冊申請 CloudFlare CDN 網址綁定 DNS 設定