如何使用hexo快速搭建个人blog

Posted on | In | | Visitors:

环境准备

我本地的环境：

1
2
node -v
v7.6.0
1
macOS 10.13.4
1
2
npm -v
4.1.2

hexo介绍

Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上。
• 超快速度
• 支持MarkDown
• 一键部署
• 丰富的插件
可以看我的blog 佳爷的后花媛

安装hexo

1
npm install hexo-cli -g

如果没有权限，需要加上sudo

1
sudo npm install hexo-cli -g

创建blog目录youridname.github.io

1
2
3
$ hexo init youridname.github.io
$ cd youridname.github.io
$ npm install

生成静态页面

1
2
3
$ hexo clean
$ hexo g
//g 即generate

运行

1
2
$ hexo s
//s 即server

然后打开浏览器，输入地址 localhost:4000(默认端口是4000，如果被占用了，可以更改端口号) 即可看到效果

发一篇文章试试
相关命令

1
2
3
$ hexo new test
此时会在source/_posts目录下生成test.md文件，输入些许内容，然后保存.
生成下，看看效果

1
2
3
4
$ hexo clean
$ hexo g
$ hexo s
访问 localhost:4000 即可

直接方式
在 source/_posts/下新建一个.md文件也可

配置
网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档下面只列出简单常用配置

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 您的名字
  • language -> 网站使用的语言
    坑：进行配置时，需要在冒号:后加一个英文空格
    title: Droidlover

换一个好看的主题,Hexo 中有很多主题，可以在官网查看。推荐hexo-theme-next，我用的也是这个，可以去我的blog看看效果。

更换主题的步骤：
下载主题资源

1
2
$ cd theme/
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

应用下载的主题
在网站配置文件_config.yml中，配置theme

1
2
theme: next
next是主题名称，具体的可查看主题的文档

主题其他配置
可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。
比如添加评论，看板娘，添加浏览人数……
接下来，可以执行万能的调试命令看看效果

1
2
3
$ hexo clean
$ hexo g
$ hexo s

git准备

没有GitHub账号的创建一个账号，注册流程就略略略了。

然后创建一个youridname.github.io的public仓库。
这里我们需要点击Choose a theme任意选择一个选择主题，然后界面会跳转到仓库，随便选主题，反正后面也要用hexo的主题。
建好仓库可以访问下https://youridname.github.io。
然后本地安装部署插件

1
sudo npm install hexo-cli -g

找到下载hexo的目录下_config.yml文件，配置deploy

1
2
3
4
5
6
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
//branch为分支，默认为master,可以不配置
//repo为仓库地址，在github上新建仓库后，可复制此地址

然后将项目部署到github上

1
hexo d

扩展blog

这时候的blog里面有很多功能没打开，可以在设置文件中更改。
相关功能如下：
1 实用性优化
• 基本使用（_config.yml文件配置）
• 添加RSS
• 添加标签、分类等页面
• 设置网站icon
• 添加侧边栏社交链接
• 添加侧边栏友情链接
• 底部显示建站时间和图标的修改
• 微信支付宝打赏功能
• 关闭网站动画效果
• 设置第三方JS库
• 添加评论系统
• 统计访客量以及文章阅读量
• 阅读次数统计（基于LanCloud）
• 字数统计
• 增加版权信息
• 添加文章分享功能
• 文章排序优先级设置
• 添加站内搜索功能
• DaoVoice在线联系
2 个性化优化
• 设置字体
• 设置代码高亮主题
• 左上角或右上角的Github样式
• 添加背景动画
• 添加顶部加载条
• 点击出现小爱心效果
• 修改文章链接文本样式
• 修改文章底部标签样式
• 文章末尾统一添加“文本结束”标记
• 修改作者头像并旋转
• 文章添加阴影效果
• 修改打赏部分字体动画
• 自定义鼠标样式
• 添加看板娘