Hexo+Next博客搭建

Hexo+Next博客搭建

1.安装Hexo

在安装Hexo前，需确保已安装以下程序：

• Node.js (Should be at least nodejs 6.9)

• Git

使用npm进行安装

$ npm install -g hexo-cli

2.建站

安装完成之后，在你的博客目录下初始化hexo

$ hexo init <folder>

进入博客目录安装依赖

$ cd <folder>
$ npm install

3.配置站点

打开根目录下的_config.yml文件

配置网站基础信息

# Site
title: zhuweitung's blog # 网站标题
subtitle: 我们的征途是星辰大海。 # 网站副标题
author: zhuweitung # 您的名字
language: zh-Hans # 网站使用的语言
timezone: Asia/Shanghai # 网站时区

配置新建文章的文件名格式

# Writing
new_post_name: :year-:month-:day-:title.md # 例如.2019-06-02-xxx.md

4.使用Github-Pages进行托管

新建项目，项目名必须要遵守格式：账户名.github.io，并勾选Initialize this repository with a README。

建完之后，在账户下的 settings >> SSH and GPG keys 中添加 SSH key，内容为~/.ssh/id_rsa_pub 文件中的内容。

测试添加ssh是否成功

$ ssh -T git@github.com

复制github项目的ssh地址，并配置_config.yml #Deployment 项

deploy:
    type: git
    repository: git@github.com:zhuweitung/zhuweitung.github.io.git #github
    branch: master

hexo生成静态文件

$ hexo g

在本地预览效果（默认localhost:4000）

$ hexo s

部署到github上

$ hexo d

通过xxx.github.io查看你的博客

5.安装next

进入根目录，将hexo-theme-next项目clone到 themes/next下

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

配置站点配置文件

## Themes: https://hexo.io/themes/
theme: next

验证主题

$ hexo clean
$ hexo g
$ hexo s

6.主题基本配置

新增分类和标签页面

$ hexo new page tags
$ hexo new page categories

在source\tags\index.md文件头部中增加

type: "tags"
comments: false

在source\categories\index.md文件头部中增加

type: "categories"
comments: false

在主题配置文件中配置标签和分类的路径

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

在主题配置文件中配置个人社交网站

social:
  GitHub: https://github.com/zhuweitung || github
  E-Mail: mailto:zhuweitung@foxmail.com || envelope
  Weibo: https://weibo.com/CarolBruce || weibo
  Google: https://plus.google.com/zhuweitung || google

在主题配置文件中配置侧边栏个人头像

# Sidebar Avatar
avatar:
  url: https://ws3.sinaimg.cn/large/d67ca93ely1g3n01pbc5dj2046046jrw.jpg 
  rounded: true
  opacity: 1
  rotated: false

在主题配置文件中配置博客中的代码块可复制

codeblock:
  copy_button:
    enable: true
    show_result: true
    style: flat

设置网站动态背景

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

在主题配置文件中启用canvas_nest

canvas_nest: true

7.安装第三方插件

a.添加本地搜索功能

安装hexo-generator-search依赖

$ npm install hexo-generator-search --save

修改站点配置文件

# Search 
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件中启用本地搜索

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

b.用Leancloud统计文章阅读量

注册Leancloud>>创建应用>>开发版>>创建

创建的应用上点击存储，新建一个名为Counter的表，选择无限制，创建Class。

设置 >>应用Key，复制App ID和App Key。

修改主题配置文件

leancloud_visitors:
  enable: true
  app_id: *** # 你的app_id
  app_key: *** # 你的app_key

将自己的博客域名（https://zhuweitung.github.io）加入设置>>安全中心>>Web安全域名中。

c.用Valine实现评论系统

Valine使用的也是Leancloud的app_id和app_key。

修改主题配置文件

valine:
  enable: true
  appid: ***
  appkey: ***
  placeholder: 欢迎留言

d.添加字数和阅读时间统计

安装hexo-symbols-count-time插件

$ npm install hexo-symbols-count-time --save

修改站点配置文件

# 字数统计
symbols_count_time:
  symbols: true # 文章字数
  time: true # 阅读时长
  total_symbols: false # 所有文章总字数
  total_time: false # 所有文章阅读中时长

修改`主题配置文件

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

e.嵌入豆瓣个人主页

安装hexo-douban插件

$ npm install hexo-douban --save

在站点配置文件中添加

douban:
  user: 你的豆瓣id
  builtin: false
  book:
    title: '图书'
    quote: '书籍是人类进步的阶梯。'
  movie:
    title: '电影'
    quote: '人生就是一部电影。'
  game:
    title: '游戏'
    quote: '人生就是一场游戏。'
  timeout: 10000 

在主题配置文件的menu中添加路径

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  movies: /movies/ || film

使用一下命令生成豆瓣电影页面

$ hexo clean
$ hexo g
$ hexo douban -m

由于hexo douban 和hexo deploy都是d开头，所以部署时只能使用hexo deploy