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