使用GitHub+Hexo快速搭建自己的技術(shù)博客

# 使用GitHub+Hexo快速搭建自己的技術(shù)博客

## 為什么要做技術(shù)博客

1. 你可能會(huì)遇到過(guò)這種情形, 開發(fā)中遇到一個(gè)問(wèn)題不知道怎么去解決, 然后去百度找答案, 嘗試各種解決方案, OK終于解決了, 沒(méi)過(guò)多久又碰到同樣的一個(gè)問(wèn)題, 已經(jīng)忘記之前是怎么解決的了, 又要花很長(zhǎng)的時(shí)間去百度了. 如果我們把遇到的問(wèn)題都自己總結(jié)出來(lái)做成筆記, 那么在我們整理這個(gè)筆記的過(guò)程中可能就會(huì)細(xì)化這個(gè)問(wèn)題, 從而加強(qiáng)記憶掌握這個(gè)問(wèn)題, 而不是說(shuō)遇到問(wèn)題只是百度解決問(wèn)題下次再遇到再百度的一個(gè)過(guò)程, 而是應(yīng)該遇到問(wèn)題-->解決方案-->總結(jié)記住問(wèn)題解決方案, 這才是我們能不斷學(xué)習(xí)進(jìn)步的一個(gè)過(guò)程.

2. 當(dāng)我們堅(jiān)持去做筆記做總結(jié), 不僅方面我們自己日后去復(fù)習(xí)去查找, 如果把我們的總結(jié)放到網(wǎng)上也會(huì)幫助很多遇到同樣問(wèn)題的人, 可以替他們也節(jié)省很多時(shí)間, 日積月累我們的文章寫的多了, 也會(huì)慢慢的提高我們?cè)诰W(wǎng)絡(luò)上的一個(gè)知名度.

## 做自己的技術(shù)博客要不要花錢呢

很多人一想到做網(wǎng)站就會(huì)想到說(shuō)要買域名買服務(wù)器等等, 一年又得不少錢吶, 其實(shí)不用, 做一個(gè)技術(shù)博客可以完全免費(fèi)的, 我們可以借用Github給我們提供的免費(fèi)倉(cāng)庫(kù)來(lái)存放我們的博客項(xiàng)目, 也可以使用Github給我們提供的靜態(tài)頁(yè)面地址來(lái)訪問(wèn)到我們的博客, 所以都是免費(fèi)的, 如果你想看起來(lái)高大上一些, 那你可以花錢買一個(gè)自己喜歡的域名, 那也花不了多少錢.

## 如何開始搭建自己的技術(shù)博客呢

### 軟件安裝

- 安裝Nodejs [下載安裝Nodejs](http://nodejs.cn/download/)

因?yàn)槲沂窃趙indows下操作的所以下載的是windows的安裝版

安裝的過(guò)程非常簡(jiǎn)單, 直接下一步即可

- 安裝Git [下載安裝Git](https://git-scm.com/)

Git的安裝也是直接下一步即可

- 安裝Hexo

如果你已經(jīng)安裝了Nodejs和Git, 接下來(lái)就可以使用命令來(lái)安裝Hexo了

因?yàn)槭鞘褂妹钤诰€安裝的所以一定要有網(wǎng)絡(luò)連接

打開CMD窗口輸入　`npm install -g hexo-cli`

- 初始化Hexo

安裝Hexo之后打開一個(gè)文件夾, 用來(lái)初始化Hexo, 這個(gè)文件夾作為你的博客的主目錄

然后使用CMD命令行進(jìn)入到這個(gè)目錄下執(zhí)行初始化命令

`hexo init`

接著執(zhí)行`npm install`命令

- 運(yùn)行Hexo

在前面步驟都準(zhǔn)備完畢的時(shí)候執(zhí)行命令`hexo s -g`

然后在瀏覽器中輸入`http://localhost:4000`即可查看已安裝默認(rèn)主題的Hexo

### 更換默認(rèn)主題

#### 安裝主題

Hexo默認(rèn)的主題可能不是你想要的, 那你就可以去Hexo官方收集的[主題](https://hexo.io/themes/)里選擇自己喜歡的主題，也可以自己去GitHub上面自己找主題。

我使用的主題是[NexT](https://github.com/theme-next/hexo-theme-next)，在此感謝所有給Hexo提供主題的作者，給我們提供了又好看又好用的主題。

下面就針對(duì)我使用的`NexT`主題的配置做一個(gè)介紹, 其他主題的配置也都大同小異, 一般主題都會(huì)有對(duì)應(yīng)的配置說(shuō)明, 你可以根據(jù)自己選擇的主題去修改

你可以直接從GitHub上面下載然后解壓到你Hexo目錄的themes目錄下面，也可以使用終端克隆，如果你熟悉 Git 建議你使用克隆的方式，之后的更新可以進(jìn)入到主題文件夾下通過(guò) `git pull` 來(lái)快速更新，而不用再次下載壓縮包替換, 注意目錄層級(jí), 如果解壓后的主題有多級(jí)目錄, 建議把主題文件放到主題文件夾下面的根目錄, 也可以給主題文件夾重命名

那要怎么從默認(rèn)的主題切換到剛下載的這個(gè)主題呢

找到Hexo根目錄下面的 `_config.yml` 文件，將theme字段設(shè)置為你的主題名稱，如`theme: next`并把之前的主題名使用`#`號(hào)注釋掉, 這個(gè)主題的名字一定要和你`theme`目錄下的那個(gè)主題文件夾名稱一致

修改后在終端輸入`Hexo s -g`，然后刷新瀏覽器重新訪問(wèn)`http://localhost:4000`就可以看到你安裝的新主題啦

#### 配置主題

雖然已經(jīng)切換到你新下載的主題了, 但是我們還需要對(duì)主題做一些定制化的修改

這里說(shuō)兩個(gè)配置文件, 一個(gè)是Hexo根目錄下的`_config.yml`文件, 一個(gè)是主題文件夾下面的`_config.yml`文件, 兩個(gè)配置文件同名, 暫且先叫配置一文件和配置二文件

打開配置一文件, 里面可以配置一些和你這個(gè)技術(shù)站點(diǎn)相關(guān)的信息, 還有如果你裝了一些插件的話也要在這個(gè)配置文件中配置, 這個(gè)配置非常簡(jiǎn)單, 采用鍵值對(duì)的形式, Hexo官方也給出了非常詳細(xì)的配置說(shuō)明[https://hexo.io/docs/configuration.html](https://hexo.io/docs/configuration.html)

再說(shuō)一下配置二文件, 這個(gè)是針對(duì)主題做修改的, 可以參考你下載的主題說(shuō)明, 由于每個(gè)人選擇的主題不同, 我這里不做詳細(xì)說(shuō)明了

### 發(fā)布文章

當(dāng)你配置好主題之后, 那么重點(diǎn)就來(lái)了, 怎么發(fā)布文章呢

首先打開CMD命令窗口, CD到Hexo的根目錄下, 執(zhí)行下面這兩條命令

`hexo new page "tags"`

`hexo new page "categories"`

這兩條命令是創(chuàng)建分類和標(biāo)簽文件夾的, 執(zhí)行完后會(huì)在根目錄下的`source`目錄中創(chuàng)建`tags`文件夾和`categories`文件夾, 里面分別會(huì)有一個(gè)`index.md`文件

分別打開這兩個(gè)文件就行修改

`categories`下的`index.md`內(nèi)容如下

```

---

title: #categories

date: 2018-05-01 10:24:00

type: "categories"

comments: false

---

```

`tags`下的`index.md`內(nèi)容如下

```

---

title: #tags

date: 2018-05-01 10:24:00

type: "tags"

comments: false

---

```

這些都準(zhǔn)備好了之后就可以寫文章了, 文章格式必須是markdown的這個(gè)沒(méi)得說(shuō)

但是在每篇文章內(nèi)容之前有一個(gè)固定的頭格式是這樣的

```

---

title: 博客模板

date: 2015-09-26 15:09:16

updated: 2015-09-26 15:09:16

categories: 分類名稱

tags: [標(biāo)簽, 標(biāo)簽, 標(biāo)簽]

comments: false

description: 你對(duì)本頁(yè)的描述

photos:

- 圖片的網(wǎng)絡(luò)地址

---

```

以上字段可以根據(jù)自己需要添加或者忽略不寫, 一般`title` `categories` `tags`是要有的, 其他的可以不寫

在下面就是你的文章內(nèi)容了, 如果你的文章內(nèi)容較多, 只是想在首頁(yè)文章列表中顯示文件的前面一小段描述可以使用 ``這個(gè)標(biāo)簽前面的內(nèi)容就會(huì)顯示, 后面的內(nèi)容點(diǎn)擊閱讀全文的時(shí)候才會(huì)顯示, 如果你想給你的文章弄上目錄可以使用`` , 把這個(gè)加在你文章的第一行就可以了

最后寫完文章之后保持`.md`文件到`source`目錄下面的`_posts`文件夾中, 重新執(zhí)行`hexo s -g`命令后即可在網(wǎng)頁(yè)上看到了

### 部署Github

接下來(lái)我們就要把這個(gè)本地的博客發(fā)布到網(wǎng)上了, 這樣其他人才可以訪問(wèn)的到, 我們使用的是[GitHub](https://github.com/), 如果你還沒(méi)有Github的賬號(hào)得先去申請(qǐng)一個(gè)賬號(hào), 然后登陸新建一個(gè)倉(cāng)庫(kù)

倉(cāng)庫(kù)的名稱是`用戶名.github.io`

創(chuàng)建完成之后點(diǎn)擊Settings

如果你購(gòu)買了域名的話可以在這里設(shè)置, 如果沒(méi)有域名默認(rèn)的訪問(wèn)路徑就是你的倉(cāng)庫(kù)名稱

現(xiàn)在就可以訪問(wèn)一下你的博客地址了, 會(huì)顯示下面的這個(gè)界面

接下來(lái)我們就要把本地的博客上傳到Github了

點(diǎn)擊頭像選擇Settings

選擇SSH and GPG keys

創(chuàng)建新的SSH key

接下來(lái)說(shuō)怎么去創(chuàng)建上圖中的Key

在你的博客的根目錄右鍵打開一個(gè)git窗口

先設(shè)置你的用戶名和郵箱

`git config --global user.email "你的郵箱地址"`

`git config --global user.name "你的英文用戶名"`

生成密鑰

`ssh-keygen -t rsa -C "你的郵箱地址"`

找到密鑰文件的保存位置并且打開, 因?yàn)槭请[藏文件所以必須顯示隱藏文件才能看到

打開文件夾里面有兩個(gè)文件, 打開`id_rsa.pub`并復(fù)制其內(nèi)容

然后再回到Github把復(fù)制的內(nèi)容粘貼過(guò)去

點(diǎn)擊添加按鈕返回添加完成頁(yè)面

可以使用下列命令來(lái)測(cè)試SSH有沒(méi)有添加成功

然后再返回剛才自己建的倉(cāng)庫(kù)

復(fù)制SSH的地址

打開博客根目錄下面的`_config.yml`文件在最下方粘貼

然后打開命令行執(zhí)行命令`hexo d -g`即可發(fā)布到Github

如果出現(xiàn)上述錯(cuò)誤, 可以使用`npm install --save hexo-deployer-git`命令解決

再次執(zhí)行命令`hexo d -g`

再次訪問(wèn)你的Github(用戶名.github.io)地址就能看到你發(fā)布的內(nèi)容了

接下來(lái)就可以盡情的寫文章了

### 寫在后面

#### 404頁(yè)面

404頁(yè)面我使用的是騰訊公益, 直接復(fù)制下面代碼保存成`.html`文件放到`source`目錄下重新部署到GitHub即可

```html

```

#### 圖床

在寫markdown的時(shí)候避免不了的要插入很多的圖片, 這個(gè)時(shí)候就要使用到圖床了, 推薦大家使用七牛圖床

#### 綁定域名

域名申請(qǐng)推薦大家去GoDaddy申請(qǐng), 然后綁定到Github Pages, 綁定方法也很簡(jiǎn)單, 在`source`目錄下新建一個(gè)文件命名為`CNAME`沒(méi)有擴(kuò)展名, 內(nèi)容就直接寫上你申請(qǐng)的域名即可, 然后重新部署到Github

#### 域名解析

推薦大家使用[DNSPod](https://www.dnspod.cn), 具體可以參考[Godaddy注冊(cè)商域名修改DNS地址](http://support.dnspod.cn/Kb/showarticle/tsid/42)

#### 其他

還可以自己添加統(tǒng)計(jì), 分析, 搜索, 自定義掛件, 插件, 提交搜索引擎.....