之前有朋友說(shuō)想要搭建自己的博客玩玩，于是就有了這篇：

使用 wordpress 從0到1搭建一個(gè)屬于你自己的博客網(wǎng)站

后來(lái)有些朋友覺(jué)得略麻煩，又要整服務(wù)器整域名，又要搭建各種 PHP、Mysql 環(huán)境啥的，就單純的想寫(xiě)寫(xiě)文章裝個(gè)x，能不能不整那么多花里胡哨的東西？

好巧不巧，挺久之前我就寫(xiě)過(guò)如何搭建以及使用 Github pages 來(lái)托管靜態(tài)博客網(wǎng)站的教程，姨媽巾式的范側(cè)漏那種：

使用 Hexo 框架來(lái)搭建個(gè)人網(wǎng)站?

這兩天我重新整理了一下自己的 Blog ，因?yàn)槲抑坝玫?Octopress 框架，有些年頭了，一些主題和插件并不是很多。

后來(lái)對(duì)比了幾個(gè)框架，發(fā)現(xiàn) Hexo 不錯(cuò)，和 Octopress 差不多，也是可以用 Markdown 寫(xiě)文章，然后生成靜態(tài)網(wǎng)站，Hexo 主題豐富一些。

Hexo 是基于 nodejs 的，搭建起來(lái)很簡(jiǎn)單。那么接下來(lái)就說(shuō)說(shuō)如何從 0 開(kāi)始使用 Hexo 搭建個(gè)人博客吧。

? 開(kāi)始搭建?

因?yàn)?hexo 是基于 node 框架的，所以呢，我們首先需要下載安裝node，下載地址：https://nodejs.cn/
安裝完之后，我們打開(kāi)命令窗口，輸入?node -v?，如果返回下圖所示，那么就說(shuō)明你安裝 node 成功了。

安裝成功后，我們?cè)诿钚写翱谶\(yùn)行如下命令來(lái)安裝 hexo：
```
npm install hexo-cli -g
```

初始化博客目錄：

hexo init xxx.github.io (這里的xxx換成你自己的英文名)

初始化完成后，我們就進(jìn)入我們的目錄：
```
cd xxx.github.io
```
安裝
```
npm install
```
clean一下，然后生成靜態(tài)頁(yè)面
```
hexo clean
hexo g
```

g 就是generate?,生成的意思

把你的網(wǎng)站運(yùn)行起來(lái)
hexo s

s 就是server?，在服務(wù)上運(yùn)行的意思

打開(kāi)你的瀏覽器，輸入?localhost:4000?。自此，你的個(gè)人網(wǎng)站就這么速度的搭建起來(lái)了！

優(yōu)化 hexo 博客主題

進(jìn)入你的網(wǎng)站目錄，打開(kāi) _config 文件，這個(gè)文件是用來(lái)配置你的網(wǎng)站信息的。

這里列出我的簡(jiǎn)單配置，具體可以看這個(gè)Hexo配置文檔：https://hexo.io/docs/configuration.html

title: fxxkpython
subtitle: 小帥b
description: xx的個(gè)人博客，主要涉及到編程（Java，Python，Linux等），個(gè)人提升學(xué)習(xí)，視頻教程
keywords: java，python，教程
author: wistbean
language: zh

選一個(gè)Hexo主題

剛搭建完的網(wǎng)站，是不是覺(jué)得有點(diǎn)丑，不符合你的漂亮的臉龐？反正我是這么覺(jué)得的，那么就選一個(gè)主題來(lái)裝飾一下吧，在這里可以選擇你要的主題，知乎答主們推薦的hexo主題大全：https://www.zhihu.com/question/24422335

下載Hexo主題

慢慢挑，選擇好了你的主題之后，就可以下載主題資源了，比如我這里選擇一個(gè) NEXT 主題來(lái)演示一下，在你的目錄中輸入以下命令：

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

這里主要就是將主題下載到我們的themes目錄下。

配置主題

主題下載完之后，在你根目錄下的 _config.yml 文件中，修改 theme 為你的主題名字：

theme: next

重新生成和運(yùn)行

hexo g
hexo s

訪問(wèn)一下看看，是不是比之前好看多了？

hexo博客的第一篇文章，打上標(biāo)簽和分類(lèi)

你已經(jīng)把你的網(wǎng)站打扮的漂亮大方簡(jiǎn)潔惹人愛(ài)了，那么接下來(lái)就要好好去寫(xiě)內(nèi)容了，內(nèi)容才是重要的。

兩種方式來(lái)新建你的博文

命令形式

在你的 blog 目錄下使用如下命令：

hexo new article （這里的article寫(xiě)上你的文章的名稱(chēng)）

輸入這樣的命令之后你的 source/_posts 下就會(huì)生成一個(gè) article.md 文件，在這個(gè)文件下就可以寫(xiě)上你的博客內(nèi)容了。

用 Markdown 的語(yǔ)法去寫(xiě)。

直接新建方式

直接點(diǎn)的方式就是直接在source/_posts新建一個(gè) Markdown 文件，其實(shí)和命令形式是一個(gè)道理，只不過(guò)命令形式用了命令來(lái)創(chuàng)建。推薦使用命令的方式，畢竟 Geek 一點(diǎn)。

給你的文章打上標(biāo)簽

在你的博客中打標(biāo)簽?zāi)茏屇愕奈恼路奖銠z索。

hexo打開(kāi)標(biāo)簽功能：

hexo new page tags

這時(shí)候你的 source/ 下生成 tags/index.md 文件，我們將其打開(kāi)，然后把它改成：

type: "tags"
comments: false

這時(shí)候你要為你的文章打上標(biāo)簽就可以在文章的頭部寫(xiě)上：

tags:
    - Tag1
    - Tag2
    - Tag3

比如我現(xiàn)在的這篇文章打的標(biāo)簽就是這樣的：

tags:
    - 個(gè)人網(wǎng)站
    - 教程
    - hexo
    - blog
    - Git
    - Nginx

給你的文章添加分類(lèi)

分類(lèi)，歸檔，是你博客的特性之一。把文章分門(mén)別類(lèi)，方便查看。

打開(kāi)hexo分類(lèi)功能：

hexo new page categories

同樣的，你的 source 目錄下生成 categories/index.md 文件，我們將其打開(kāi)，把它改成：

type: "categories"
comments: false

這時(shí)候你就可以給你的文章歸類(lèi)存檔了，使用方式就是在你的文章的頭部加上：

categories:
         - 分類(lèi)1
         - 分類(lèi)2

比如我現(xiàn)在的這篇文章的分類(lèi)就是這樣的：

categories:
    - 個(gè)人網(wǎng)站
    - 教程

注意：標(biāo)簽和分類(lèi)要確定你的配置文件 _config.yml 是否有打開(kāi)了 tag_dir: tags 和 category_dir: categories。另外，Markdown 的語(yǔ)法是寫(xiě)作最優(yōu)雅最簡(jiǎn)潔最簡(jiǎn)單的，如果之前沒(méi)用過(guò)的建議去學(xué)一下Markdown 語(yǔ)法說(shuō)明，一般一個(gè)鐘左右就能掌握。因?yàn)樗?HTML 那樣簡(jiǎn)單。

給你的文章添加評(píng)論

當(dāng)別人看了你的文章，有問(wèn)題想跟你探討，沒(méi)評(píng)論怎么行？評(píng)論也是你的 Blog 交互的重要方式之一。

現(xiàn)在很多 hexo 主題都內(nèi)置了第三方評(píng)論的系統(tǒng)。比較常用的有：

多說(shuō) ：http://duoshuo.com/
暢言：https://changyan.kuaizhan.com/
Valine：https://github.com/xcss/Valine
Disqus：https://disqus.com/
友言:?http://www.uyan.cc/
gitment:?https://github.com/imsun/gitment

自己去看一下，喜歡哪個(gè)用哪個(gè)，自己的 Blog 就是要自由。

選好你的評(píng)論系統(tǒng)之后，進(jìn)入平臺(tái)注冊(cè)后，平臺(tái)會(huì)給你一個(gè) APPID 和 appkey。拿到這些信息到你的主題下的配置文件下設(shè)置。

以 next 主題和暢言評(píng)論為例：進(jìn)入你的themes/next,打開(kāi)_config.yml，定位到 changyan ，把 enable 改為 true。

changyan:
  enable: true
  appid: 這里寫(xiě)上你的暢言在appid
  appkey: 這里寫(xiě)上你的暢言在appkey

設(shè)置好之后，重新clean生成一下就有評(píng)論啦：

hexo clean
hexo g
hexo s

打開(kāi)你的預(yù)覽連接看看你的文章下方，已經(jīng)有評(píng)論功能啦。如下圖就是我博客的評(píng)論功能：

讓全世界的人都認(rèn)識(shí)你

已經(jīng)搞定了個(gè)人blog，接下來(lái)當(dāng)然是要部署到網(wǎng)上讓人家訪問(wèn)了，如果不想花錢(qián)，可以使用GitHub Pages，使用它就可以部署自己的網(wǎng)站啦。

對(duì)于 GitHub 不知道怎么用的童鞋，可以看一下我的這個(gè)教程：GitHub完全使用指南：https://vip.fxxkpython.com/?cat=6

創(chuàng)建 Github pages 倉(cāng)庫(kù)

接著創(chuàng)建一個(gè) xxx.github.io 的 public 倉(cāng)庫(kù)，這里的xxx寫(xiě)你的名字，比如我寫(xiě)的是 wistbean.github.io，那么到時(shí)我就可以通過(guò)?wistbean.github.io?來(lái)訪問(wèn)我的網(wǎng)站了。

創(chuàng)建完成之后，那么你就有自己的 Git 地址了。

安裝 hexo-deployer-git

在你的博客目錄下輸入如下命令，這樣你在本地寫(xiě)的文章才能 push 到 GitHub 上面去。

npm install hexo-deployer-git --save

配置你的Git

打開(kāi)你的配置文件，然后輸入你的 git 地址：

deploy:
    type: git
    repo: https://github.com/xxx/xxxx.github.io.git

推送你的網(wǎng)站到Github上

直接輸入命令：hexo d

d 就是 deploy ，部署上去的意思。

訪問(wèn)你的網(wǎng)站

這樣push上去之后，你就可以直接在瀏覽器輸入你的?xxx.github.io?就可以訪問(wèn)啦！

要有點(diǎn)個(gè)性，綁上你的域名

如果你不喜歡千篇一律的 xx.github.io 域名，可以自己綁定一個(gè)自己的域名。

購(gòu)買(mǎi)域名

關(guān)于域名的購(gòu)買(mǎi)我比較推薦去 dynadot 或者 godaddy，這是國(guó)外的域名商，可以使用支付寶購(gòu)買(mǎi)，不需要備案，使用起來(lái)不錯(cuò)的。綁定

買(mǎi)完你的域名之后，接下來(lái)幾個(gè)步驟輕松搞定：

添加 CNAME 文件

在你的博客的 sources 目錄下新建一個(gè) CNAME 文件，這個(gè)文件里面就寫(xiě)你的域名就可以了，比如：www.xxxx.com。?接著將文件push到你的 GitHub上，可以使用?hexo d?命令。

在你的域名商后臺(tái)進(jìn)行 DNS 解析添加兩條記錄：

1. 主機(jī)記錄：@
    記錄類(lèi)型：A
    記錄值：192.30.252.154 或者 192.30.252.153

2. 主機(jī)記錄：www
     記錄類(lèi)型：CNAME
     記錄值：xxx.github.io  (這里就是你的github倉(cāng)庫(kù)名稱(chēng))

GitHub 設(shè)置域名

在你的 GitHub 設(shè)置域名，在你的 GitHub 博客項(xiàng)目中點(diǎn)擊 Settings，在 GitHub Pages 下的 Custom domain 寫(xiě)上你的域名，然后 save。

至此，你已經(jīng)搭建好了自己的博客，托管你的網(wǎng)站到 GitHub 了，也綁定了你自己的域名了，那么這時(shí)候你的網(wǎng)站就可以被全世界的人看到了。

ok，以上就是小帥b今天給你帶來(lái)的分享，希望對(duì)你有幫助，那么我們下回見(jiàn)，peace！

喲呵，Github 免費(fèi)從 0 到 1搭建個(gè)人博客網(wǎng)站

目錄