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

Please enable JavaScript to view the Gitalk. :D