hexo博客安装与配置步骤

发表于： 2019-08-21 分类于：编程

字数： 6196 阅读：≈ 13分钟浏览：

GitHub+Hexo 搭建个人网站详细教程。随着互联网浪潮的翻腾，国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后，如果你是一个不甘寂寞的程序猿（媛），是否也想要搭建一个属于自己的个人网站，如果你曾经或者现在正有这样的想法，请跟随这篇文章发挥你的Geek精神，让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。

1.安装Git nodejs

安装git 淘宝镜像安装nodejs

先在桌面建个blog的文件夹

开始菜单右键运行 CMD(文件夹右键在此处打开命令窗口无效) 输入d: 进入D盘再 cd 文档 cd桌面 cd blog 或者cd 文档/桌面/blog

改变hexo镜像包地址

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装hexo

cnpm install hexo-cli -g

查看版本信息新机安装迁移到这里就可以了能显示hexo v就可以了直接hexo s

hexo -v

初始化hexo程序

hexo init

启动本地hexo

hexo s

桌面本地http://localhost:4000

3.GIT和github关联

鼠标右击打开Git Bash here 设置user.name和user.email配置信息：

git config --global user.name "loveyouluobin"
git config --global user.email "loveyouluobin@qq.com"
ssh-keygen -t rsa -C "loveyouluobin@qq.com"

然后直接三个回车即可，默认不需要设置密码

生成了ssh密钥文件：

然后找到生成的(/c/Users/Administrator/.ssh的文件夹中的id_rsa.pub密钥，将内容全部复制

打开 GitHub_Settings_keys 页面，新建new SSH Key

Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。

在Git Bash中检测GitHub公钥设置是否成功，输入

ssh git@github.com

PTY allocation request failed on channel 0 则成功

如没有建仓库,新建仓库时一定要是loveyouluobin.github.io

如果没有加后面的github.io不能以默认域名访问

设置主页目录Source

Your GitHub Pages site is currently being built from the main branch. Learn more .

设置为main root 然后保存Save

https://loveyouluobin.github.io/

4.推送到github

将hexo和GitHub关联起来，修改D:\文档\桌面\blog配置文件_config.yml

repository地址在仓库里复制ssh里的地址

deploy:
  type: git        
  repo: git@github.com:loveyouluobin/loveyouluobin.github.io.git
  branch: main

或者

deploy:
 type: git 
 repo: https://github.com/loveyouluobin/loveyouluobin.github.io.git
 branch: main

CMD里安装deploy-git部署命令

npm install hexo-deployer-git --save

清除之前生成的东西生成静态文章部署文章到github 分开运行

hexo clean
hexo g
hexo d

设置next主题

1下载主题

next主题是hexo的一个著名的第三方主题，在hexo博客源码目录右键打开Git bash here，使用以下命令下载next主题：

git clone git@github.com:theme-next/hexo-theme-next.git themes/next

或者直接点此处下载ZIP包解压到themes

2设置主题

打开hexo源码根目录下的_config.yml文件，修改相应部分为以下内容：

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

清除 Hexo 的缓存

3发布

hexo clean
hexo s

4部署到hithub

npm install hexo-deployer-git --save

报错原因是hexo在5.0之后把swig给删除了需要自己手动安装

 npm i hexo-renderer-swig

这时，我们分别输入三条命令：

hexo clean 
hexo g 
hexo d

next主题更改

冒号后面要有一个空格设置前面不能有空格

# Site
title: 小小罗对世界的分享
subtitle: 一生一次的生命该如何度过呢？
description: 小小罗对世界的分享
keywords: 小小罗对世界的分享
author: luobin
language: zh-CN
timezone: Asia/Shanghai

保存的时候一定要选择utf-8

hexo博客front-matter格式

title: 标题
date: 2020-02-29 16:00:00
summary: # 文章摘要
toc: true
mathjax: true
top: true
cover: true
abbrlink: 213245 # 自己可随意设置
img: 'https://img-blog.csdnimg.cn/20200309120551356.png' # 设置文章背景图，设置为外链图片，访问快
tags:
  - 算法
  - 计算机知识
categories:
  - 算法
author: # 设置文章作者
password: # 设置密码（yml中开启相应功能）
coverImg: # 轮播图片

Front-matter 选项详解
Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	Markdown的文件标题	文章标题
date	文件创建的时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover	false	表示该文章是否需要加入到首页轮播封面中
coverImg	无	表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	ture	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
reprintPolicy	无	文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

next分类和标签正确显示

_config.ym config.yml 选择样式

# Schemes主题样式
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

# Schemes打开菜单
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

hexo根目录的source文件夹下新建一个tags和categories文件夹，然后在tags和categories文件夹里面新建一个index.md文件

---
title: "标签"
type: tags
layout: "tags"
---

---
title: "分类"
type: categories
layout: "categories"
---

关于页

hexo根目录的source文件夹下新建一个about 新建一个index.md文件

---
title: 关于
type: about
---
其它内容

文章置顶

npm install hexo-generator-index-pin-top --save

在需要置顶的文章的 Front-matter 中加上 top: true 即可实现文章置顶功能

搜索

根目录安装插件

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件

找到 local_search 项，将它的enable修改为true。

摘要

站点根目录\themes\next\_config.yml
搜索auto_excerpt，然后配置如下，开启摘要，设置摘要长度为150个字
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

或者在文章中

description: 这是摘要

图片防盗链

主题head.ejs D:\文档\blog\themes\next\layout_partials\head\head.swig

<meta name="referrer" content="no-referrer" />

头像

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

去掉文章目录标题的自动编号

toc:
  enable: true
  # Automatically add list number to toc.
  number: false

其它设置教程

http://theme-next.iissnan.com/theme-settings.html

加密

在hexo目录下CMD npm install hexo-blog-encrypt

在主题下启动/next/_config.yml文件中添加内容

encrypt: enable:true

---     
password: luobin   
abstract: 输入密码访问 
message: 限制访问
---

打赏

  enable: true
  animation: true
  #comment: 如果此文章对您有价值，您可以自由打赏。

reward:
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.jpg
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

永久链接

安装插件

npm install hexo-abbrlink --save

执行此命令可能会不成功，提示你缺少相应的依赖比如babel-eslint、mini-css-extract-plugin、webpack-cli… 使用npm命令安装即可，比如npm install eslint@4.x babel-eslint@8 --save-dev

配置

安装

npm install hexo-abbrlink --save

在站点配置文件中查找代码permalink，将其更改为:

permalink: posts/:abbrlink/  # “posts/” 可自行更换

增加

# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

压缩

hexo-neat使用起来非常方便，只需在站点根目录安装：CMD

npm install hexo-neat –save

卸载 npm uninstall hexo-neat –save

在站点配置文件_config.yml的末尾添加配置：

# 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'

hexo g会自动压缩

去掉页脚

D:\文档\blog\themes\next\layout_partials footer.swig

<div class="copyright">
  {% set copyright_year = date(null, 'YYYY') %}
  {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} {% endif %}
  <span itemprop="copyrightYear">
  <span class="with-love">
    <i class="{{ theme.footer.icon.name }}"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>

音频

安装所依赖的插件， GitHub 地址：

npm install --no-optional --save hexo-tag-aplayer

在 MD 的文章中插入如下代码即可，若想禁用自动播放，请去掉 autoplay 标签：

{% aplayer "{{音频名称}}" "{{音频作者}}" "{{音频链接}}" "{{音频缩略图}}" "autoplay" %}

视频

安装所依赖的插件， GitHub 地址：

npm install --no-optional --save hexo-tag-dplayer

在 MD 的文章中插入如下代码即可，若想禁用自动播放，请去掉 autoplay 标签：

{% dplayer "url={{视频链接}}" "pic={{视频缩略图}}" "theme=#FADFA3" "autoplay=false" %}

hexo-all-minifier压缩使用

这款工具它兼顾了hexo-neat的易用性，和gulp的功能。

安装 cnpm install hexo-all-minifier –save

配置在根目录_config.yml里添加:

all_minifier: true

取消动画

主题_config.yml将motion下的enable参数设置为false即可关闭页面动画

motion:
  enable: false

友链社交图标

# Blog rolls
links_icon: link          # 友链的图标 参考上文
links_title: Links        # 友链的title  比如你可以更改为 友情链接
#links_layout: inline     # 友链摆放的样式：按线摆放（一行很多个），注意，同时只能一种样式
links:
  谷歌: http://www.google.com/  # 友链的地址

social:
  #GitHub: https://github.com/loveyouluobin || fab fa-github
  E-Mail: mailto:loveyouluobin@qq.com || fa fa-envelope
  #Weibo: https://weibo.com/loveyouluobin || fab fa-weibo
  #CSDN: https://blog.csdn.net/loveyouluobin || crosshairs
  QQ: tencent://message/?uin=304967823 || fab fa-qq

本地后台管理

npm install hexo-admin –save

http://localhost:4000/admin

在hexo的“_config.yml”文件中还可以配置一些hexo-admin插件的参数，用于保证安全的。如果是部署到GitHub pages上的话就没必要设置这个，因为GitHub只支持静态，而且hexo-admin的管理界面并不会一起被部署上去。

admin:
  username: 用户名
  password_hash: md5密码
  secret:  用于加密cookie的密码

“_config.yml”的参数可以使用hexo-admin自动生成，打开hexo-admin界面，点击导航的“settings”选项，输入内容。

输入内容后下滑，找到生成的代码，复制到“_config.yml”中重启hexo，打来hexo-admin的界面

重装hexo

安装Hexo

git bash 上输入 npm install hexo-cli -g

或cnpm install hexo-cli -g

删掉原blog文件夹部分文件

打开你原有的 blog文件夹，只需保留_config.yml，theme/，source/，scaffolds/，package.json，.gitignore 这些项目，删除其他的文件。

安装依赖文件

git bash 上输入 npm install 失败就用 cnpm install

安装部署插件

git bash 上输入 npm install hexo-deployer-git --save

最后运行 hexo clean && hexo g && hexo d 看看是否成功。

升级

1.自动更新

使用cd命令进入博客根目录

cnpm update

2手动更新

使用cd命令进入博客根目录

常规操作，不做解释

检查插件更新

npm outdated

运行后可以检查Hexo和插件的最新版本

修改根目录的package.json文件，将对应插件名称所对应的版本号更改为要更新的版本号

npm install –save

1、全局升级hexo-cli，先hexo v查看当前版本，然后cnpm i hexo-cli -g，再次hexo v查看是否升级成功。

2、使用copy install -g npm-check和npm-check，检查系统中的插件是否有升级的，可以看到自己前面都安装了那些插件

3、使用cnpm install -g npm-upgrade和npm-upgrade，升级系统中的插件

4、使用cnpm update -g和cnpm update –save
————————————————

升级亲测有效

# 使用淘宝源的 cnpm 替换 npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g cnpm                 # 升级 npm
cnpm cache clean -f                 # 清除 npm 缓存

===更新 hexo: 进入 blog 目录，执行如下命令=== 
# 更新 package.json 中的 hexo 及个插件版本
cnpm install -g npm-check           # 检查之前安装的插件，都有哪些是可以升级的 
cnpm install -g npm-upgrade         # 升级系统中的插件
npm-check
npm-upgrade

# 更新 hexo 及所有插件
cnpm update

# 确认 hexo 已经更新
hexo -v
————————————————

升级

后期需要升级的化，进入 blog 目录，先检查更新:会列出要升级的版本

$ npm outdated

修改 package.json 文件，基于 Latest 列内容更新版本号，然后更新并检查版本号：

$ npm install --save

npm install

https://www.techgrow.cn/posts/d1f06120.html

全局升级 Hexo 版本

若曾经在系统里，直接使用过 hexo 的命令，才需要执行以下升级操作

# 清理NPM缓存
$ npm cache clean -f

# 全局安装版本检测、版本升级工具
$ npm install -g npm-check
$ npm install -g npm-upgrade

# 全局检测哪些模块可以升级，这里可以根据打印的提示信息，手动安装最新版本的模块
$ npm-check -g

# 全局更新模块
$ npm update -g

# 全局安装或更新Hexo的最新版本
$ npm install --global hexo

博客升级 Hexo 版本

# 进入博客的根目录
$ cd /blog-root

# 检测Hexo哪些模块可以升级
$ npm-check

# 删除package-lock.json
# rm -rf package-lock.json

# 更新package.json
$ npm-upgrade

# 删除整个模块目录，这样可以避免很多坑
$ rm -rf node_modules

# 更新Hexo的模块
$ npm update --save

# 若出现依赖的问题，用以下命令检查一下，然后把报错的统一修复一下即可
$ npm audix

# 或者强制更新
$ npm update --save --force

由于新版的 Hexo 一般增加了不少新特性，因此需要使用新版 Hexo 默认的配置模版文件 _config.yml，同时还需要稍微更改旧版的 package.json 配置文件，否则容易出现各种兼容错误

# 进入博客的根目录
$ cd /blog-root

# 备份旧版的配置文件
$ mv _config.yml _config.yml.bak
$ mv package.json package.json.bak
$ 单独初始化全新的Hexo博客目录
$ hexo init hexo-upgrade

$ 拷贝新的配置模版文件到博客的根目录
$ cp hexo-upgrade/_config.yml /blog-root/_config.yml
$ cp hexo-upgrade/package.json /blog-root/package.json

# 最后在新的配置模版文件里，重新追加旧版的Hexo配置内容

新增菜单栏选项

1、添加新页面：hexo new page “xx” 2、在主题配置文件的menu中加上该页面 3、在zh-CN.yml文件中加上中文意思

新增草稿

1、添加草稿：hexo new draft “xx” 2、预览草稿：hexo server –draft 3、发布草稿：hexo publish draft “xx”

图片处理

1、配置文件中的post_asset_folder改成true 2、npm install hexo-asset-image –save 3、放到该文件夹下，按照md格式输入(文件名称/图片名.jpg)

搜索

1、npm install hexo-generator-searchdb –save 2、站点配置文件的扩展下添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、主题配置文件下，local_search改成true即可

local_search:
  enable: true

字数

1、npm install hexo-symbols-count-time –save 2、站点配置

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

宠物

1、npm install –save hexo-helper-live2d 2、 live2d插件 3、安装合适的宠物npm install live2d-widget-model-wanko 4、在配置文件中添加即可

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
#    use: live2d-widget-model-tororo
#    use: live2d-widget-model-hijiki
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
#    水平位置
#    hOffset: 0
#    垂直位置
#    vOffset: -20
  mobile:
    show: true

点击弹爱心

1、在source->js目录下新建一个js文件为click-love.js

! function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

2、在主题theme->layout->_partials->footer文件中导入该js文件即可

<script type="text/javascript" src="/js/click-love.js"></script>

新增文章处理

然后按照指示hexo n "标题"

---
title: 标题
date: 2020-10-23 18:40:49
updated: 2020-10-24 18:40:49 //更新时间
tags:
- 标签1
- 标签2 //标签
categories:
- [默认分类,其它分类] //布局
layout: //指定布局
permalink: //覆盖文章网址
comments: true //是否评论
img://特色图片
top:false//是否置顶
password:8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
---

hexo -c g s 新增处理

之后hexo g 生成 hexo s 再启动

npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客

命令简写 hexo n “我的博客” == hexo new “我的博客” #新建文章 hexo g == hexo generate #生成 hexo s == hexo server #启动服务预览 hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器 hexo server -s #静态模式 hexo server -p 5000 #更改端口 hexo server -i 192.168.1.1 #自定义 IP hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

发布到coding(已失效)

在电脑桌面右键，打开Git Bash Here，输入
则我们生成一个SSH，输入

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

不设置密码的可以直接按三次回车

C:\Users\Administrator.ssh 复制id_rsa.pub到 coding SSH公钥里

在Git Bash Here 中输入

ssh -T git@git.coding.net

打开Coding新建的项目，找到这个地方，复制仓库地址

配置完，执行以下命令 hexo clean hexo g hexo d

coding里设置持续部署—>静态网站->设置OK http://sq2frl.coding-pages.com/