hexo next及github配置

背景

之前博客许久未打理,本地的node环境和hexo版本也比较陈旧,删除了github旧仓库重新跑了一遍,做下记录以便日后参考

参考文档

hexo文档

next主题文档

流程

  1. 安装hexo及项目初始化

    1
    2
    3
    $: npm install -g hexo-cli # 安装hexo

    $: hexo init my_project # 初始化项目
  2. 项目配置

    配置

  3. 安装next主题

    Getting Started

    此处使用git方式下载的包在生成静态文件时index.html中包含模板标签,访问有问题,暂时没找到原因,所以使用了npm方式安装:

    1
    2
    3
    $: cd my_project && npm install hexo-theme-next # 安装next主题
    $: cp -rp node_modules/hexo-theme-next themes/next # 此处将npm包拷贝到项目的themes目录,方便主题配置文件的版本管理
    $: npm uninstall hexo-theme-next
  4. 启用next主题

    1
    2
    3
    4
    5
    # 项目的_config.yml
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
  5. 主题自定义配置

    开始使用

  6. 第三方插件

    1. 字数统计 字数统计
    2. 本地搜索 第三方服务集成
    3. Disqus评论插件 第三方服务集成
    4. Waline评论及阅读数统计插件 快速上手
      1. 根据上面文档指引,创建并且成功部署Vercel,HTML 引入 (客户端)部分不用做
      2. hexo安装waline扩展并且在主题中进行配置 $:npm install @waline/hexo-next
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        waline:
        # New! Whether enable this plugin
        enable: true

        # Waline server address url, you should set this to your own link
        serverURL: https://your-domain.vercel.app # 替换为你自己的域名

        # Waline library CDN url, you can set this to your preferred CDN
        libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js

        # Waline CSS styles CDN url, you can set this to your preferred CDN
        cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

        # Custom locales
        # locale:
        # placeholder: Welcome to comment # Comment box placeholder

        # If false, comment count will only be displayed in post page, not in home page
        commentCount: true # 开启评论数展示

        # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
        pageview: true # 开启阅读数展示

        # Custom emoji
        emoji:
        # - https://unpkg.com/@waline/[email protected]/weibo
        # - https://unpkg.com/@waline/[email protected]/alus
        - https://unpkg.com/@waline/[email protected]/bilibili
        - https://unpkg.com/@waline/[email protected]/qq
        # - https://unpkg.com/@waline/[email protected]/tieba
        # - https://unpkg.com/@waline/[email protected]/tw-emoji

        # Comment infomation, valid meta are nick, mail and link
        # meta:
        # - nick
        # - mail
        # - link

        # Set required meta field, e.g.: [nick] | [nick, mail]
        # requiredMeta:
        # - nick

        # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
        lang: zh-CN

        # Word limit, no limit when setting to 0
        # wordLimit: 0

        # Whether enable login, can choose from 'enable', 'disable' and 'force'
        # login: enable

        # comment per page
        pageSize: 10
      3. 开启了pageview的话需要在leancloud应用的结构化数据中创建Counter这个Class,本质上阅读数存储在Counter 表中,评论数据存储在Comment 表中
    5. leancloud阅读次数 (Waline可以做)此路不通,不管是国内还国外的云函数部署都需要绑定独立的域名才能使用,暂时没有多余的域名
  7. 增加标签页面和分类页面

    主题配置

    主题配置

    这样可以在主题的menu配置中加上这两个页面,不然public/tagspublic/categories文件夹不会生成index.html

  8. github-page配置
    Github Page

  9. 项目部署配置
    Hexo一键部署

  10. git hook配置

    关联到github-page后,仓库源文件在master分支,public静态资源在gh-pages分支,增加hook可以更加方便的维护源文件和部署静态文件:

    1. 新增或修改项目下的hook文件.git/hook/pre-push
      1
      2
      3
      4
      5
      6
      7
      8
      #!/bin/sh
      branch="$(git rev-parse --symbolic --abbrev-ref $(git symbolic-ref HEAD))"
      if [ "$branch" = "master" ]
      then
      echo "---- start deploy -----"
      /usr/local/bin/hexo g -d # 此处修改为本地hexo的执行路径
      fi
      exit 0
    2. 增加可执行的文件权限
      1
      $: chmod +x .git/hook/pre-push

    这样配置之后,新增的md格式文章在master分支编辑完成直接commit+push,会自动生成静态页面并且部署至远程服务器,不需要额外的操作,也保证了仓库的源文件与静态文件版本的一致