本文已同步到專(zhuān)業(yè)技術(shù)網(wǎng)站 www.sufaith.com, 該網(wǎng)站專(zhuān)注于前后端開(kāi)發(fā)技術(shù)與經(jīng)驗(yàn)分享, 包含Web開(kāi)發(fā)、Nodejs、Python、Linux、IT資訊等板塊.

一、創(chuàng)建GitHub Pages站點(diǎn)

GitHub Pages是一種靜態(tài)站點(diǎn)托管服務(wù)，旨在直接從GitHub倉(cāng)庫(kù)托管您的個(gè)人，組織或項(xiàng)目頁(yè)面。每個(gè)GitHub帳戶(hù)和組織都有一個(gè)站點(diǎn)。

1.新建倉(cāng)庫(kù)

訪問(wèn)GitHub官網(wǎng) https://github.com 登陸GitHub賬號(hào)，新建倉(cāng)庫(kù)，名稱(chēng)固定格式為: <username>.github.io

其中username是GitHub上的用戶(hù)名（或組織名稱(chēng)）如果倉(cāng)庫(kù)名稱(chēng)的第一部分與您的用戶(hù)名不完全匹配，則無(wú)法正常工作，因此請(qǐng)務(wù)必正確使用。

1.新建倉(cāng)庫(kù).png

2.將倉(cāng)庫(kù)代碼clone到本地

使用SSH或HTTPS方式, 將倉(cāng)庫(kù)代碼拉取到本地(SSH方式需要配置SSH keys, HTTPS方式需要輸入賬號(hào)密碼)

2.項(xiàng)目代碼拉取下來(lái).png

3.本地新建index.html文件

3.新建index網(wǎng)頁(yè).png

4.將本地代碼推送到github

推送到github.png

5. 訪問(wèn)站點(diǎn)

在瀏覽器中訪問(wèn) http://<username>.github.io, 即可訪問(wèn)到你的網(wǎng)站首頁(yè), 內(nèi)容為你剛才新建的index.html文件

訪問(wèn)我的網(wǎng)站.png

二、自定義域名

1.項(xiàng)目代碼中設(shè)置自定義域名(創(chuàng)建CNAME文件)

點(diǎn)擊當(dāng)前項(xiàng)目的【Settings】, 在【Custom domain】一欄輸入你自定義的二級(jí)域名, 然后點(diǎn)【Save】

自定義域名-設(shè)置.png

設(shè)置自定義域名.png

此時(shí)會(huì)在你的項(xiàng)目根目錄下會(huì)自動(dòng)生成一個(gè)CNAME文件, 文件內(nèi)容為你自定義的二級(jí)域名。

CNAME.png

CNAME內(nèi)容.png

2.域名解析中添加CNAME類(lèi)型的解析記錄

登陸到你自己的域名管理后臺(tái)，新增一條CNAME類(lèi)型的域名解析記錄, 內(nèi)容如下:

• 記錄類(lèi)型: CNAME
• 主機(jī)記錄: 自定義的二級(jí)域名
• 記錄值: <github用戶(hù)名>.github.io

添加CNAME解析記錄.png

保存后, 稍等幾分鐘,在瀏覽器訪問(wèn)你自定義的二級(jí)域名即可正常鏈接到你的github個(gè)人網(wǎng)站。

自定義的網(wǎng)站訪問(wèn)結(jié)果.png

三、Hexo搭建網(wǎng)站

Hexo官網(wǎng)中文版 https://hexo.io/zh-cn

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)。

1.安裝Hexo

(1) 安裝依賴(lài)的應(yīng)用程序：

• Node.js (最低支持版本6.9,下載地址: https://nodejs.org/en)
• **Git **(下載地址:https://git-scm.com/download)

(2) 使用 npm 安裝全局安裝Hexo

如果npm安裝速度過(guò)慢, 可使用淘寶NPM鏡像(http://npm.taobao.org) 代替npm

$ npm install -g hexo-cli

2.Hexo新建項(xiàng)目

(1) 新建網(wǎng)站項(xiàng)目, 并安裝依賴(lài)庫(kù)

在本地電腦上, 指定一個(gè)文件夾用于存放hexo項(xiàng)目代碼, 執(zhí)行以下指令:

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夾的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

(2) 本地預(yù)覽

首先在當(dāng)前項(xiàng)目下, 安裝 hexo-server 模塊

npm install hexo-server --save

安裝完成后，輸入以下命令以啟動(dòng)服務(wù)器，您的網(wǎng)站會(huì)在 http://localhost:4000 下啟動(dòng)。在服務(wù)器啟動(dòng)期間，Hexo 會(huì)監(jiān)視文件變動(dòng)并自動(dòng)更新，您無(wú)須重啟服務(wù)器。

hexo server

瀏覽器訪問(wèn) http://localhost:4000, 即可訪問(wèn)網(wǎng)站首頁(yè)。

localhost4000.png

3.Hexo配置與部署

(1) 修改配置文件_config.yml

• 安裝 hexo-deployer-git依賴(lài)庫(kù)

npm install hexo-deployer-git --save

• 修改配置(改為你自己的GitHub項(xiàng)目地址, 并且確保GitHub已配置了你當(dāng)前機(jī)器的SSH密鑰)

deploy:
  type: git
  repo: <repository url> #git@github.com:sufaith/sufaith.github.io.git
  branch: [branch] #master
  message: [message]

• repo: 庫(kù)（Repository）地址

• branch: 分支名稱(chēng)。

• message: 自定義提交信息 (默認(rèn)為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

• 將url 修改為 您的站點(diǎn)網(wǎng)址 http://yoursite.com/

配置網(wǎng)站地址和根目錄.png

(2) source目錄下，創(chuàng)建CNAME文件

CNAME文件的內(nèi)容為你自定義的二級(jí)域名

source下的CNAME.png

(3) 生成靜態(tài)文件

hexo generate
#簡(jiǎn)寫(xiě)為:
hexo g

執(zhí)行 hexo generate g命令后, 會(huì)在項(xiàng)目根目錄下自動(dòng)生成 public 文件夾, 該文件夾即是我們網(wǎng)站所需的靜態(tài)文件。

public文件夾.png

(4) 一鍵部署靜態(tài)文件至github

#先清除站點(diǎn)文件，然后重新生成站點(diǎn)文件并將之推送到指定的庫(kù)分支
hexo clean && hexo deploy
#簡(jiǎn)寫(xiě)為:
hexo clean && hexo d

執(zhí)行命令后, 成功將生成的靜態(tài)文件推送到GitHub。

成功推送到github.png

(5) 訪問(wèn)網(wǎng)站

在瀏覽器輸入你自定義的二級(jí)域名, 即可正常訪問(wèn)到你用GitHub+Hexo搭建的網(wǎng)站。

正常訪問(wèn).png