搭建hexo博客系统

发表于 更新于

环境：已注册Github,并将本机的SSH Key成功上传

安装

1、 rpm安装nodejs npm

1
2
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs

2、 安装hexo

1
npm install -g hexo

初始化

1、初始化

1
2
cd /data
hexo init blog

2、框架安装
npm install
3、安装Hexo启动服务器的插件
npm install hexo-server --save
4、启动服务器 本地查看效果，若不指定端口，默认为4000
hexo server

配置

1、Github创建仓库

1
2
创建的仓库名称必须是***.github.io
在仓库的settings中，勾选Template repository

2、安装hexo的git组件

1
npm install hexo-deployer-git --save

3、添加git配置

1
2
3
4
5
6
7
8
cd /data/blog/
vi _config.yml
------添加如下内容------
deploy:
  type: git
  repository: git@github.com:*/*.github.io.git #如git@github.com:johnnywl/johnnywl.github.io.git
  branch: master
------------------------

4、查看是否可提交代码至github仓库

1
ssh -T -ai ~/.ssh/id_rsa git@github.com

创建博客

1
2
hexo new '博客名称'
vi /data/blog/source/_posts/'博客名称.md'

部署hexo

1
2
3
4
5
hexo g
hexo d
----或者----
hexo d -g
------------

hexo优化

  • 下载主题

    1
    2
    3
    4
    cd /data/tools
    wget https://github.com/theme-next/hexo-theme-next/archive/master.zip
    unzip master.zip
    mv hexo-theme-next-master /data/blog/themes/hexo-theme-next

  • 修改_config.yml 中的主题属性

    1
    2
    title: Johnnywl's Blog
    theme: hexo-theme-next

  • hexo-theme-next首页文字显示预览

    1
    2
    3
    4
    5
    6
    cd /data/blog/themes/hexo-theme-next
    vi _config.yml
    ---修改如下内容---
    auto_excerpt:
      enable: false   # false修改为true 
    ------------------

  • hexo-theme-next添加搜索功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    npm install hexo-generator-searchdb --save
    vi /data/blog/_config.yml
    ---添加如下内容---
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    ------------------
    vi /data/blog/themes/hexo-theme-next/_config.yml
    ---修改如下内容---
    local_search:
      enable: false    # false修改为true
    ------------------

  • Mist字体的段落间距过大

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    vi /data/blog/themes/hexo-theme-next-master/source/css/_schemes/Mist/_posts-expand.styl
    ---修改如下内容---
      article {
        margin-top: 120px;   #修改此项，可改变段落间距

        &:first-child {
          margin-top: 0;
        }
      }
    ------------------

  • 添加网格

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    vi /data/blog/themes/hexo-theme-next-master/layout/_layout.swig
    ---添加如下内容 ---  # 以下代码添加在</body>前（不能放在</head>的后面）
    {% if thmem.canvas_nest %}
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
    </script>
    {% ednif %}
    -----------------
    vi /data/blog/themes/hexo-theme-next/_config.yml
    ---修改如下内容---
    canvas_nest：true
    color:线条颜色，默认：'0,0,0',三个数字分别为（R,G,B）
    opacity:线条透明度（0~1），默认：0.5
    count:线条的总数量，默认：150
    zIndex:背景的z-index属性，css属性用于控制所在层的位置，默认：-1
    ------------------