---

title: hexo
categories: 博客
tags:

• hexo
• github
  summary: hexo博客搭建过程，git、hexo、node的安装，hexo博客的初始化，整合GitHub page
  typora-root-url: hexo
  abbrlink: ab21860c
  date: 2019-01-23 09:07:30

---

安装Node.js

https://nodejs.org/en/

安装Git

https://git-scm.com/

安装Hexo

    //全局安装
    $ npm install -g hexo-cli

存放位置

    C:\Users\libingshen\AppData\Roaming\npm\node_modules

验证安装是否成功

    C:\Users\libingshen>node --version
    v10.15.0
    
    C:\Users\libingshen>npm --version
    6.4.1
    
    C:\Users\libingshen>git --version
    git version 2.16.2.windows.1
    
    C:\Users\libingshen>hexo --version
    hexo-cli: 1.1.0
    os: Windows_NT 10.0.17134 win32 x64
    http_parser: 2.8.0
    node: 10.15.0
    v8: 6.8.275.32-node.45
    uv: 1.23.2
    zlib: 1.2.11
    ares: 1.15.0
    modules: 64
    nghttp2: 1.34.0
    napi: 3
    openssl: 1.1.0j
    icu: 62.1
    unicode: 11.0
    cldr: 33.1
    tz: 2018e

Hexo博客初始化

    $ cd D:\mytest\myhexo
    $ hexo init

    //安装依赖
    $ npm install

    //或者hexo generate生成静态页
    $ hexo g 

    //或者hexo server，启动服务器，可以在http://localhost:4000/ 查看
    $ hexo s 

Hexo博客部署到GitHub

本地客户端与GitHub建立授权连接生成公私钥

    ssh-keygen -t rsa -C "782125244@qq.com"

公私钥存放位置

    C:\Users\libingshen\.ssh

将公钥内容上传到GitHub

GitHub创建仓库作为hexo博客的站点

hexo配置GitHub连接

安装 hexo-deployer-git

    $ npm install hexo-deployer-git --save

修改配置D:\mytest\myhexo_config.yml

    #配置GitHub博客站址访问路径
    # URL这里要是没有配置，GitHub样式显示不出来
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://shenlibing.github.io/myhexo/
    root: /myhexo
    permalink: :year/:month/:day/:title/
    permalink_defaults:


    #博客推送到GitHub地址配置
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/shenlibing/myhexo.git
      branch: [master]

配置GitHub Pages

备份博客源文件

hexo部署到GitHub只上传.deploy_git文件夹的内容，并不会上传_posts文件夹下的博客源文件

    D:\mytest\myhexo\.deploy_git
    
    D:\mytest\myhexo\source\_posts

解决：

将_posts文件夹作为git仓库，上传到GitHub，使得其作为另一个分支

创建并切换到新分支

    libingshen@DESKTOP-7V287SK MINGW64 /d/mytest/myhexo/source/_posts (master)
    $ git checkout -b src
    Switched to a new branch 'src'

将新分支推送到GitHub

    git add .
    git commit -m 'add_v1:-新增hello-world笔记初始化'
    git push origin src

将博客源文件分支设为推送的默认分支，git push推送直接推送到src分支

补充：

删除本地分支

    $ git branch -d src

删除远程分支

    $ git push origin -d src

切换分支

    $ git checkout master

查看提交日志

    $ git log --oneline 

拓展版本一

更换hexo主题

下载

https://github.com/theme-next/hexo-theme-next

解压放到D:\mytest\myhexo\themes

修改D:\mytest\myhexo\_config.yml配置文件

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-next-master

修改站点语言

编辑D:\mytest\myhexo\_config.yml文件

    # Site
    title: 小兵兵
    subtitle:
    description:
    keywords:
    author: shenlibing
    language: zh-CN
    timezone:

开启搜索、字数统计和阅读时长统计

安装依赖hexo-symbols-count-time、hexo-generator-searchdb，安装依赖不成功时先删除D:\mytest\myhexo\node_modules文件夹，重新安装依赖

    
    npm install hexo-symbols-count-time --save

    npm install hexo-generator-searchdb --save

配置主题样式文件

进入D:\mytest\myhexo\themes\hexo-theme-next-master\文件夹，编辑_config.yml文件

    # Local search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true

    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false
      awl: 4
      wpm: 275

配置站点文件

编辑D:\mytest\myhexo\_config.yml文件

    #阅读时长和本文字数
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true

    #搜索功能
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

添加分类和标签

    $ hexo new page categories

    $ hexo new page tags

编辑D:\mytest\myhexo\source\categories\index.md

    ---
    title: categories
    date: 2019-01-22 16:37:58
    type: "categories"   #这部分是新添加的
    ---

编辑D:\mytest\myhexo\source\tags\index.md

    ---
    title: tags
    date: 2019-01-22 16:38:40
    type: "tags" #新添加的内容
    ---

修改菜单，添加categories和tags到menu中

    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、tags

    ---
    title: hexo博客搭建
    date: 2019-01-23 09:07:30
    categories: 日常记录
    tags: 
      - hexo
      - git
      - github
      - node
      - markdown
    ---

更换页面菜单布局位置

    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini

配置文章浏览量

注册

https://leancloud.cn/

创建应用

创建Class

配置web安全域名

获取app_id、app_key

编辑D:\mytest\myhexo\themes\hexo-theme-next-master\_config.yml配置文件，填app_id、

app_key;security设置为false

    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: BedsOkBLOBR4nM4W52xTcBhb-gzGzoHsz #<app_id>
      app_key: EEaRfb6dCMaS38laDCkSYhM9 #<app_key>
      # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
      # If you don't care about security in leancloud counter and just want to use it directly
      # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
      security: false
      betterPerformance: false

插入图片

插入本地图片

安装依赖

    npm install hexo-asset-image --save

编辑D:\mytest\myhexo\_config.yml配置文件

    post_asset_folder: true

命令hexo new post test来生成博文时，/source/_post文件夹中除了test.md外，还有一个同名test文件夹

typora插入本地图片

typora设置

文件--偏好设置--图片插入

编辑--图片工具--设置图片根目录

typora-root-url: hexo/

制作动态图软件

ScreenToGif

图片压缩软件

Imagine

设置动态背景

进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\文件夹，编辑_layout.swig文件，在</body>之前添加

    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

添加Fork me on GitHub

进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\文件夹，编辑_layout.swig文件，在
<div class="headband"></div>下面添加选择的图标样式代码

    <a href="https://github.com/shenlibing/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

添加友情链接

方式一
进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\_partials文件夹，在footer.swig文件末尾追加

 <div>友情链接：
  <a class="theme-link"  href="http://collect.w3ctrain.com/"> 前端收藏夹 </a><span>&nbsp;&nbsp;</span>
  <a class="theme-link" href="http://www.alloyteam.com/nav/"> Web前端导航 </a><span>&nbsp;&nbsp;</span>
  <a class="theme-link"  href="http://www.runoob.com/"> 菜鸟教程 </a><span>&nbsp;&nbsp;</span>
  <a class="theme-link" href="https://mccxj.github.io/"> 小毛的胡思乱想 </a><span>&nbsp;&nbsp;</span>
 </div>

方式二
进入D:\mytest\myhexo\themes\hexo-theme-next-master文件夹，编辑_config.yml文件

    # Blog rolls
    links_icon: link
    links_title: Links
    links_layout: block
    #links_layout: inline
    #links:
      #Title: http://example.com
    links:
      美团技术团队: https://tech.meituan.com/
      百度FEX: http://fex.baidu.com/
      淘宝FED: http://taobaofed.org/

设置阅读全文

进入D:\mytest\myhexo\themes\hexo-theme-next-master文件夹，编辑_config.yml文件

    # Automatically Excerpt. Not recommend.
    # Use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: true
      length: 150

添加评论

选择gitalk

需要 GitHub Application，如果没有 点击这里申请，Authorization callback URL 填写当前使用插件页面的域名。

获取client_id和client_secret

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

• clientID String

  Required. GitHub Application Client ID.

• clientSecret String

  Required. GitHub Application Client Secret.

• repo String

  Required. GitHub repository.

• owner String

  Required. GitHub repository owner. Can be personal user or organization.

• admin Array

  Required. GitHub repository owner and collaborators. (Users who having write access to this repository)

# Gitalk
# Demo: https://gitalk.github.io
# Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.top/2018/8/10/gitalk-error/
gitalk:
  enable: true
  github_id:  shenlibing # Github repo owner
  repo:  myhexo # Repository name to store issues.
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Secret
  admin_user:  shenlibing # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode

拓展版本二

开启打赏

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
reward:
  enable: true
  #comment: Donate comment here
  wechatpay: /images/wechat.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.jpg

部署到云、使用图床、优化URL

部署到云服务器

拷贝本机的公钥id_rsa.pub内容到云服务器authorized_keys上

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shenlibing.github.io/
url: http://bingbing.tech/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:



# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  # repo: https://github.com/shenlibing/shenlibing.github.io.git #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  repo: root@192.168.1.101:/root/project/hexo.git
#https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
#  repo: ssh://root@192.168.1.101:22/root/project/hexo.git
  branch: [master] #published

服务器创建裸仓库

[root@izm5eac6bnsz8uq175jkvez project]# git init --bare hexo.git

配置钩子

[root@izm5eac6bnsz8uq175jkvez hooks]# pwd
/root/project/hexo.git/hooks
[root@izm5eac6bnsz8uq175jkvez hooks]# chmod 744 post-receive
[root@izm5eac6bnsz8uq175jkvez hooks]# ll
total 44
-rwxr-xr-x 1 root root  452 Aug 13 16:59 applypatch-msg.sample
-rwxr-xr-x 1 root root  896 Aug 13 16:59 commit-msg.sample
-rwxr--r-- 1 root root  357 Aug 14 17:50 post-receive
-rwxr-xr-x 1 root root  189 Aug 13 16:59 post-update.sample
-rwxr-xr-x 1 root root  398 Aug 13 16:59 pre-applypatch.sample
-rwxr-xr-x 1 root root 1704 Aug 13 16:59 pre-commit.sample
-rwxr-xr-x 1 root root 1239 Aug 13 16:59 prepare-commit-msg.sample
-rw-r--r-- 1 root root 1348 Aug 13 16:59 pre-push.sample
-rwxr-xr-x 1 root root 4951 Aug 13 16:59 pre-rebase.sample
-rwxr-xr-x 1 root root 3611 Aug 13 16:59 update.sample

[root@izm5eac6bnsz8uq175jkvez hooks]# cat post-receive 
#!/bin/bash -l
#GIT_REPO=<到hexo.git的目录>
#TMP_GIT_CLONE=<到临时blog的目录>
#PUBLIC_WWW=<到blog服务的目录/public/blog>


GIT_REPO=/root/project/hexo.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/opt/module/website/blog
rm -rf ${TMP_GIT_CLONE}
git clone ${GIT_REPO} ${TMP_GIT_CLONE}
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
[root@izm5eac6bnsz8uq175jkvez hooks]# 

修改Nginx配置文件

[root@izm5eac6bnsz8uq175jkvez blog]# whereis nginx
nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz /usr/share/man/man3/nginx.3pm.gz
[root@izm5eac6bnsz8uq175jkvez blog]# cd /etc/nginx/
[root@izm5eac6bnsz8uq175jkvez nginx]# ll
total 72
drwxr-xr-x 2 root root 4096 May 10 16:14 conf.d
drwxr-xr-x 2 root root 4096 May 10 16:14 default.d
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf.default
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params.default
-rw-r--r-- 1 root root 2837 May 10 16:10 koi-utf
-rw-r--r-- 1 root root 2223 May 10 16:10 koi-win
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types.default
-rw-r--r-- 1 root root 3051 Aug 15 20:29 nginx.conf
-rw-r--r-- 1 root root 2467 Aug 13 11:05 nginx.conf.bak
-rw-r--r-- 1 root root 2656 May 10 16:10 nginx.conf.default
-rw-r--r-- 1 root root  636 May 10 16:10 scgi_params
-rw-r--r-- 1 root root  636 May 10 16:10 scgi_params.default
-rw-r--r-- 1 root root  664 May 10 16:10 uwsgi_params
-rw-r--r-- 1 root root  664 May 10 16:10 uwsgi_params.default
-rw-r--r-- 1 root root 3610 May 10 16:10 win-utf
[root@izm5eac6bnsz8uq175jkvez nginx]# cat nginx.conf
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8000 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

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

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
    
    server {
        listen      80;     #端口
#       server_name bingbing.tech;     #域名或IP
        root        /opt/module/website/blog;      #站点根目录
        charset     utf-8;              #文件编码
        index       index.html index.htm;    #首页
        error_page  404     /404.html;   #404页面
        error_page  500 502 503 504     /50x.html;   #服务端错误页面
        #url访问匹配路径，可以添加多个
        location / {
            index       index.html index.htm;
            root        /opt/module/website/blog;   #这里可以是绝对路径或者相对路径，基于站点根目录
        }
    }   

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

使用GitHub图床

创建个存放图片的仓库blogphoto

替换typora生成的图片路径

替换脚本

使用七牛云图床

如何配置域名的 CNAME

新建存储空间

绑定域名

域名添加CANME记录

上传图片、外链访问

替换脚本

优化URL

安装依赖

npm install hexo-abbrlink --save

编辑D:\mytest\myhexo\_config.yml配置文件

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shenlibing.github.io/
url: http://bingbing.tech/
root: /
# permalink: :year/:month/:day/:title/
# permalink_defaults:


#插件hexo-abbrlink
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

常见错误

错误一：

故障现象：xml转移错误，导致搜索不出结果

故障原因：

解决：

参考：

【持续更新】Github Pages + Hexo 博客搭建，Next主题个性化修改

Hexo+NexT 打造一个炫酷博客

hexo史上最全搭建教程

用 Typora 写 Hexo 博客 | zhangnew

使用Typora+Hexo+Google Drive打造自己的云笔记 | 情起·而深

我的云端硬盘 - Google 云端硬盘

原文地址：https://www.cnblogs.com/lisingshen/p/11569223.html