Github Pages+hexo+NexT个人博客搭建及配置

发表于 更新于 分类于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 5 分钟

Github Pages 是 github 提供的免费静态博客平台，使用 hexo 静态博客 + NexT 主题能够快速地搭建优雅的博客。在此记录下搭建博客的过程。

创建博客

  1. 首先在github中创建一个仓库，命名为<your_name>.github.io
  2. 在本机安装好git、ssh、node、hexo，创建博客文件夹，安装需要的插件 
    1
    2
    3
    4
    5
    npm install hexo-cli -g # 安装hexo
    hexo init blog_folder
    cd blog_folder
    npm install
    npm install hexo-deployer-git --save # hexo的git插件
  3. 修改_config.yml文件中的Site部分 
    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: # 根据个人喜好设置
    subtitle: '' # 根据个人喜好设置
    description: '' # 根据个人喜好设置
    keywords: # 根据个人喜好设置
    author: # 根据个人喜好设置
    language: zh-CN # 设置为中文
    timezone: '' # 设置时区
  4. 修改_config.yml文件中的URL部分 
    1
    url: https://<your_name>.github.io # 也可以设置为其他网址
  5. 修改_config.yml文件中的Deployment部分 
    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: 'git'
      repo: git@github.com:<your_name>/<your_name>.github.io.git # 设置为你的仓库地址
      branch: master # 设置为想要推送的分支，不建议修改

至此，博客初始状态创建完毕。

使用NexT主题

  1. 克隆NexT主题到本地 
    1
    2
    # 请首先进入到blog_folder目录下
    git clone https://github.com/next-theme/hexo-theme-next themes/next
  2. 修改_config.yml文件中的Extensions部分 
    1
    theme: next
  3. 在_config.yml文件中添加以下内容 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # Third-party plugins: search
    search:
      path: search.xml
      field: post
      content: true
      format: html

    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      awl: 4
      wpm: 275

配置NexT主题

  1. 修改themes/next/_config.yml文件中的minify参数为true 
    1
    minify: true
  2. 修改themes/next/_config.yml文件中的Scheme Settings部分 
    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini # 使用Gemini格式
  3. 修改themes/next/_config.yml文件中的Menu Settings部分 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home # 主页
      categories: /categories/ || fa fa-th # 文档分类
      tags: /tags/ || fa fa-tags # 文档标签
      archives: /archives/ || fa fa-archive # 时间轴
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat
      about: /about/ || fa fa-user # 关于
  4. 修改themes/next/_config.yml文件中的menu_settings部分 
    1
    2
    3
    menu_settings:
      icons: true
      badges: true
  5. 修改themes/next/_config.yml文件中的social部分（按需修改）
  6. 修改themes/next/_config.yml文件中的footer部分 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    footer:
    since: 2023 # 博客开始时间
    # Icon between year and copyright info.
    icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true # 产生动画效果
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

    # If not defined, `author` from Hexo `_config.yml` will be used.
    # Set to `false` to disable the copyright statement.
    copyright:

    # Powered by Hexo & NexT
    powered: false
  7. 修改themes/next/_config.yml文件中的post_meta部分 
    1
    2
    3
    4
    5
    6
    7
    post_meta:
      item_text: true
      created_at: true
      updated_at:
        enable: true
        another_day: false # 设置为false，只要文件发生修改即可显示修改时间
      categories: true
  8. 修改themes/next/_config.yml文件中的back2top部分 
    1
    2
    3
    4
    5
    6
    back2top: # 显示浏览进度
      enable: true             
      # Back to top in sidebar.
      sidebar: true
      # Scroll percent label in b2t button.
      scrollpercent: true
  9. 修改themes/next/_config.yml文件中的reading_progress部分 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    reading_progress: # 在顶部显示浏览进度
      enable: true
      # Available values: left | right
      start_at: left
      # Available values: top | bottom
      position: top
      reversed: false
      color: "#37c6c0"
      height: 3px
  10. 修改themes/next/_config.yml文件中的github_banner部分 
    1
    2
    3
    4
    github_banner: # 在右上角显示github
      enable: true
      permalink: https://github.com/<your-name>
      title: Follow me on github # 可以更改
  11. 修改themes/next/_config.yml文件中的busuanzi_count部分 
    1
    2
    3
    4
    5
    6
    7
    8
    busuanzi_count: # 统计浏览量
      enable: true
      total_visitors: true
      total_visitors_icon: fa fa-user
      total_views: true
      total_views_icon: fa fa-eye
      post_views: true
      post_views_icon: far fa-eye
  12. 修改themes/next/languages/zh-CN.yml文件中的menu部分 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu: # 修改目录的中文显示
      home: 首页
      archives: 时间轴
      categories: 文章分类
      tags: 文章标签
      about: 关于作者
      search: 搜索
      schedule: 日历
      sitemap: 站点地图
      commonweal: 公益 404
  13. 在themes/next/layout/_partials/footer.njk文件中添加以下部分 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- 网站运行时间的设置 -->
    <span id="timeDate">载入天数...</span>
    <span id="times">载入时分秒...</span>  Sometimes your whole life boils down to one insame move.
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("09/12/2023 14:00:00");//此处修改你的建站时间或者网站上线时间
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
            document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
    setInterval("createtime()",250);
    </script>

安装插件

1
2
npm install hexo-generator-searchdb --save # 本地搜索需要
npm install hexo-word-counter --save # 字数时间统计

生成网页

1
2
3
4
hexo clean # 清楚缓存
hexo g # 生成网页
hexo d # 发布到github等
hexo s # 本地查看

博文加密

  1. 安装插件 
    1
    npm install hexo-blog-encrypt
  2. 在_config.yml文件中添加以下内容 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    encrypt:
      enable: true
      silent: true # 不输出log信息
      theme: xray # 主题
      tags:
      - {name: xxx, password: xxxx} # 当文章指定了xxx标签后，文章自动加密，密码为xxxx
      abstract: There's something hidden here.
      message: Please input the password
      wrong_pass_message: Sorry, the password is incorrect! Please try again.
  3. 修改scaffolds/post.md文件 
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: {{ title }}
    date: {{ date }}
    updated: {{ date }}
    tags: 
    categories: 
    password: 
    ---
  4. 修改themes/next/layout/_macro/sidebar.njk文件（目录问题） 
    1
    2
    3
    4
    5
    {%- if (page.encrypt) %}
      {%- set toc = toc(page.origin, { class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
    {%- else %}
      {%- set toc = toc(page.content, { class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth }) %} # 搜索这一行的内容，替换为这一段即可
    {%- endif %}

使用数学公式

安装 hexo-renderer-pandoc

1
2
3
4
5
# 卸载Hexo默认渲染插件：
npm uninstall hexo-renderer-marked --save

# 安装pandoc渲染插件：
npm install hexo-renderer-pandoc --save

配置使用mathjax

修改themes/next/_config.yml文件

1
2
3
4
5
6
7
8
math:
  ...
  mathjax:
    enable: true

    # Next v6.3.0 后的版本 tags 要设置成 ams
    # Available values: none | ams | all
    tags: ams

安装pandoc

1
2
sudo apt update
sudo apt install pandoc

添加文件头

在需要使用数学公式的博客的文件头中添加mathjax: true语句以支持数学公式的显示

主要参考连接

  1. NexT主题官方文档
  2. Hexo博客加密
  3. Hexo数学公式