技研可樂

在上一篇「 Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗！ 」，已經對為什麼要使用 HTTPS 做了約略的說明。這篇我們就實際的運用 CloudFlare Flexible SSL ，來幫自己的「 Blogger 自訂網址 ( 網域 )」 設定 『 HTTPS 』。 使用 CloudFlare 必須要有自己的網址，如果有需求購買網址，可以考慮使用有兩步驟驗證設定的「 NameCheap 」；在 Blogger 中自訂網址的設定，也可以參考「 Blogger 自訂網址綁定自有域名 」的設置說明。如果你還沒註冊 CloudFlare，可以前往「 註冊申請 CloudFlare CDN 網址綁定 DNS 設定 」觀看 DNS 的設置方法。 CloudFlare Flexible SSL 的設定，在測試時使用了三個網址分別測試幾種結果，而「Step 2.」的 Flexible SSL 設定 Always use https，是最為方便快速的方式，HTTP 網址會自動跳轉到 HTTPS 上頭 ( 強制 301 轉向 )，並在 Blogger 的行動版網頁「?m=1、?m=0」中，也能夠正確對應。 考量到「Crypto」頁籤，「HTTP Strict Transport Security (HSTS)」設定時的複雜性，建議使用「Step 2.」或「Step 4. (*『建議採用』2015/11/09 新增 )」的 Flexible SSL 設定方式即可。另外，在本篇的「小結」部份，也有對解除 SSL 做相關說明。 Blogger 的設定，除了一定要備份原始範本之外，也可以新創一個子域網綕，來做練習。在子域網誌中，匯入原始備份的範本，並套用 CloudFlare Flexible SSL，成功運行 HTTPS 綠色圖章之後，再將範本複製到平常在使用的網誌之中使用。 由於目前使用 CloudFlare CDN，在網路尖峰時間往往 ping 值會過高，這部份 CloudFlare 與中華電信在網路銜接上還在拉扯，詳情可見「 這裡 」。所以，對網站速度有要求的朋友，要使用 CloudFlare 的 Flexible SSL 部署 HTTPS，還需多做斟酌。 文章更新 (* 2017/01/10 )：

CloudFlare 為一家提供 內容傳遞網路 ( Content Delivery Network，CDN ) 的服務企業；藉由分佈於全球各地的 數據中心 ，供給 CloudFlare 代管 DNS 的主機，將網站的緩存檔案，自動分發至鄰近地區的節點，以加速載入網頁資料來改善訪客使用體驗。 CloudFlare 的 DNS 在銜接時相當流暢，從原本的 DNS 代管供應商，托管至 CloudFlare 不需要一分鐘。在 DNS 接入後，網站資料也幾近於即時更新的狀態，不會有過時資訊的產生。 CloudFlare 在代管 DNS 後，主機的 ip 位址即更換為 CloudFlare 提供的 ip 位址。若是在家自架主機，有需求隱藏自己的主機 ip 位址，也可運用 CloudFlare DNS 保護隱私。 除了更替了 ip 位址，CloudFlare 也能幫忙主機做一些功能性的幫助。例如：防止 DDoS 攻擊、支援 IPv6，並在主機臨時出問題時也能提供暫存資料，以確保網站能夠長期在線。 另外，DNS 的設定頁面在操作上也相當便利，是使用托拉的方式開啟或關閉當作切換 CloudFlare 的功能，而在單一帳戶也提供記錄數百萬條 DNS 資料；若升級到「Business plan」，也能自定義自己的 nameserives 名稱。 而不久前，在做「 測試 」時大陸地區只有香港一個 數據中心 。才一個月的時間，CloudFlare 在中國大陸地區又陸續增加了好幾個數據心中；相信日後使用 CloudFlare 時，會越來越快、越來越好用。 CloudFlare 除了免費的 CDN 與 DNS 代管，也提供 Security、SSL、Analytics、Apps 與優化設定供用戶使用。以下則是相關的 CloudFlare 註冊 CDN 與 網址 ( 網域 ) 綁定 DNS 代管 設定 教學 ，若你也想加入 CloudFlare 懷抱，不妨將本篇當作參考資料。 (16/07/22)文章更新： CloudFlare 目前已新增台北數據路由中心，網站連線情況較撰文當時還要穩定了許多。 設置流程 註冊 CloudFlare CDN CloudFlare DNS 代管設定 ( NameCheap、N

Blogger 網誌模板範本應用 教學 ：早前，介紹了在「 Blogger 繼續閱讀隱藏廣告和物件 」，是運用 blogspot 本身的「read more 繼續閱讀 ( <!--more--> )」在文章頁面自動擺放廣告。這篇則介紹於 Blogger 文章中隨意 任意位置 快速擺放 Google AdSense   廣告 的方法。 同樣的，我們會利用到 HTML 範本中的「文章主體 ( <data:post.body/> )」，並在安裝幾行 Div 與 JavaScript 之後即可完成設定；以後，只要在撰寫文章時，從「撰寫」切換到「HTML」模式，並在任意位置放入「 <!-- adsense --> 」，廣告就會順利推送。 當然，如果你希望廣告在推播到自己的網誌時，能夠有多一點的變化，也可以參考「 Blogger 放置 Google AdSense 自訂廣告尺寸大小 、 自適應網站安裝 Google AdSense 回應式廣告，三分鐘搞定！ 」這兩篇文章的廣告使用方式，做更靈活的配置運用。 設置流程 找查需要置入程式代碼的 HTML 區段 使用程式代碼包覆「文章主體 (  <data:post.body/>  )」 文章撰寫時放入「 <!-- adsense --> 」廣告的方式 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 找查需要置入程式代碼的 HTML 區段 前往 Blogger 後台，點選【範本 \ 編輯HTML】 在程式碼頁框裡面用滑鼠左鍵點一下，並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ，在出現的搜尋框中輸入 [ <data:post.body/> ] 並按下鍵盤【Enter】 此時，在程式碼區間 ( 如果範本沒有改的太亂 . . ) ，可以找到三處有「 <data:post.body/> 」的程式碼片段。 第一個「 <data:post.body/> 」為 "行動模板&qu

使用 Blogger「行動服務」，開啟了「行動版範本」之後，若曾在 Google 中使用「site:網誌名稱.blogspot.tw」搜尋自己的 Blogger 文章，應該能察覺到，同一篇文章在 Google 搜尋 時，可能有 標題 、 描述 『 網址 』 重複 出現「 ?m=1 、 ?m=0 」的問題！ 從電腦 ( 桌機 ) 版的搜尋者角度，試著觀察重複文章連結的網址結構；一般電腦版網站的網址結尾為「.html」，行動版 ( 手機版、移動版 ) 網站的網址結構則為「.html?m=1」或是「.html?m=0」，以上兩者皆為重複的部份。(*「.html?m=0」為「.html?m=1行動版網頁」切換回電腦版後所顯示的格式。) 在 Google Webmaster ( Search Console ) 設定中，如果沒特意挑除「.html?m=*」類型的網址。那麼，在每一次寫新文章時，就有一定的概率導致重複文章，出現於搜索結果中。 重複文章在搜尋頁面中出現，會讓文章權重比下降，進而造成文章在搜索結果上，有較為不理想排名。 你可能會想，怎不用 robots.txt 直接移除「?m=*」類型的網址就好了。行不通！因為若在 robots.txt 做了移除「?m=*」的動作，描述的部份會顯示如下圖的狀態。(* 左圖為正常，右圖因為在 robots.txt 中不索引「?m=*」類型網址，於 Google 搜尋中無法顯示網頁描述的部份。 ) 而且，原本會在 Google 搜尋中顯示的「網站連結 (* 網站內的連結單元，由 Google 經由演算後產生的網站連結，『站長無法自行「啟用」網站連結。 瞭解詳情 』 )」也會消失 (* 如上圖左的：聯絡我們、版權聲明。) 。從上圖右與下圖的電腦版皆可觀察到，無法顯示網站連結。 關於 SEO ( 搜尋引擎最佳化 )，應該是每位站長都在關注的議題；若你的 Blogger 網誌在 Google 搜尋頁面中，也想剔除重複「?m=*」類型網址的文章標題及描述，不妨參考本篇的方法來做相關的佈署設置。 注意事項： 在做本篇設置前，請先閱讀完整篇文章後再做設定。並在動手試做時，先找一篇比較少人在看的文章做實驗，免除文章全數在 Google 搜尋中完全找不到的風險！ 前置作

若你的 Blogger 網誌，有需求製作音頻單元，提供訪客更多元的學習資源。可以運用 FeedBurner 的 iTunes Podcast ( 播客 ) 功能，燒製有聲 Media RSS ；藉由 iTunes 的播送，豐富讀者除了在文字外的感官覺受。 iTunes Podcast Media RSS 製作時 ，需準備一個「網路外連 mp3 音源檔」；另外，如果在 iTunes Podcast 上播放時想顯示專輯封面，也可以預備一張「網路外連等比例 jpg 圖檔」，當作封面材料。 若你為第一次使用 FeedBurner，可以參考「 FeedBurner 將 RSS 作者前 [email protected] 改為自己的 Email 地址  Step1.」註冊一個帳號，並確認 RSS 供稿為「RSS 2.0 ( http://blogname.blogspot.com/feeds/posts/default?alt=rss )」。好的，接下來，我們動工吧！ 相關連結 FeedBurner：「 https://feedburner.google.com/ 」 設置前準備 一個網路外連 mp3 音源檔 一張網路外連正方形 jpg 圖檔 確認 RSS 供稿為「 http://blogname.blogspot.com/feeds/posts/default?alt=rss 」類型 設置流程 FeedBurner 設定在 iTunes 中顯示圖片 Blogger 加入 mp3 外連檔、播放器，確認音源檔成功推播 iTunes 訂閱 FeedBurner Media RSS 設定教學 Step 1 FeedBurner 設定在 iTunes 中顯示圖片 在設置頁面，點選「Analyze 〉Configure Stats」，將「 Item enclosure downloads (podcast downloads)」打勾，再按下「Save」儲存。 選擇「Optimize 〉Smart Cast」，將「Include iTunes podcasting elements」打勾，於「Podcast image location:」填上圖片位址，並在「Create podc