hexo 快速开始

hexo 是常用的静态网页构建工具，支持markdown，拥有丰富的插件。常用于构建个人博客。

环境

OS window 10 1809

node 10.13.0

npm 6.6.0

PowerShell 5.1.17763.134

hexo 3.8.0

hexo-cli 1.1.0

开始构建

shift+右键 启动 PowerShell，创建 hexo 目录（构建器项目）

1
mkdir hexo

进入目录

1
cd hexo

全局安装 hexo-cli，如果还没有安装nodejs和git，请参考hexo文档，此处不再重复记录

1
npm install -g hexo-cli

初始化 hexo

1
hexo init

安装依赖包

1
npm install

生成静态资源

1
hexo generate 或 hexo g

本地启动sever测试

1
hexo server

浏览器访问 localhost:4000

可以看到一个简单的个人博客系统已经完成了！

参考 hexo docs

更换主题

这里以 Next v6.0.x 为例子

下载主题

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

修改主题，修改./_config.yml中的theme为next

注意区分./themes/next/_config.yml

为了方便区分，下面更换称呼

./_config.yml称为系统配置

./themes/next/_config.yml称为主题配置

1
2
theme: next

保存

清理缓存

1
2
hexo clean

重新构建

1
2
hexo g

本地启动

1
2
hexo server

浏览器访问 localhost:4000

成功更换主题！

Hexo 优化

  1. 基本设置参考

    title: xxx’s blog
    author: xxx
    language: zh-CN
    timezone: Asia/Shanghai

主题优化

  1. 添加评论系统

    此处使用 valine

    参考 快速申请 申请 leancloud 账号，并获取 APP ID 和 APP Key

    打开主题配置./themes/next/_config.yml

    定位到 valine

    1
    2
    3
    4
    enable: true
    appid: <APP ID>
    appkey: <APP Key>

  2. 设置侧边栏

    在主题配置中，找到sidebar

    例如修改显示方式 display

    1
    2
    3
    4
    5
    #display: post  默认
    #display: always  总是显示
    display: hide  开始隐藏
    #display: remove  不显示

  3. 导航菜单

    在主题配置中，找到menu

    注释tags等，读者可以自由选择

    1
    2
    tags: /tags/ || tags

    在根目录执行指令

    1
    2
    hexo new page "tags"

    增加内容，关闭评论和指定页面类型

    1
    2
    3
    comments: false
    type: "tags"

    执行后，会创建文件夹./source/tags/，并在里面初始化tags页面的md文件index.md

    重新构建后，可以看到页面多了一个导航栏tags

    1
    2
    3
    hexo clean
    hexo g
    hexo server

  4. 文章阅读数leancloud_visitors

    在主题配置中，找到leancloud_visitors

    填写 AppID 和 AppKey

    1
    2
    3
    appid: <APP ID>
    appkey: <APP Key>

  5. 社交

    在主题配置中，找到social

    启用 social

    添加相应的社交工具以及账号

  6. Next主题开启字数统计及阅读时长

    安装 hexo-symbols-count-time

    1
    2
    npm i hexo-symbols-count-time -D

    hexo 配置文件增加

    1
    2
    3
    4
    5
    6
    symbols_count_time:
      symbols: true # 文章字数
      time: true # 阅读时长
      total_symbols: true # 所有文章总字数
      total_time: true # 所有文章阅读中时长

    Next 主题配置文件

    1
    2
    3
    4
    5
    6
    7
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false
      awl: 4
      wpm: 275

  7. 永久连接

    安装uuid

    1
    2
    npm install hexo-uuid --save

    修改hexo配置文件

    1
    2
    permalink: :year:month:day:uuid/

参考

hexo+github博客搭建之路

hexo.io

#hexo #blog
hexo 快速开始
http://example.com/2019/01/29/hexo-快速开始/
作者
Holy
发布于
2019年1月29日
许可协议