hexo+Github Pages搭建博客指南

本文最后更新于:5 个月前

  1. hexo+ndoejs安装

    hexo:

    具体说明请看官方文档

    node + npm:

    sudo pacman -S nodejs npm

    npm 权限问题

  2. 主题配置

    1. 选择一个主题克隆下来

      例如:alpha-dust

      git clone https://github.com/klugjo/hexo-theme-alpha-dust themes/alpha-dustgit clone
    2. 修改所需配置

      1. author,discription等等

      2. 修改favicon

        1. 在线生成ico

        2. 把生成的文件放到 blog/source目录下

          并修改文件名为favicon.ico

        3. (并没有效果) 修改blog/_config.yml

          # 增加一行
          favicon:/favicon.ico
    3. 使用hexo

      1. 生成草稿或者新的markdown文件

        # 生成草稿
        hexo new draft test
        
        # 生成markdown文件
        hexo new post blog
      2. 将draft草稿发布

        hexo publish post test
      3. 部到 git

        # 安装插件
        npm install hexo-deployer-git  --save
    4. 插件

      • live2d

        $ sudo npm install hexo-helper-live2d --save
        
        # shizaku是model的名字
        $ sudo npm install live2d-widget-model-shizuku --save

        _config.yml加入如下配置

        # Live2D
        ## https://github.com/EYHN/hexo-helper-live2d
        live2d:
        enable: true
        scriptFrom: jsdelivr # 默认
        pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
        pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
        pluginModelPath: assets/ # 模型文件相对与插件根目录路径
        # scriptFrom: jsdelivr # jsdelivr CDN
        # scriptFrom: unpkg # unpkg CDN
        # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
        tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
        debug: false # 调试, 是否在控制台输出日志
        model:
        use: live2d-widget-model-shizuku # npm-module package name
            scale: 1
            hHeadPos: 0.5
            vHeadPos: 0.618
        display:
            superSample: 2
            width: 125
            height: 125
            position: left
            hOffset: 30
            vOffset: -20
        mobile:
            show: false
            scale: 0.05
        react:
            opacityDefault: 1
            opacityOnHover: 0.2

        想要其他的model可以去官方博客找

      • Browsersync 实时预览编辑

        npm install hexo-browsersync --save
      • hexo-deployer-shell 同步服务器

        npm install hexo-deployer-shell --save

        修改 root 的 _config.yml

        deploy:
        - type: shell
          command: <your deploy command>
          options:
          timeout: 2000
      • 置顶

        $ npm uninstall hexo-generator-index --save
        $ npm install hexo-generator-index-pin-top --save

        如果要置顶,就在文章首的 font-matter 里面添加:
        top: True

      • markdown 脚注

        换新的引擎

        npm un hexo-renderer-marked --save
        
        npm i hexo-renderer-markdown-it --save

        可选的配置

        markdown:
            render:
                html: true
                xhtmlOut: false
                breaks: true
                linkify: true
                typographer: true
                quotes: '“”‘’'
            plugins:
                - markdown-it-abbr
                - markdown-it-footnote
                - markdown-it-ins
                - markdown-it-sub
                - markdown-it-sup
            anchors:
            level: 2
            collisionSuffix: 'v'
            permalink: false
            permalinkClass: 'header-anchor'
            permalinkSide: 'left'
            permalinkSymbol: '⚡'
            case: 0
            separator: ''

        换了引擎还要 clean 一下

        参考博客

      • RSS

        $ npm install hexo-generator-feed --save

        对于 fluid 主题,我们可以在关于页里面修改 icons 支持 rss,link 就写 /atom.xml

      • hexo-online-server

        在线编辑

        坑(2020.4.17版本):

        1. 展示的配置注释要删

        2. 配置里面的 secret 要随便输一些东西,否则会报错:

          Error: secret option required for sessions