Fork me on GitHub

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,如果还没有安装nodejsgit,请参考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中的themenext

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

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

./_config.yml称为系统配置

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

1
theme: next

保存

清理缓存

1
hexo clean

重新构建

1
hexo g

本地启动

1
hexo server

浏览器访问 localhost:4000

成功更换主题!

Hexo 优化

  1. 基本设置参考

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

主题优化

  1. 添加评论系统

    此处使用 valine

    参考 快速申请 申请 leancloud 账号,并获取 APP IDAPP Key

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

    定位到 valine

    1
    2
    3
    enable: true
    appid: <APP ID>
    appkey: <APP Key>
  2. 设置侧边栏

    在主题配置中,找到sidebar

    例如修改显示方式 display

    1
    2
    3
    4
    #display: post  默认
    #display: always 总是显示
    display: hide 开始隐藏
    #display: remove 不显示
  3. 导航菜单

    在主题配置中,找到menu

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

    1
    tags: /tags/ || tags

    在根目录执行指令

    1
    hexo new page "tags"

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

    1
    2
    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
    appid: <APP ID>
    appkey: <APP Key>
  5. 社交

    在主题配置中,找到social

    启用 social

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

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

    安装 hexo-symbols-count-time

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

    hexo 配置文件增加

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

    Next 主题配置文件

    1
    2
    3
    4
    5
    6
    symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: false
    awl: 4
    wpm: 275
  7. 永久连接

    安装uuid

    1
    npm install hexo-uuid --save

    修改hexo配置文件

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

参考

hexo+github博客搭建之路

hexo.io

--- Thank you for reading ---
0%