[實作筆記] 怎麼建立一個網站？(二) - 簡單用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
    11
    12
    <!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