0%

Windows下简易配置hexo博客到github pages


node,git下载安装

node下载安装
Git下载安装

hexo安装配置

  • 进入node.js命令行界面,执行npm install -g hexo-cli

  • 在你想要创建站点的路径下,执行hexo init <文件夹名称>

  • 进入新创建的文件夹,执行npm install

  • 执行hexo server,即可在本机地址的4000端口看到初始站点页面

  • 优化seo:执行下面两条命令安装sitemap插件

      npm install hexo-generator-sitemap --save
      npm install hexo-generator-baidu-sitemap --save
  • 添加到sitemap字段到根目录的_config.yml

      sitemap:
          path: sitemap.xml
    
      baidusitemap:
           path: baidusitemap.xml
    • hexo g一下,即可看到sources文件夹下生成了两个对应的sitemap文件

    • 添加分类和标签

      hexo new page categories

      hexo new page tags

      • 这两个命令会分别在sources目录下创建categories和tags目录,编辑里面的index.md如下
      ---
       title: 分类
       date: 2019-11-08 19:19:27
       type: categories
       ---
       ---
       title: 标签
       date: 2019-11-08 19:22:06
       type: tags
       ---
      • 修改主题下面的_config.yml的menu字段,将tags和categories注释去除
      menu:
        home: / || home
        #about: /about/ || user
        tags: /tags/ || tags
        categories: /categories/ || th
        archives: /archives/ || archive
        #schedule: /schedule/ || calendar
        sitemap: /sitemap.xml || sitemap
        #commonweal: /404/ || heartbeat
      • 在具体文章的顶部添加分类和标签,分类只能指定一个,标签可以多个
      categories: Hexo
      tags:
      - Hexo
      - github
      - github pages
      - git

主题配置

  • 配置主题,这里我使用最流行的next主题v7.5,执行git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 将根目录下的_config.yml里的theme字段改为next

  • 代码高亮设置在theme的_config.yml里

            highlight_theme: night eighties

上传到github pages

  • 在github里建一个公开仓库,仓库名为用户名.github.io
  • 安装插件npm install hexo-deployer-git --save
  • 修改根目录下的_config.yml文件,添加下面代码
      deploy:
      type: `git`
      repo:
          github: https://github.com/用户名/用户名.github.io.git
      branch: master
  • 在站点文件夹下运行git bash,执行命令
      git config --global user.name "用户名"
      git config --global user.email "邮箱"
      ssh-keygen -t rsa -C `邮箱`
  • 将生成的ssh key添加到github的setting里的ssh key里面,再执行ssh -T git@github.com,后面即可使用hexo g -d将站点同步到github

其它设置

  • 头像更换,更改theme的_config.yml里的avatar字段,注意图像存放路径为具体theme目录下的source/images,使用gif或者png格式,jpg格式会404错误

  • 首页文章不显示全文,一种是修改_config.yml里的auto_excerpt为true,另外一种在文章里使用<!-- more -->,推荐第二种

  • 关闭rss,设置为false

  • 关闭动画,加快载入速度,motion: false

  • 文章目录显示,toc字段下的enable: true,子目录也显示,则设置expand_all: true

  • 文章阅读次数,使用leancloud,将leancloud_visitors设为true,security设为false

  • 评论系统选择valine,同样使用leancloud平台,在配置中找到comments,并将active设置为valine,再去valine字段里设置appkey和appid即可,注意的是在leancloud的安全中心里,需设置域名:端口号格式(https为443)

  • 评论系统最终选择utterances,已经作为插件集成到next v7.5里,只需到这里授权一下,然后在根目录只需npm install --save github:theme-next/hexo-next-utteranc,最后在主题配置文件添加如下配置即可:

    #utterances 
    utteranc:
      enable: true
      repo: 你的github用户名/公有仓库名                 # owner/repo
      issue_term: pathname   # pathname, url, title
      theme: github-light    # github-light or github-dark
      cdn: https://utteranc.es/client.js
  • 加入百度统计,将hm.js?后面生成的id复制到主题配置文件的baidu统计字段

  • 字数统计,使用npm install hexo-symbols-count-time安装插件,并在配置文件_config.yml中开启symbols_count_time

至此基本功能设置完毕.