hexo使用

发表于 更新于 阅读次数：

开始使用

Hexo官网
Hexo是一个基于NodeJS环境的、快速、简洁且高效的博客框架。

  1. 能快速将MarkDown格式文件生成静态网页
  2. 将静态网页托管到GitPage(github提供的免费的静态网站托管服务)
  3. 后期个人博客维护

git安装与配置

git安装教程

nodejs环境安装及配置

  1. 下载安装
    https://nodejs.org/dist/v8.1.3/node-v8.1.3-win-x64.zip
    https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz
    $ xz -d node-v6.10.1-linux-x64.tar.xz
    $ tar -xvf node-v6.10.1-linux-x64.tar
  2. 解压，配置PATH 
    1
    2
    3
    4
    npm config set registry https://registry.npm.taobao.org

    npm config set prefix "/u0/lixl/nodejs/node_global"
    npm config set cache "/u0/lixl/nodejs/node_cache"

安装hexo及初始化

1
2
3
4
5
6
7
8
9
10
11
-- 安装 hexo
npm install hexo@3.9.0 -g

-- 初始化myblog文件夹
hexo init myblog
-- 安装依赖
cd myblog //进入这个myblog文件夹
npm install
-- 本地查看
hexo g
hexo server

hexo中git配置

配置_config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

推送到github

1
2
3
4
npm install hexo-deployer-git@1.0.0 --save
hexo clean
hexo generate
hexo deploy

使用ssh redeploy

  1. 重新生成 SSH key 
    1
    ssh-keygen -t rsa -C "Github的注册邮箱地址"

打开 /c/Users/user/.ssh/id_rsa.pub 并复制其内容

  1. 配置git 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    访问 GitHub – Settings – SSH and GPG keys – New SSH key
    Title:  blog       Key:  id_rsa.pub 的内容
    ```   
    3. 修改站点配置文件 _config.yml      
    ```yml
    # 把deploy中的repo由注释的格式改为以下格式
    deploy:
      type: git
      #repo: https://github.com/username/username.github.io.git
      repo: git@github.com:username/username.github.io.git
      branch: master

创建新页面

1
2
3
4
5
6
7
hexo creat "新页面"

## 设置ID
hexo new "标题" --id="20190705170110"

## 搜狗输入法自定义时间戳 sjc快捷键
#$year$month_mm$day_dd$fullhour$minute$second

添加搜索功能

1.npm安装插件

1
npm install hexo-generator-searchdb --save

2.修改配置_config.yml

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

3.修改主题配置themes/next/_config.yml

1
2
local_search:
  enable: true

本地图片显示

1.找到Hexo下的_config.yml

1
post_asset_folder: true

2.安装插件hexo-asset-image

1
npm install hexo-asset-image --save

3.创建md文件

1
hexo n "本地图片显示"

生成文件 “本地图片显示.md” 和”本地图片显示”文件夹
4.md文件中添加图片

1
{% asset_img 2019070495711.png 图片文字 %}

5.图片放大效果

1
2
3
4
$git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

$vim themes/next/_config.yml
fancybox: true

静态资源的相对路径问题

生成的html页面部署以后js/css路径不正确?

1
2
_config.yml
    relative_link: false ## 关闭相对路径

添加gitalk评论

Gitalk官方文档

创建评论存储仓库

登录github创建一个库，用来存储评论
1.1 new repository,如https://github.com/lixl-site/blogtalk
1.2 开启issue
Settings–》Options–》Features–》Issues 勾上

申请GitHub APP key

地址 https://github.com/settings/applications/new 

1
2
3
Application name/description 任意填写，不可为空 
Homepage URL 域名 如：https://lixl-site.github.io
Authorization callback URL 域名

主题配置

基于hexo 3.9.0/hexo-theme-next 7.2.0 版本

1
2
3
4
5
6
7
8
9
gitalk:
  enable: true ## 开启gitalk功能
  github_id: lixl-site # Github repo owner
  repo: blogtalk # 存储评论的仓库名称 
  client_id:  # 第2步申请来的app id
  client_secret: # 第2步申请来的app secret
  admin_user: lixl-site # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode
  language: zh-CN  ## 界面语言

高亮主题

NexT提供了5种代码块高亮主题

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

参考chriskempson/tomorrow-theme和设置代码高亮主题

代码块复制

修改主题themes/next/_config.yml

1
2
3
4
5
6
7
8
9
codeblock:
    # Manual define the border radius in codeblock
    # Leave it empty for the default 1
    border_radius:
    # Add copy button on codeblock
    copy_button:
        enable: false
        # Show text copy result
        show_result: false

设置属性copy_button为true，同时设置show_result为true，显示代码复制结果

添加mermaid支持

  1. 安装mermaid插件
    npm install hexo-filter-mermaid-diagrams

  2. 启用主题支持 

    1
    2
    3
    4
    themes\next\_config.yml

    mermaid:
      enable: true

  3. mermaid语法

甘特图

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

序列图

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

类图

classDiagram
    Class01 <|-- averylongclass : cool <> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla

饼状图

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

其他问题

1.页面导出pdf
2.关键字搜索