使用Hexo和nexT主题来搭建博客

发表于 | 更新于 | 分类于

1. 使用Hexo和nexT来搭建博客，嗯嗯很好！

参考 https://blog.csdn.net/Hoshea_chx/article/details/78826689 的过程一步步搭建

  1. 下载git（已有）和nodejs， 然后在cmd中安装Hexo： npm install -g hexo-cli

  2. 创建：

    1
    2
    3
    4
    hexo i blog //init的缩写 blog是项目名
    cd blog //切换到站点根目录
    hexo g //generetor的缩写
    hexo s //server的缩写

    • 打开浏览器输入localhost:4000查看一个默认的版本

    • 在github上有很多主题可选择，这里选择nexT。在站点根目录输入：
      git clone https://github.com/iissnan/hexo-theme-next themes/next.
      完成后，打开站点配置文件(根目录下_config.yml)， 找到theme字段，并将其值更改为next。

    • nexT可选择三种主题：Muse, Mist, Pisces。在站点根目录/themes/next/_congig.yml文件中修改scheme。然后重新clean，generator，查看效果。

    • 在cmd中输入：

      1
      2
      3
      4
      hexo clean  //清除缓存
      hexo g  //重新生成代码
      hexo s  //部署到本地
      //然后打开浏览器访问 localhost:4000 查看效果

  3. 将本地博客上传到github：

    • 在GitHub上创建新项目，名字为用户名.github.io

    • 修改hexo站点的配置文件：注意：缩进必须按照如下格式，type, repository和branch为同一级缩进 

      1
      2
      3
      4
      deploy:
      type: git
      repository: https://github.com/wcfrank/wcfrank.github.io.git
      branch: master

    • 部署：

      1
      2
      3
      npm install hexo-deployer-git --save  //先装个插件压压惊
      hexo d  //  部署的命令
      //等一会就好了

      注意：请先设置好git的用户名密码，或者ssh.
      但是设置之后依然报错，显示fatal: could not read Username for 'https://github.com': No error。通过修改yml文件里repository节点为：https://{username}:{password}@github.com/wcfrank/wcfrank.github.io.git 问题最终解决good！

  4. 发布新的博客：

    1
    2
    3
    4
    hexo new "postName" 
     //hexo n 也可以 
    //你自己的博客名称，名为postName.md的文件会建在目
    //录/blog/source/_posts下。

    _也可以把写好的markdown文件直接放到这个路径下！_
    文章编辑完成后，终端在根目录文件夹下，执行如下命令来发布:

    1
    2
    hexo g //生成静态页面
    hexo d //发布

  5. 现在文章都是整篇显示，能否折叠呢？

    答曰：可以。

    • 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式
    • 在文章的 front-matter 中添加 description，并提供文章摘录
    • 自动形成摘要, 在nexT的配置文件添加：
      1
      2
      3
      auto_excerpt:
        enable: true
        length: 150

  6. 添加本站访客数、网站底部字数统计，见参考资料4.

  7. 为文章添加背景色和阴影框：
    在目录blog\themes\next\source\css\_custom\custom.styl文件中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 主页文章添加阴影效果
    .post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .9); //阴影效果
    -moz-box-shadow: 0 0 5px rgba(202, 203, 203, .9); //阴影效果
    background-color: rgba(248, 248, 248, .5); //背景色
    }

    该方法在本地可以改变背景颜色，但上传GitHub之后无效，索性在blog\themes\next\source\css\main.styl最后添加相同的内容！

  8. 重要： 博客中会用到一些数学公式，markdown中用的是Mathjax来代替Latex。参考5.为官方文档，照做即可。备用资料1和2基本没啥用，搞的我绕了很多弯路，里面唯一有用的是：在每个markdown文件的开头，加入 mathjax: true，如果不加这个，公式出不来（奇怪）。这样某些不需要mathjax渲染的文件就不用设置，加快渲染速度。

    1
    2
    3
    4
    5
    6
    ---
    title: hello
    category: Uncategorized
    date: 2017/05/03
    mathjax: true
    ---

  9. 在Hexo中添加本地图片：

    1. 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
    2. 在你的hexo目录下执行这样一句话npm install hexo-asset-image —save，这是下载安装一个可以上传本地图片的插件
    3. 等待一小段时间后，再运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
    4. 最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：
      ! [你想输入的替代文字] (xxxx/图片名.jpg)

  10. 原本Next主题下的标题没有序号，而且一级、二级标题的字体大小接近，容易让人分不清楚标题的层级，所以想为添加序号。

    1
    2
    3
    4
    5
    6
    7
    # 根目录 _config.yml
    heading_index:
      enable: true
      index_styles: "{1} {1} {1} {1} {1} {1}"
      connector: "."
      global_prefix: ""
      global_suffix: ". "

    同时原本的Next主题下的右侧有目录，是会自动编序号的，我们在为正文的标题添加完序号之后，需要取消目录下的序号，以免冲突。

    1
    2
    3
    4
    5
    # themes/next/_config.yml
    toc:
      enable: true
      # Automatically add list number to toc.
      number: false

其他参考资料：

  1. https://www.jianshu.com/p/8cb998a18272
  2. https://segmentfault.com/q/1010000003734223
  3. 主题个性化1
  4. 主题个性化2

  5. 添加数学公式

  6. Next主题下的标题加序号