Hexo+Github Pages搭建个人博客(一)

安装hexo

  1. 安装Node js和npm并配置环境变量，官网地址https://nodejs.org/en/download/

    • npm换源

      1
      2
      //淘宝源
      npm config set registry https://registry.npm.taobao.org

  2. 安装git并注册、在github中添加自己的SSH Key

  3. 安装并初始化hexo

    1
    2
    3
    npm install -g hexo-cli	// 下载并安装hexo
    hexo init	// 在自己要建立博客的文件夹下init
    npm install hexo-deployer-git --save

  4. 常用hexo命令

    1
    2
    3
    4
    5
    hexo new [layout] <title>	// 新建一篇文章
    hexo generate -d // 生成静态文件,文件生成后立即部署网站
    hexo server 或 hexo s // 启动服务器，网址为http://localhost:4000/
    hexo clean // 清除缓存文件和静态文件
    hexo list // 列出网站资料

配置Hexo

  1. 下载主题Butterfly

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly	 // 博客根目录下

  2. 修改配置文件_config.yml，将主题改为butterfly

    1
    theme: butterfly

  3. 修改配置文件_config.yml，连接到建立好的github pages中

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

  4. 安装pug和stylus的渲染器

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

  5. 把./themes/butterfly目录下的 _config.yml 复制到博客根目录下，并重命名为_config.butterfly.yml

  6. 修改配置文件_config.butterfly.yml

    • 官网上有一些配置教程，见 https://butterfly.js.org/

    • 设置导航栏

      1
      2
      3
      4
      5
      6
      7
      8
      menu:
        主页: / || fas fa-home
        归档: /archives/ || fas fa-archive
        标签: /tags/ || fas fa-tags
        分类: /categories/ || fas fa-folder-open
        友链: /link/ || fas fa-link
        
      # 格式为:  /[页面名]/ || [图标名称]

      • 设置标签页，并在./source/tags/index.md添加type选项

        1
        hexo new page tags
        1
        2
        3
        4
        5
        ---
        title: tags
        date: 2021-03-21 20:56:20
        type: "tags"
        ---

      • 设置分类页，并在./source/categories/index.md添加type选项

        1
        hexo new page categories
        1
        2
        3
        4
        5
        ---
        title: categories
        date: 2021-03-21 21:00:49
        type: "categories"
        ---

      • 设置友情链接，并在./source/link/index.md添加type选项，然后在

        1
        hexo new page link
        1
        2
        3
        4
        5
        ---
        title: categories
        date: 2021-03-21 21:00:49
        type: "link"
        ---
        • 在source下创建_data/link.yml，并以如下格式填入内容
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        - class_name: 友情链接
          class_desc: 那些人，那些事
          link_list:
            - name: Hexo
              link: https://hexo.io/zh-tw/
              avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
              descr: 快速、简单且强大的网誌框架

        - class_name: 网站
          class_desc: 值得推荐的网站
          link_list:
            - name: Youtube
              link: https://www.youtube.com/
              avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
              descr: 视频网站
            - name: Weibo
              link: https://www.weibo.com/
              avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
              descr: 中国最大社交分享平台
            - name: Twitter
              link: https://twitter.com/
              avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
              descr: 社交分享平台

    • 代码相关

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      # 代码主题
      highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
      # 代码复制选项
      highlight_copy: true # copy button
      # 显示代码语言
      highlight_lang: true # show the code language
      # 是否自动折叠
      highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
      highlight_height_limit: false # unit: px
      code_word_wrap: false
      # 自动代码换行
      code_word_wrap: true

      Q&A

      1. 如何引用本地图片

        • 图片放在./themes/butterfly/source/img中，引用时/img/test.jpg即可

      2. 数学公式出错

        • 使用Katex

        • 安装hexo-renderer-kramed

          1
          2
          npm uninstall hexo-renderer-marked --save
          npm install hexo-renderer-kramed --save

        • 在_config.butterfly.yml 中这样写

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          # MathJax
          mathjax:
            enable: false
            per_page: false

          # KaTeX
          katex:
            enable: true
            per_page: true
            hide_scrollbar: true

      3. 如何使用gitalk评论

        • 需要创建OAuth Application获取自己的client_id和client_secret 码

        • 在_config.butterfly.yml 这样写

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          comments:
            # Up to two comments system, the first will be shown as default
            # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
            use:
              - Gitalk
            text: true # Display the comment name next to the button
            # lazyload: The comment system will be load when comment element enters the browser's viewport.
            # If you set it to true, the comment count will be invalid
            lazyload: true
            count: true # Display comment count in top_img
            card_post_count: false # Display comment count in Home Page

          gitalk:
            client_id: 你的client id 
            client_secret: 你的client secret
            repo: 你的github仓库
            owner: 你的github用户名
            admin: 该仓库的拥有者或协作者
            language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru
            perPage: 10 # Pagination size, with maximum 100.
            distractionFreeMode: false # Facebook-like distraction free mode.
            pagerDirection: last # Comment sorting direction, available values are last and first.
            createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
            option:

      4. 如何在hexo new 'xxx'时自动生成模板

        • 在./scaffolds/post.md中改为这样

          1
          2
          3
          4
          5
          6
          title: {{ title }}
          date: {{ date }}
          tags:
          categories:
          cover:
          description:

      5. 同时在github和gitee上部署

        • 考虑到github的主分支改名为main，gitee上的主分支仍为master

        • 把根目录下的_config.yml做如下修改

          1
          2
          3
          4
          5
          6
          markdown:
            plugins:
              - plugin:
                name: '@neilsustc/markdown-it-katex'
                options:
                  strict: false

      6. 解决hexo g -d时warning: LF will be replaced by CRLF

        1
        git config --global core.autocrlf false //禁用自动转换

      7. 封面存储的位置

        1
        Blog\themes\butterfly\source\img\cover