Hexo + githug-pages 搭建博客完全教程

发表于 | 分类于 | | 浏览 次
字数统计: 1.2k 字 | 阅读时长 ≈ 5 分钟

安装hexo

环境依赖

软件环境

  • nodejs
  • Git

安装插件及目录准备

1
2
3
$ mkdir hexo  #创建一个文件夹
$ cd hexo
$ npm install -g hexo-cli

初始化Hexo

在Git shell中输入

1
$ hexo init

安装Hexo常用插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ npm install hexo --save
$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-deployer-heroku --save
$ npm install hexo-deployer-rsync --save
$ npm install hexo-deployer-openshift --save
$ npm install hexo-renderer-marked@0.2 --save
$ npm install hexo-renderer-stylus@0.2 --save
$ npm install hexo-generator-feed@1 --save
$ npm install hexo-generator-sitemap@1 --save
$ npm install hexo-wordcount --save  # 统计文章字数
$ npm install hexo-admin --save  # 管理工具
$ npm install hexo-generator-searchdb --save  # 站内全局搜索

Hexo常用命令

init

新建一个网站。如果没有设置folder，Hexo 默认在目前的文件夹建立网站。

1
$ hexo init [folder]

注：folder必须为空。

new

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md。

1
2
3
$ hexo new [layout] "postName" #新建文章
# 或者
$ hexo n "postName"

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout参数代替。如果标题包含空格的话，请使用引号括起来。有哪些layout呢，可以到scaffolds目录下查看，这些文件名称就是layout名称。

想要给每篇文章添加分类,在hexo/scaffolds/post.md模板中添加categories

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
---

generate

1
2
3
$ hexo generate
# or
$ hexo g

生成静态文件,参数如下：

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

server

1
2
3
$ hexo server
# or
$ hexo s

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

deploy

1
2
3
$ hexo deploy
# or
$ hexo d

部署网站。

clean

1
$ hexo clean

清除缓存文件db.json和已生成的静态文件public。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

更多命令见官方文档

主题

下载主题

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

应用主题

在hexo目录下找到_config.yml配置文件，找到theme字段，并将其值更改为 next，如下所示：

1
theme: next

设置RSS

在上面的步骤中已经安装了Rss插件，只要要在hexo/themes/next/_config.yml配置文件中添加如下一行即可：

1
rss：

添加标签tags页面

使用hexo new page新建一个页面，命名为tags，布局格式为page，生成配置文件路径hexo/source/tags/index.md

1
$ hexo new page tags

内容如下所示，如果要关闭tags页面的评论可以设置comments为false：

1
2
3
4
5
6
7
---
title: tags
date: 2018-11-01 11:00:07
type: "tags"
layout: "tags"
comments: false
---

同理添加categories

第三方插件

访问统计

找到next主题的配置文件hexo/themes/next/_config.yml，修改busuanzi相关配置项，即：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 访问总量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 浏览
  page_pv_footer: 次

由于busuanzi之前的域名过期了，所以我们需要修改的模板文件是hexo/themes/next/layout/_third-party/analytics/busuanzi-counter.swig，修改引入script行js地址：

1
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

统计插件：不蒜子

站内全局搜索

安装插件

1
$ npm install hexo-generator-searchdb --save

修改 站点配置文件hexo/_config.yml,添加:

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改 主题配置文件hexo/themes/next/_config.yml

1
2
local_search:
  enable: true

开启评论

试了下就valine好用点(gitment坑太多。。)，且目前next主题中已经集成了valine

  • 在leancloud官网 注册账号
  • 创建一个应用
  • 进入应用->设置->应用key 找到appid 和 appkey

  • 修改主题配置hexo/themes/next/_config.yml，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    valine:
      enable: true
      appid: {你的appid} # your leancloud application appid
      appkey: {你的appkey} # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: Just go go # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size

  • 进入安全中心 -> Web 安全域名 中添加你的web地址

  • 大功告成

部署到github-pages

  • 在github上创建一个新的repo，名称为{你的github用户名}.github.io，例：我的github地址为https://github.com/dengshaochun则我的repo名为dengshaochun.github.io
  • 添加本地主机公钥到github账户，参考 github官方教程
  • 修改hexo/_config.yml配置文件deploy段，如下
1
2
3
deploy:
  type: git
  repository: git@github.com:dengshaochun/dengshaochun.github.io.git

注意：需要使用ssh方式，https方式需要密码。

参考文档

Hexo 官方文档

next 主题官方教程

0%