最近想搞個(gè)個(gè)人網(wǎng)站霉颠，身邊的朋友都說挺簡單的猬仁，那就開始倒弄了······

github提供的page鹉勒，hexo提供的靜態(tài)博客文檔帆锋，這樣可以搭建一個(gè)自己的一個(gè)博客網(wǎng)站。

使用github pages服務(wù)搭建博客的好處有：

全是靜態(tài)文件禽额，訪問速度快锯厢；
免費(fèi)方便，不用花一分錢就可以搭建一個(gè)自由的個(gè)人博客脯倒，不需要服務(wù)器不需要后臺(tái)实辑；
可以隨意綁定自己的域名，不仔細(xì)看的話根本看不出來你的網(wǎng)站是基于github的藻丢；
數(shù)據(jù)絕對安全剪撬，基于github的版本管理，想恢復(fù)到哪個(gè)歷史版本都行悠反；
博客內(nèi)容可以輕松打包残黑、轉(zhuǎn)移、發(fā)布到其它平臺(tái)斋否；

一梨水、github相關(guān)設(shè)置

1、在github上創(chuàng)建一個(gè)項(xiàng)目

注意：項(xiàng)目名稱必須為自己 github的用戶名.github.io

image

2茵臭、代碼庫的設(shè)置

開啟gh-pages功能疫诽，點(diǎn)擊界面右側(cè)的Settings，你將會(huì)打開這個(gè)庫的setting頁面，向下拖動(dòng)奇徒，直到看見GitHub Pages雏亚。

之前是需要：點(diǎn)擊Automatic page generator，Github將會(huì)自動(dòng)替你創(chuàng)建出一個(gè)gh-pages的頁面摩钙。 如果你的配置沒有問題罢低，那么大約15分鐘之后，yourname.github.io這個(gè)網(wǎng)址就可以正常訪問了~ 如果yourname.github.io已經(jīng)可以正常訪問了胖笛，那么Github一側(cè)的配置已經(jīng)全部結(jié)束了奕短。

現(xiàn)在不需要設(shè)置page generator。就可以訪問https://saucxs.github.io/

image

二匀钧、安裝hexo

1、全局安裝hexo-cli指令

npm install hexo-cli -g

查看hexo版本

hexo -v

2谬返、初始化hexo

hexo init

hexo會(huì)自動(dòng)下載一些文件到這個(gè)目錄之斯，包括node_modules，目錄結(jié)構(gòu)如下圖：

image

3遣铝、開始體驗(yàn)hexo

hexo g

生成靜態(tài)文件到public文件夾佑刷，沒有public文件夾就會(huì)自動(dòng)創(chuàng)建，如果有了就會(huì)覆蓋public內(nèi)容酿炸。

public文件夾的內(nèi)容是要提交到github上的瘫絮。

image

4、開啟本地服務(wù)

hexo s

hexo s是開啟本地預(yù)覽服務(wù)填硕，打開瀏覽器訪問 http://localhost:4000 即可看到內(nèi)容麦萤，很多人會(huì)碰到瀏覽器一直在轉(zhuǎn)圈但是就是加載不出來的問題，一般情況下是因?yàn)槎丝谡加玫木壒时饷校驗(yàn)?000這個(gè)端口太常見了壮莹，解決端口沖突問題。

image

三姻檀、如何將hexo與github page聯(lián)系起來

分為3步：

1命满、配置SSH key
2、設(shè)置Git的user name和email
3绣版、配置deployment

1胶台、配置SSH key

如果你之前已經(jīng)配置好git個(gè)人信息，請?zhí)^這一個(gè) 步驟杂抽，直接來到

為什么要配置這個(gè)呢诈唬？因?yàn)槟闾峤淮a肯定要擁有你的github權(quán)限才可以，但是直接使用用戶名和密碼太不安全了默怨，所以我們使用ssh key來解決本地和服務(wù)器的連接問題讯榕。

$ cd ~/. ssh #檢查本機(jī)已存在的ssh密鑰

如果提示：No such file or directory 說明你是第一次使用git。

ssh-keygen -t rsa -C "郵箱"

然后連續(xù)3次回車，最終會(huì)生成一個(gè)文件在用戶目錄下愚屁，

image

打開用戶目錄济竹，找到.ssh\id_rsa.pub文件，記事本打開并復(fù)制里面的內(nèi)容霎槐，打開你的github主頁送浊，進(jìn)入個(gè)人設(shè)置 -> SSH and GPG keys -> New SSH key：

剛復(fù)制的內(nèi)容粘貼到key那里，title隨便填丘跌，保存袭景。

image

測試一下是否成功

$ ssh -T git@github.com # 注意郵箱地址不用改

image

看到這個(gè)信息說明SSH已配置成功！

2闭树、設(shè)置Git的user name和email

git config --global user.email "xxx@163.com"http:// 填寫你的github注冊郵箱

設(shè)置這個(gè)是為了便與之后上傳到github的page上。

3报辱、設(shè)置deployment

配置_config.yml中有關(guān)deploy的部分：

正確寫法：

deploy:
  type: git
  repository: git@github.com:saucxs/saucxs.github.io.git
  branch: master

錯(cuò)誤寫法：

deploy:
  type: github
  repository: https://github.com/saucxs/saucxs.github.io.git
  branch: master

后面一種寫法是hexo2.x的寫法与殃，現(xiàn)在已經(jīng)不行了，無論是哪種寫法碍现，此時(shí)直接執(zhí)行hexo d的話一般會(huì)報(bào)如下錯(cuò)誤：

Deployer not found: github 或者Deployer not found: git

image

需要安裝一個(gè)插件

npm install hexo-deployer-git --save

如果顯示下圖

安裝失敺邸！

試一下這個(gè)昼接！

npm install eslint@4.x babel-eslint@8 --save-dev

以上代碼是可以解決該問題的爽篷，重點(diǎn)是eslint@4.x 和 eslint@8后面的數(shù)字是根據(jù)報(bào)錯(cuò)信息提示的來寫。

類似的問題慢睡，比如：

ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

再次輸入hexo d逐工，就ok了。

image

自己的github的page漂辐，顯示如下

image

同時(shí)钻弄，你的github上的項(xiàng)目，代碼已經(jīng)更新者吁。

image

四窘俺、保留CNAME、README.md等文件

提交之后網(wǎng)頁上一看复凳，發(fā)現(xiàn)以前其它代碼都沒了瘤泪，此時(shí)不要慌，一些非md文件可以把他們放到source文件夾下育八，這里的所有文件都會(huì)原樣復(fù)制（除了md文件）到public目錄对途。

由于hexo默認(rèn)會(huì)把所有md文件都轉(zhuǎn)換成html，包括README.md髓棋，所有需要每次生成之后实檀、上傳之前惶洲，手動(dòng)將README.md復(fù)制到public目錄，并刪除README.html膳犹。

五恬吕、修改hexo的主題

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml须床。 其中铐料，一份位于站點(diǎn)根目錄下，主要包含 Hexo 本身的配置豺旬；另一份位于主題目錄下钠惩，這份配置由主題作者提供，主要用于配置主題相關(guān)的選項(xiàng)族阅。

為了描述方便篓跛，在以下說明中，將前者稱為 站點(diǎn)配置文件坦刀， 后者稱為 主題配置文件举塔。

PS：需要特別注意的地方是，冒號(hào)后面必須有一個(gè)空格求泰，否則可能會(huì)出問題。

舉個(gè)栗子：

1. 安裝 NexT

載主題

如果你熟悉 Git计盒， 建議你使用 克隆最新版本 的方式渴频，之后的更新可以通過 git pull 來快速更新， 而不用再次下載壓縮包替換北启。

在終端窗口下卜朗，定位到 Hexo 站點(diǎn)目錄下。使用 Git checkout 代碼：

git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 啟用主題

與所有 Hexo 主題啟用的模式一樣咕村。 當(dāng) 克隆/下載 完成后场钉，打開 站點(diǎn)配置文件， 找到 theme 字段懈涛，并將其值更改為 next逛万。

啟用 NexT 主題

theme: next

到此，NexT 主題安裝完成批钠。下一步我們將驗(yàn)證主題是否正確啟用宇植。在切換主題之后、驗(yàn)證之前埋心， 我們最好使用 hexo clean 來清除 Hexo 的緩存指郁。

hexo clean

image

hexo s -g //生成靜態(tài)文件，啟動(dòng)本地服務(wù)

六拷呆、 寫博客

定位到我們的hexo根目錄闲坎，執(zhí)行命令：

hexo new ‘HelloEveryone’

image

我們只需要打開這個(gè)文件就可以開始寫博客了疫粥，默認(rèn)生成如下內(nèi)容

當(dāng)然你也可以直接自己新建md文件，用這個(gè)命令的好處是幫我們自動(dòng)生成了時(shí)間腰懂。

默認(rèn)情況下梗逮，生成的博文目錄會(huì)顯示全部的文章內(nèi)容，如何設(shè)置文章摘要的長度呢悯恍？

答案是在合適的位置加上``即可

參考資料：
npm install 包運(yùn)行出錯(cuò)
github+hexo搭建自己的博客網(wǎng)站（一）基礎(chǔ)入門