基於Hexo搭建我的博客網站

 

## 準備工做

首先下載[nodejs](https://nodejs.org/en/download/),一路next安裝便可。驗證是否安裝成功：

```bash

node -v # 輸出 v10.15.1

npm -v # 輸出 6.8.0

```

接下來更改npm的安裝源，這能大大加快安裝包的速度。

```bash

npm get registry # 輸出默認源 https://registry.npmjs.org/

npm config set registry http://registry.npm.taobao.org

npm get registry # 輸出 http://registry.npm.taobao.org/，說明已更改成淘寶源

```

再運行`npm install hexo-cli -g`。

若是出現`permission error`，不要急着用`sudo npm install hexo-cli -g`，運行命令

`sudo chown -R 'whoami' /usr/local/lib/node_modules`，`'whoami'`即你的用戶名，經過`whoami`命令查看。

而後再運行`npm install hexo-cli -g`。

驗證是否安裝成功，命令行輸入`node -v`，輸出hexo-cli等衆多包即對應的版本則OK。

## 建立本地博文服務

在本地新建你的博客文件夾如`blog_hexo`，進入該文件夾執行下列命令：

```bash

hexo init

npm install

hexo server

```

此時訪問[http://localhost:4000](http://localhost:4000)就能打開博文了，`Ctrl+C`關閉服務器。

### 添加新頁面

如要添加tags頁面，首先運行下面命令

```sh

hexo new page tags

```

這時會在`sources/tags`裏面生成`index.md`的文件，打開這個文件編輯，添加`type: tags`，即

```

---

title: tags

date: 2016-11-11 21:40:58

type: tags

---

```

最後再在主題配置文件中，在menu項下，把tags頁打開。

```

menu:

home: / || home

archives: /archives/ || archive

tags: /tags/ || tags

```

### emoji支持

Hexo默認是採用hexo-renderer-marked，這個渲染器不支持插件擴展，還有一個支持插件擴展的是 hexo-renderer-markdown-it，能夠使用這個渲染引擎來支持emoji表情，具體實現過程以下：

首先進入blog跟目錄，執行以下命令

```sh

npm un hexo-renderer-marked --save

npm i hexo-renderer-markdown-it --save

```

再安裝emoji插件，執行以下命令

```sh

npm install markdown-it-emoji --save

```

最後再編輯站點配置文件，就是編輯根目錄的_config.yml文件，添加以下內容

```yml

# Markdown-it config

## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki

markdown:

render:

html: true

xhtmlOut: false

breaks: true

linkify: true

typographer: true

quotes: '「」‘’'

plugins:

- markdown-it-abbr

- markdown-it-footnote

- markdown-it-ins

- markdown-it-sub

- markdown-it-sup

- markdown-it-emoji # add emoji

anchors:

level: 2

collisionSuffix: 'v'

permalink: true

permalinkClass: header-anchor

permalinkSymbol: ¶

```

## 關聯github

首先在GitHub中新建`username.github.io`倉庫，其中`username`爲本身的用戶名。

再進入blog_hexo根目錄，安裝`npm install hexo-deployer-git --save`，而後打開根目錄下的_config.yml，拉到最下面, 修改Deployment設置：

```

# Deployment

## Docs: http://hexo.io/docs/deployment.html

deploy:

type: git

repository: https://github.com/username/username.github.io

branch: master

```

再進入根目錄執行以下命令

```bash

hexo clean

hexo generate

hexo deploy

```

第一次上傳可能會讓你輸入git的用戶名和密碼。

若是成功，就能夠打開`http://username.github.io`,`username`替換成本身用戶名。

## Hexo命令

### 經常使用命令

```bash

hexo n '文章名' == hexo new '文章名' #新建文章

hexo g == hexo generate #生成靜態頁

hexo d == hexo deploy #部署發佈 #可與hexo g合併爲hexo d -g

```

### 服務器

```bash

hexo s == hexo server # Hexo會監視文件變更並自動更新，您無須重啓服務器。

hexo s -s #靜態模式

hexo s -p 5000 #更改端口

hexo s -i 192.168.1.1 #自定義 ip

```

### 模板

```bash

hexo n '文章名' #新建文章

hexo n page '頁面名' #新建頁面

hexo n photo '頁面名' #新建photo頁面

```

## 參考

- [Hexo](https://hexo.io/zh-cn/)

- [awesome-hexo](https://github.com/hexojs/awesome-hexo)

- [Hexo部署github博客](https://blog.csdn.net/zhengyong15984285623/article/details/82380735?utm_source=blogxgwz5)

- [親測Hexo+Github我的博客搭建](http://blog.51cto.com/13872978/2318972?source=dra)

- [HEXO+Github,搭建屬於本身的博客](https://wenlisu.github.io/HEXO+Github%EF%BC%8C%E6%90%AD%E5%BB%BA%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2.html)

- [搭建Hexo博客進階篇--API和一些小部件（四）](https://www.jianshu.com/p/57e22584b277)

- [使用hexo+github搭建免費我的博客詳細教程](https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html)