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

Please enable JavaScript to view the Gitalk. :D
Please enable JavaScript to view the LikeCoin. :P
Please enable JavaScript to view the LikeCoin. :P