本文已同步到專業技術網站 www.sufaith.com, 該網站專注於前後端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊.
一、建立GitHub Pages站點
GitHub Pages是一種靜態站點託管服務，旨在直接從GitHub倉庫託管您的個人，組織或專案頁面。每個GitHub帳戶和組織都有一個站點。
1.新建倉庫
訪問GitHub官網 github.com 登陸GitHub賬號，新建倉庫，名稱固定格式為: <username>.github.io
其中username是GitHub上的使用者名稱（或組織名稱）如果倉庫名稱的第一部分與您的使用者名稱不完全匹配，則無法正常工作，因此請務必正確使用。
2.將倉庫程式碼clone到本地
使用SSH或HTTPS方式, 將倉庫程式碼拉取到本地(SSH方式需要配置SSH keys, HTTPS方式需要輸入賬號密碼)
3.本地新建index.html檔案
4.將原生程式碼推送到github
5. 訪問站點
在瀏覽器中訪問 http://<username>.github.io, 即可訪問到你的網站首頁, 內容為你剛才新建的index.html檔案
二、自定義域名
1.專案程式碼中設定自定義域名(建立CNAME檔案)
點選當前專案的【Settings】, 在【Custom domain】一欄輸入你自定義的二級域名, 然後點【Save】
此時會在你的專案根目錄下會自動生成一個CNAME檔案, 檔案內容為你自定義的二級域名。
2.域名解析中新增CNAME型別的解析記錄
登陸到你自己的域名管理後臺，新增一條CNAME型別的域名解析記錄, 內容如下:
- 記錄型別: CNAME
- 主機記錄: 自定義的二級域名
- 記錄值: <github使用者名稱>.github.io
儲存後, 稍等幾分鐘,在瀏覽器訪問你自定義的二級域名即可正常連結到你的github個人網站。
三、Hexo搭建網站
Hexo官網中文版 hexo.io/zh-cn
Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
1.安裝Hexo
(1) 安裝依賴的應用程式：
- Node.js (最低支援版本6.9,下載地址: nodejs.org/en)
- Git (下載地址:git-scm.com/download)
(2) 使用 npm 安裝全域性安裝Hexo
如果npm安裝速度過慢, 可使用淘寶NPM映象(npm.taobao.org) 代替npm
$ npm install -g hexo-cli複製程式碼2.Hexo新建專案
(1) 新建網站專案, 並安裝依賴庫
在本地電腦上, 指定一個資料夾用於存放hexo專案程式碼, 執行以下指令:
$ hexo init <folder>
$ cd <folder>
$ npm install複製程式碼新建完成後，指定資料夾的目錄如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes複製程式碼(2) 本地預覽
首先在當前專案下, 安裝 hexo-server 模組
npm install hexo-server --save複製程式碼安裝完成後，輸入以下命令以啟動伺服器，您的網站會在 http://localhost:4000 下啟動。在伺服器啟動期間，Hexo 會監視檔案變動並自動更新，您無須重啟伺服器。
hexo server複製程式碼瀏覽器訪問 http://localhost:4000, 即可訪問網站首頁。
3.Hexo配置與部署
(1) 修改配置檔案_config.yml
- 安裝 hexo-deployer-git依賴庫
npm install hexo-deployer-git --save複製程式碼- 修改配置(改為你自己的GitHub專案地址, 並且確保GitHub已配置了你當前機器的SSH金鑰)
deploy:
type: git
repo: <repository url> #git@github.com:sufaith/sufaith.github.io.git
branch: [branch] #master
message: [message]複製程式碼- repo: 庫（Repository）地址
- branch: 分支名稱。
- message: 自定義提交資訊 (預設為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
- 將
url修改為 您的站點網址http://yoursite.com/
(2) source目錄下，建立CNAME檔案
CNAME檔案的內容為你自定義的二級域名
(3) 生成靜態檔案
hexo generate
#簡寫為:
hexo g複製程式碼執行 hexo generate g命令後, 會在專案根目錄下自動生成 public 資料夾, 該資料夾即是我們網站所需的靜態檔案。
(4) 一鍵部署靜態檔案至github
#先清除站點檔案，然後重新生成站點檔案並將之推送到指定的庫分支
hexo clean && hexo deploy
#簡寫為:
hexo clean && hexo d複製程式碼執行命令後, 成功將生成的靜態檔案推送到GitHub。
(5) 訪問網站
在瀏覽器輸入你自定義的二級域名, 即可正常訪問到你用GitHub+Hexo搭建的網站。