hexo

时间 2020-06-13

标签 hexo 繁體版

原文原文链接

title: hexo
categories: 博客
tags:javascript

hexo
github

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

安装Node.js

https://nodejs.org/en/html

安装Git

https://git-scm.com/前端

安装Hexo

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

存放位置java

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

验证安装是否成功node

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"

公私钥存放位置nginx

C:\Users\libingshen\.ssh

将公钥内容上传到GitHubgit

GitHub建立仓库做为hexo博客的站点

hexo配置GitHub链接

安装 hexo-deployer-gitgithub

$ npm install hexo-deployer-git --save

修改配置D:mytestmyhexo_config.ymlweb

#配置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:mytestmyhexothemes

修改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:mytestmyhexonode_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:mytestmyhexosourcecategoriesindex.md

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

编辑D:mytestmyhexosourcetagsindex.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:mytestmyhexothemeshexo-theme-next-masterlayout文件夹，编辑_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:mytestmyhexothemeshexo-theme-next-masterlayout文件夹，编辑_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 云端硬盘