Hexo搭建个人博客

Posted 2021-03-07 jrmaker的博客

写这篇的主要目的是记录自己在 windows 下使用 Hexo + next 搭建博客的一个过程，简便搭建小教程。

本文使用环境（win10、node.js、git、next 5.1.4、阿里云Centos7、阿里云购买的域名、nginx）

站点配置

站点搭建

使用 Hexo ，需要安装 node.js（官方建议 10.0 版本以上） 和 Git 程序 ，本文环境为 windows + 阿里云Centos7

npm install -g hexo-cli
hexo init <folder>
cd <folder>
npm install

folder 为站点文件夹，Hexo 的根目录

设置中文

站点根目录下的 **_config.yml** 文件，设置

language: zh-Hans

更改主题

使用如下命令安装 next 主题，需要其他主题可以参考 Hexo官网主题

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

站点根目录下的 **_config.yml** 文件，修改你需要的主题

theme: next

本地搜索

站点根目录执行如下命令，安装 hexo-generator-searchdb ：

npm install hexo-generator-searchdb --save

安装后，至 **themes/next/_config.yml** 文件中修改 enable: true，即开启本地搜索功能（默认为关闭状态）

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

博文压缩

站点根目录下，执行如下命令安装 hexo-neat

npm install hexo-neat --save

安装成功后，在站点的 **_config.yml** 文件中添加如下配置（自行选择需要压缩的文件），后续执行 hexo g 将会对博文进行压缩，优化上传和访问的加载速度

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'  

主题配置

本站使用 next.Gemini，配置过程中可使用可在站点根目录下使用 hexo s --dubug 进行测试（大部分免重启服务即可查看效果）

设置菜单

**themes/next/_config.yml** 文件中开启需要的配置，相应的中文描述在 themes/next/languages/zh-Hans.yml 文件中可修改

menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html

设置头像

**themes/next/_config.yml** 文件中修改 avatar 的属性值，将其改成头像的具体路径，可以是完整的URL，也可以放在主题的 image 文件夹下面

avatar: /images/avatar.jpg

右侧边栏

**themes/next/_config.yml** 文件中修改（我比较习惯侧边栏在右边）

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  #position: left
  position: right

浏览进度

**themes/next/_config.yml** 文件中开启（置顶按钮在右下角）

# Scroll percent label in b2t button.
  scrollpercent: true

如需要吸附侧边栏，需要做继续在 **themes/next/_config.yml** 中修改，开启 b2t

b2t: true

顶部进度条

**themes/next/_config.yml** 文件中开启

pace: true

去除强力驱动

进入 **themes/next/layout/_partials/footer.swig** 文件中，删除如下

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

如果网站已备案，则可以再此处将其替换成你的备案号

<div class="BbeiAn-info">
    {{ __('某ICP备')}} -
    <a target="_blank"  href="http://beian.miit.gov.cn/">xxxxxxxx号</a>
</div>

代码复制

在 **themes/next/layout/_third-party** 文件夹下创建名为 copy-code.swig 的文件，并在文件中添加如下代码

  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }
 
    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }
 
    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }
 
    .highlight-wrap {
      position: relative;
    }
  </style>
 
  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)
 
        if(result)$(this).text('复制成功')
        else $(this).text('复制失败')
 
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('复制')
        }, 300)
      }).append(e)
    })
  </script>

返回上一层文件夹，即 themes/next/layout 下，打开 **_layout.swig** 文件，在 body 闭合标签上方添加

{% include '_third-party/copy-code.swig' %}

主页文章缩略

即首页文章不显示全文，只显示预览部分

**themes/next/_config.yml** 文件中打开配置，可自行修改需要显示的字数长度

auto_excerpt:
  enable: true
  length: 150

底部版权

在 **themes/next/_config.yml** 文件中直接开启即可

post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

评论系统

站点使用 Valine 评论系统，官方入口，在 LeanCloud 上注册一个账号，登陆并访问控制台，创建免费应用，选择开发版本，之后在应用设置里面有个 应用 Keys 选项，进入复制 AppID、AppKey，并在 **themes/next/_config.yml** 文件中开启 Valine

valine:
  enable: true
  appid:  # 应用生成的 AppID
  appkey: # 应用生成的 AppKey
  notify: false # 邮件通知 , https://github.com/xCss/Valine/wiki
  verify: false # 评论是否需要验证码，建议关闭
  placeholder: 请在此处输入你的留言信息 # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

服务器配置

开放服务器端口

服务器默认没有配置安全组规则，需要自行配置需要开放的端口信息，具体：进入云实例的安全组，开放 80 443 端口，具体请看 阿里云安全组配置

Git安装与配置

git 安装

yum install git

创建一个 git 账户

adduser git

添加账户权限，编辑 sudoers，找到 root ALL=(ALL) ALL 并在下方添加 git ALL=(ALL) ALL 并保存退出

chmod 740 /etc/sudoers
vim /etc/sudoers

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
git      ALL=(ALL)     ALL

改回权限

chmod 400 /etc/sudoers

为 git 用户设置密码

sudo passwd git

windows 生成密钥，密钥文件保存至 C:\Users\youname\.ssh 文件夹下面

ssh-keygen

切换git用户，创建 ~/.ssh/authorized_keys 文件，文件中保存 windows 中的 id_rsa.pub 文件内容，并赋予权限

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys      # 将 windows 下的 id_rsa.pub 文件内容复制于此
chmod 600 /home/git/.ssh/authorzied_keys
chmod 700 /home/git/.ssh

重启 ssh 服务

service sshd restart

重启后，进入 windows 命令窗口，免密登陆 git 账户测试

ssh -v git@youIpAddress

使用 root 账户创建目录

mkdir /var/repo                      # git仓库
chown -R git:git /var/repo
chmod -R 755 /var/repo
mkdir /var/www/hexo             # 网站根目录
chown -R git:git /var/www/hexo
chmod -R 755 /var/www/hexo
复制代码z

创建 git 仓库

su git
cd var/repo
git init --bare myblog.git

创建 git 钩子文件 post-receive，用于自动部署在 /var/repo/myblog.git 下

vim /var/repo/myblog.git/hooks/post-receive

在 post-receive 文件中添加以下内容

git --work-tree=/var/www/hexo --git-dir=/var/repo/myblog.git checkout -f

root 用户下修改文件所属用户，授予可执行权限

chown -R git:git /var/repo/hexoBlog.git/hooks/post-receive
chmod +x /var/repo/hexoBlog.git/hooks/post-receive

自此，仓库已创建完成

Nginx安装与配置

安装 nginx

yum install -y nginx

启动 nginx 服务器

systemctl start nginx

设置开机启动

systemctl enable nginx

进入/etc/nginx 文件下，将 nginx.conf 复制一份配置文件到 conf.d 下进行修改（也可以直接用在我的配置上进行修改），该配置文件用你的域名命名（容易识别）

cd /etc/nginx
cp nginx.conf conf.d/jrmaker.cn.conf

我的完整配置如下（含Hppts），阿里云上可免费申请 SSL 证书（控制台-域名-管理-开启SSL证书-申请免费证书）

server {
    listen      80;
    server_name jrmaker.cn;
    return 301 https://www.jrmaker.cn$request_uri;
}
server {
    listen      443;
    server_name jrmaker.cn;
    return 301 https://www.jrmaker.cn$request_uri;
}

# 有ssl证书的，没有可以忽略如下配置，需要将 root /var/www/hexo 添加到上方的 server 中
server {
    listen       443 ssl http2 default_server;
    listen       [::]:443 ssl http2 default_server;
    server_name  www.jrmaker.cn;
    root         /var/www/hexo;

    ssl_certificate "/var/ssl/blog/3427693_www.jrmaker.cn.pem";
    ssl_certificate_key "/var/ssl/blog/3427693_www.jrmaker.cn.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
    }

    error_page 404 /404.html;
    location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

平滑重启 nginx

nginx -s reload

问题解决

URL Cannot GET /%20/

至 **themes/hexo/_config.yml** 文件下，找到下面位置，将 || 前面的 空格去掉

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

没有标签分类

使用如下命令创建一次即可

hexo new page tags
hexo new page categories

hexo d 后 ERROR Deployer not found: git

站点根目录下执行命令安装

npm install --save hexo-deployer-git