[實作筆記] 怎麼建立一個網站？(三) - 簡單讓網站升級使用HTTP/2

應該知道的事

  • HTTP/1.1 是目前被應用得最廣泛的通訊協定，也可以說是最成功的一個
    • HTTP/1.1 基於 TCP，需要三方交握。
    • HTTP/1.1 本身存在得需多問題，安全性、效率等…。
  • HTTP/2 可以有效改善 HTTP/1.1 的缺點，而且可以向下相容
    • 主流的瀏覽器都開始支援了。
    • 只要設定好 Web Server，Client 端看使用的瀏覽器支不支援。
  • 一流公司制定標準，二流作品牌，三流賣技術，四流作產品
    • HTTP/2 是源自 Google 的 SPDY。
    • Google 下一代 QUIC 推動中。
  • HTTP/2 並不強制加密(HTTPS)
    • 在主流瀏覽器為了向下相容，保留了 80 port 的 HTTP/1.1 通訊協定，用 443 port 實作 HTTP/2。
    • 所以還是要走 HTTPS，所以需要安全性憑証。
    • 安全性憑証要錢(現在也有免費的)。
    • cloudflare提供免費的安全性憑証。

前置作業

  1. 你要有cloudflare帳號。
  2. 看過我之網站的設定，簡單說就是一個 github page 與 透過 OpenShift 這個 PaaS 服務建立的網站。

配置

  1. cloudflare 設定 DNS，在指定的 domain 下，設定為「DNS and HTTP Proxy(CDN)」。
    設定為「DNS and HTTP Proxy(CDN)」
  2. 設定 Page-Rules，這個是為了開啟 SSL 1. 設定SSL為Flexible,輸入*.username.com/*。
    這個時候你就可以瀏覽https://blog.username.com/,但同時也可以瀏覽http://blog.username.com/ 。
    我希望 HTTP 能自動跳轉 HTTPS，這部份如果是 Node 建立的網站，我可以用程式作轉導，
    但是如果是 github page 建立網站，就要再仰賴 cloudflare 了。
  3. 設定 Page-Rules，這個是為了開啟 SSL 1. 設定ALWAYS USE HTTPS,輸入http://*.username.com/*。
    設定為「DNS and HTTP Proxy(CDN)」

設定完大致如下，順利的話幾分鐘就生效了。
生效

這時候瀏覽 http://blog.username.com/ 就會轉導到 https://blog.username.com/ 了 。

檢驗

使用 support HTTP/2 的瀏覽器，瀏覽網頁，觀察其 protocol 。
HTTP/2

系列文章

參考

(fin)

[工作筆記] 匯入文字資料到 MsSQL

前置作業

  1. 一個有權限寫入的 MsSQL Server 與 SSMS 管理工具
  2. 準備好你的檔案資料(Row Data)
  3. 這份記錄僅供參考(DB 版本使用 Microsoft SQL Server 2014)

步驟記錄

  1. 開啟 SSMS，連線測試 SQL Server
  2. 對測試資料庫右鍵>工作>匯入資料，開啟「SQL Server 匯入匯出精靈」
  3. 「開始畫面」> 下一步
  4. 「資料來源」選擇一般檔案來源，「檔案名稱」選取 Row Data 的檔案路徑
  5. 請依實際狀況選擇下列欄位
    • 「略過的標頭資料列數」: 預設為 0，可透過設定此欄位略過 Row Data 內含註解，標頭等資料
    • 「第一個資料列的資料行名稱」:若 Row Data 第一行為標頭，請勾選此欄位
    • 左側選單選擇「資料行」>「資料列分隔符號」選擇「{CR}{LF}」、「資料行分隔符號」選擇「Tab 鍵{t}」
  6. 左側選單選擇「預覽」確認匯入的資料無誤後，點擊下一步
  7. 「目的地」請選擇「SqlServer」，設定 ConnectionString
    • Data Source=1**.*..;Initial Catalog=TestDB;Persist Security Info=True;User ID=tester;Password=******;
  8. 「選取來源資料表和檢視畫面」確認無誤後，點擊下一步。
  9. 「檢閱資料類型對應畫面」請忽略資料類型的警告，點擊下一步。
  10. 「執行封裝畫面」勾選「立即執行」，點擊下一步。
  11. 「完成精靈畫面」點選完成。
  12. 執行時間長短，依 Row Data 大小而有所差異。

(fin)

[實作筆記] 怎麼建立一個網站？(二) - 簡單用github page 建立靜態網站

前置作業

  • 你要有一個 GitHub 帳號

建立 github page

如果不排斥看原文，可以直接參考

  1. 建立一個 Repository , 並且命名為 username.github.io , 這裡的 username 請使用你的 GitHub 帳號的 username.

  2. clone username.github.io 到你的本機上.

    1
    git clone https://github.com/username/username.github.io

  3. 建立一個靜態網頁 index.html , 隨便打點什麼。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <html>
      <head>
        <title>Hello world</title>
      </head>
      <body>
        <h1>Hello world</h1>
        <p>This is my github page</p>
      </body>
    </html>

  4. commit 之後,push 到 github 上 > git add –all > git commit -m “Initial commit” > git push -u origin master

  5. 瀏覽 http://username.github.io 即完成

使用自訂的 Domain

  1. 首先準備好一個 domain ex: username.xyz
  2. 需要在根目錄底下，放入一個 CName file
    檔案的內容只需要你的 domain 即可
    ex:
    blog.username.xyz
    username.xyz
    username.xyz
  3. 在 Name Servers (例如cloudflare)上設定 CNAME 到 github page,
    將 blog.username.xyz 綁定到 username.github.io
    ex:
TYPE NAME VALUE TTL
CName * username.xyz auto
CName blog username.github.io auto

更多請參考「購買網域到設定 DNS」.

透過 Hexo 部署

Hexo 基本概念可以參考官方中文文件 .

  1. 重點在於 _config.yml 的設定
    deploy:
    type: git
    repository: https://github.com/username/username.github.io
    branch: master

  2. 執行 hexo d 進行部署，這個動作會將 hexo 建立出來的靜態網站(html+css+javascript+圖片等…)部署到 github page 上。

系列文章

(fin)

如何讓 Google Analytics 追踪你的 Hexo Blog

前置作業

  1. 你要有 google 帳號，並申請好你的 google_analytics ID
  2. 這個記錄僅針對 Hexo 預設的 Theme 有作用，未來有改 Theme 的話，可能會需要手動加入，再寫文章補上

開啟_config.yml

  1. 確定一下你是使用預設的 theme landscape ## Themes
    theme: landscape
  2. 開啟 root/themes/landscape/_config.yml
  3. 找到以下的設定區段 # Miscellaneous
    google_analytics:
  4. 填入步驟 1. 中所取得 google_analytics ID
  5. 部署網站，完成!

(fin)

[實作筆記] 怎麼建立一個網站？(一) - 購買網域到設定DNS

前置作業

  1. 準備好你的 google 帳號。
  2. 可以連到美國的 VPN。google domain beta 台灣尚未開放
  3. 準備一張信用卡，狠狠的刷下去(挑對 domain 其實很便宜啦)
  4. 你的網站，什麼語言都可以，靜態的網頁也可以。
    *這裡我事先準備好了兩個網站,
    分別是用github page 與 nodejs 的 express,實作有機會再作記錄。

設定 domain

  1. Github page 所建立的網站,會提供一組 domain 給你
    ex:myDomain.github.io

  2. OpenShift 建立的網站,一樣會提供一組 domain 給你
    ex:myDomain.rhcloud.com

  3. google domain 本身有提供 Name servers , 但是由於 typeA 的 Domain,
    必須指定公用 ip(家中有裝 HiNet ADSL 可以申請一組);但實際上我的兩個網站,並不需要我準備實體 IP,
    只需要使用 type CName 將我的 subdomain 指向原本服務的 domain 即可。
    ex:

    • blog.myDomain.me → myDomain.github.io
    • www.myDomain.me → myDomain.rhcloud.com

  4. github page 要注意的事情，

你需要在你的 github page 的 repo root 加入一個名叫CName的檔案,
檔案的內容很簡單, 只需要你的 domain 即可
ex:
blog.myDomain.me
myDomain.me

Bare CName

大多數的時候, CName 的設定就夠了;不過對於我來說,
我會希望可以直接使用我的頂級 domain,畢竟這樣網址可以更短一些,
myDomain.me 比 www.myDomain.me 更有感覺。

這裡受限於 google 的 Name servers , 頂級 domain 必為 TypeA須綁定 ip
這裡我們可以使用一個免費的服務cloudflare,來達成目的

  1. 註冊cloudflare

  2. 登入後add site,輸入你註冊的 domain
    ex:myDomain

  3. cloudflare 會提供你至少兩組 Name servers
    ex:
    carter.ns.cloudflare.com
    tina.ns.cloudflare.com

  4. 請先登入google domain beta設定 Name servers 到cloudflare

  5. 請依以下步驟設定

    • * → myDomain.me
    • blog.myDomain.me → myDomain.github.io
    • www.myDomain.me → myDomain.rhcloud.com

  6. 等待約數分鐘就 ok 啦

結語

前前後後查資料弄了一個禮拜，但是實際上設定大概 1~2 小時就搞定了。
對 domain 跟 ip 的相對關係與實務結合後更有體會了。

歡迎指教討論。

系列文章

(fin)

Please enable JavaScript to view the LikeCoin. :P