基于Hexo搭建个人博客网站

Posted on | Edited on | In , | Comments: | Views:
在Mac平台基于Hexo + Github Pages搭建个人博客网站

准备工作

首先下载nodejs,一路next安装即可。验证是否安装成功：

1
2
node -v   # 输出 v10.15.1
npm -v    # 输出 6.8.0

接下来更改npm的安装源，这能大大加快安装包的速度。

1
2
3
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，进入该文件夹执行下列命令：

1
2
3
hexo init
npm install
hexo server

此时访问http://localhost:4000就能打开博文了，Ctrl+C关闭服务器。

添加新页面

如要添加tags页面，首先运行下面命令

1
hexo new page tags

这时会在sources/tags里面生成index.md的文件，打开这个文件编辑，添加type: tags，即

1
2
3
4
5
---
title: tags
date: 2016-11-11 21:40:58
type: tags
---

最后再在主题配置文件中，在menu项下，把tags页打开。

1
2
3
4
menu:
  home: / || home
  archives: /archives/ || archive
  tags: /tags/ || tags

emoji支持

Hexo默认是采用hexo-renderer-marked，这个渲染器不支持插件扩展，还有一个支持插件扩展的是 hexo-renderer-markdown-it，可以使用这个渲染引擎来支持emoji表情，具体实现过程如下：
首先进入blog跟目录，执行如下命令

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

再安装emoji插件，执行如下命令

1
npm install markdown-it-emoji --save

最后再编辑站点配置文件，就是编辑根目录的_config.yml文件，添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 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设置：

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/username/username.github.io
  branch: master

再进入根目录执行如下命令

1
2
3
hexo clean
hexo generate
hexo deploy

第一次上传可能会让你输入git的用户名和密码。
如果成功，就可以打开http://username.github.io,username替换成自己用户名。

Hexo命令

常用命令

1
2
3
hexo n '文章名' == hexo new '文章名' #新建文章
hexo g == hexo generate            #生成静态页
hexo d == hexo deploy              #部署发布 #可与hexo g合并为hexo d -g

服务器

1
2
3
4
hexo s == hexo server  # Hexo会监视文件变动并自动更新，您无须重启服务器。
hexo s -s               #静态模式
hexo s -p 5000          #更改端口
hexo s -i 192.168.1.1   #自定义 ip

模板

1
2
3
hexo n '文章名'        #新建文章
hexo n page '页面名'   #新建页面
hexo n photo '页面名'  #新建photo页面

参考