上一篇 中,我們應該已經設定好了自定義域名,接下來就是幫我們的自定義域名加上漂亮安全的 https 綠色鎖頭啦。

Add Free SSL

說到 Free SSL 相信很多人第一個想到的就是開源的 Let's Encrypt 吧,不過很遺憾在爬文時發現,Github 似乎並不支援 Let's Encrypt ,因此只好找其他的免費 SSL 憑證了,這篇要說明如何使用 CloudFlare 幫 Github Pages 掛上的免費 SSL

  1. 註冊 CloudFlare 帳號 如果你和我一樣只是要用免費版的 SSL,註冊完不必填信用卡資訊,直接到信箱收信

  2. 由此登入 點選 Add website 新增你的域名,ex: dmoon.space 確認後會開始掃描你的域名將地區檔設定掃出來,自動設定到 CloudFlare 的 DNS 上 接著他會提供幾個他設定好的 DNS 位址給你,請你到域名提供商的館理頁面,設定為他提供給你的 DNS

  3. 設定 CloudFlare 提供的 DNS 例如我是在 gandi 上買的域名,回到 gandi 域名管理頁的右下角會看到 域名伺服器,按下 修改伺服器 設定為 CloudFlare 提供的 DNS

  4. 等待... 等待... 再等待...

    更改 DNS 需要等滿久的時間才會生效,我等了應該有四五個小時,在他生效之前我們可以繼續下一步處理一些額外的設定

  5. 請先到 CloudFlare website 管理頁面,將 Crypto / SSL 設定為 Flexible 如圖:

    flexible_config.png

    好奇 Flexible 意思的請點這裡 Read More...

  6. 到這邊差不多就完成囉 接下來是對網站做一些額外設定 像是在 中加上

    1
    2
    3
    4
    5
    <script type="text/javascript">
    var host = "yoursite.com";
    if ((host == window.location.host) && (window.location.protocol != "https:"))
    window.location.protocol = "https";
    </script>

    讓 http 的連線自動導向到 https

  7. 告訴搜尋引擎偏好網址 將下面加入你的 Hexo theme header template 中

    1
    <link rel="canonical" href="<%= url %>" />

Reference

https://sheharyar.me/blog/free-ssl-for-github-pages-with-custom-domains/

留言與分享

最近看到好多人的 Github Pages 都有了自己的域名和 https,剛好在 Gandi 上看到 space 的 domain 好便宜,心血來潮於是就買了一個來玩,之前其實沒有碰過 domain 相關的設定,原先想說可能會有點麻煩,沒想到比預期還要容易許多,簡單做個筆記記錄一下,整個過程需要對 Github Pages, Gandi, CloudFlare (SSL) 做一些設定。

我們先從 custom domain 開始吧

Set Custom Domain

  1. 購買域名

    我是在 gandi 購買的,大家可以到各域名商的網站上搜尋喜歡的域名進行購買,租期到了要記得續訂,才不會發生慘劇。

  2. 設定 區域檔

    在 gandi 購買完後,進入 domain 的 管理頁面找到 編輯區域檔 的連結,進入區域檔的編輯頁面,( gandi 無法更改現正套用的設定檔,所以需要先新增一個來編輯,編輯好再選擇套用) ,總之最後設定的結果應該要長這樣

    gandi-zone-configure.png

    192.30.252.153 , 192.30.252.154 是 Github 的位址 第三個 CNAME 的設定,name 的地方可以填你想要的子網域(subDomain),value 則是填寫你的 github.io 網址(最後記得加上一個 . ex: kyoyadmoon.github.io.

    需要畫面截圖參考,請點這裡

    記得使用新編輯的設定!

    記得使用新編輯的設定!

    記得使用新編輯的設定!

  3. 等待 & 設定 Github Page CNAME 

    等待設定更新需要一些時間,多久不一定,可能幾分鐘也可能幾小時

    如果你在瀏覽器輸入你設定的子域名能夠看到 Github 的頁面(這時應該是 Github 404 頁面)表示更新生效了

    在等待的時間我們可以先來設定 Github CNAME

    能夠讓輸入原本 Github Pages url 時,自動導向到你的域名底下

    demo:

    試著開啟我的 Github Page 網址:https://kyoyadmoon.github.io/blog/

    會看到自動導向到 https://blog.dmoon.space 底下

    Github Page CNAME

    設定方法是在跟目錄底下新增一個 CNAME 檔案

    1
    blog.dmoon.space

    裡面填寫你設定的域名就可以了

    和我一樣是 Hexo 的使用者請看這裡!

    如果直接透過 git 添加到 github 上的話,下次 hexo generate, hexo deploy 時就會被覆蓋掉

    請把 CNAME 檔案放到 /source/ 底下

    hexo g 就會產生對應的檔案囉

  4. Hexo 設定

    _config.yml 中將 url 設定為新的域名

    設定好之後記得用 hexo g && hexo d 更新 blog

想要加上免費的 SSL 簽證,完成 HTTPS 綠色鎖頭請見 Hexo Github Pages 免費 SSL 設定

Read More

Reference

留言與分享

Github Blog 架設 - Hexo

分類 Blog

最近在爬文學習前端技術時,發現不少網誌都是用 github 的靜態網站來當 blog,覺得很酷,而且也不必煩惱主機的事,便搜尋了一下建立的方法,發現有滿多語言框架可以快速建立

  • JavaScript : Hexo
  • Ruby : Jekyll
  • Python : Hyde
  • PHP : Phrozn

因為對於 js 較為熟悉所以選了 Hexo 來嘗試看看,先說心得好了, Hexo 框架真的很強大,blog 大多功能幾乎都包含在裡面了,而且只需透過編輯 _config.yml ,就能完成架構及功能設定,有些功能雖然是需要另外安裝 plugin 的,使用方法都相當簡單,程式碼都埋好了,只需申請服務後,填入 id 到設定檔就可以了

  • Sitemap
  • RSS Feed
  • Google Analytics
  • Comment: Disqus

Setup

instal Node.js & Hexo

已經有 Node.js 環境可以直接安裝 Hexo

$ npm install hexo -g

詳細可以參考這裡 安裝 Hexo

Init Your Blog

hexo init <blog_name>

cd <blog_name>

npm i

再加裝一些 plugin

npm i hexo-deployer-git hexo-renderer-ejs hexo-renderer-marked hexo-renderer-stylus --save

hexo-deployer-git: deploy to github

hexo g # 產生 blog

hexo new # 建立一個新的文章

hexo s # hexo server 讓 blog 可以在 local 端檢視 http://localhost:4000

Blog Setting

前面有說過只需要透過設定 _config.yml 就可以完成,這邊需要注意的是, _config.yml 有兩個,一個在專案根目錄,另一個在 theme 資料夾裡

Blog Deploy

deploy 到 github 前需要先到 github 開一個 repo

接著將 repo 的資訊填寫到 _config.yml 的 deploy 部分

1
2
3
4
deploy:
type: git
repository: [email protected]:yourname/yourRepo.git
branch: gh-pages

url 的部分也需要調整一下,下面是範例

1
2
url: http://xxx.github.io/Blog
root: /Blog/

透過指令部署之前請先確定你有 github 的 SSH key

沒有的話請參考 這篇

然後就可以部署到 github 上了

1
hexo d # hexo deploy

Reference

Hexo offical docs

Hexo 中文安裝教學

http://v123582.github.io/blog/2015/10/25/用-hexo-建立一個自己的部落格/

留言與分享

  • 第 1 頁 共 1 頁

DMoon

熱愛科技的資工系學生,喜歡學習新的技術

目前主要開發 Web APP

較熟悉的技術是 Node.JS / React.JS


學生 / 創科資訊實習生


Taichung, Taiwan