基于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)

猜你喜欢

转载自www.cnblogs.com/VVingerfly/p/10699331.html