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

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

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

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

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

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

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

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

### 軟件安裝

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

因為我是在windows下操作的所以下載的是windows的安裝版

安裝的過程非常簡單, 直接下一步即可

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

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

- 安裝Hexo

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

因為是使用命令在線安裝的所以一定要有網(wǎng)絡(luò)連接

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

- 初始化Hexo

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

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

`hexo init`

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

- 運行Hexo

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

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

### 更換默認主題

#### 安裝主題

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

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

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

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

那要怎么從默認的主題切換到剛下載的這個主題呢

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

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

#### 配置主題

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

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

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

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

### 發(fā)布文章

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

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

`hexo new page "tags"`

`hexo new page "categories"`

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

分別打開這兩個文件就行修改

`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的這個沒得說

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

```

---

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: 你對本頁的描述

photos:

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

---

```

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

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

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

### 部署Github

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

倉庫的名稱是`用戶名.github.io`

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

如果你購買了域名的話可以在這里設(shè)置, 如果沒有域名默認的訪問路徑就是你的倉庫名稱

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

接下來我們就要把本地的博客上傳到Github了

點擊頭像選擇Settings

選擇SSH and GPG keys

創(chuàng)建新的SSH key

接下來說怎么去創(chuàng)建上圖中的Key

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

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

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

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

生成密鑰

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

找到密鑰文件的保存位置并且打開, 因為是隱藏文件所以必須顯示隱藏文件才能看到

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

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

點擊添加按鈕返回添加完成頁面

可以使用下列命令來測試SSH有沒有添加成功

然后再返回剛才自己建的倉庫

復(fù)制SSH的地址

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

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

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

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

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

接下來就可以盡情的寫文章了

### 寫在后面

#### 404頁面

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

```html

```

#### 圖床

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

#### 綁定域名

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

#### 域名解析

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

#### 其他

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