Hexo搭建个人博客

个人网站：https://sunfove.xyz

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
hexo官网： http://hexo.io
github: https://github.com/hexojs/hexo

hexo优势

由于github pages存放的都是静态文件，hexo所做的就是将md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。
hexo具有以下特点：

• 超快速度：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染
• 支持 Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件
• 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
• 丰富的插件：Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript

安装hexo

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

• Node.js (Node.js 版本需不低于 8.6，建议使用 Node.js 10.0 及以上版本)
• Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

npm install hexo-cli -g
hexo init 
npm install
hexo s

如果您的电脑中尚未安装所需要的程序，请根据hexo官网安装指示完成安装:https://hexo.io/zh-cn/docs/。

hexo指令

配置好之后，hexo就可以使用了，常用的hexo命令可访问hexo指令。

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写形式：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令

hexo s -g #生成并本地预览
hexo d -g #生成并上传

Github

GitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub。

Github简介

作为开源代码库以及版本控制系统，Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。

如前所述，作为一个分布式的版本控制系统，在Git中并不存在主库这样的概念，每一份复制出的库都可以独立使用，任何两个库之间的不一致之处都可以进行合并。

清空Github仓库内容

如果想要清空github仓库中的内容，可以先创建分支，然后清空本地master中的文件，保留.git和readme.md，清空后git到远程仓库中，可参考Github清空远程仓库

配置SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到 .ssh\id_rsa.pub 文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
测试是否成功

ssh -T git@github.com # 注意邮箱地址不用改

看到如下提示，说明配置成功。

You’ve successfully authenticated, but GitHub does not provide shell access.

此时你还需要配置：

$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

参考：使用hexo+github搭建免费个人博客详细教程

Deploy到github中

修改站点配置文件(_config.yml)，修改 depoly ：

deploy:
  type: git 
  repo: git@github.com:username/username.github.io.git //替换成自己的邮箱
  branch: master

如果不行，安装插件：

npm install hexo-deployer-git --save

修改主题

hexo的主题非常之多，可以从官网的主题中自由选择。这里以next主题为例。
主题的下载可以通过git到hexo/theme或者直接download zip然后解压到hexo/theme文件夹。
在站点配置文件(_config.yml)中查找theme，
然后将landscape修改为next或者hexo-theme-next，具体以theme中文件夹名称为主。
hexo d -g后hexo s并刷新网页，可以看到主题已经更换成了next。

Next主题修改

Next安装

安装next主题：

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

语言修改

在站点文件_config.yml中查找language并将en修改为简体中文（zh-CN）：

Site

title: 明明如月
subtitle:
description:
keywords:
author: sunfove
language: zh-CN //语言名称要写对
timezone:

注意更改的语言名称要写对，具体查看主题文件夹下的language文件夹中的名称。

新建带日期格式的博文

使用hexo new post “博文名称”生成的博文以博文名称生成文件，当文件太多时不便于管理查看，生成yyyy-MM-dd-博文名称的名称有助于我们管理自己的博文。
在站点文件_config.yml中设置博客生成名称:

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts 

重新执行hexo new post “博文名称”命令，就可以生成yyyy-MM-dd-博文名称.md类型的名称了。

侧栏头像

在主题文件_config.yml中搜索：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: #/images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # If true, the avatar would be rotated with the cursor.
  rotated: false

在url处添加头像路径，本地图片放到主题文件夹下的source/image中，rounded为是否用圆形头像， rotated为是否旋转头像。

添加标签和分类

添加一个 分类 页面，并在菜单中显示页面链接。
新建一个页面，命名为 categories 。命令如下：

hexo new page categories
hexo new page tags

编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

在菜单中添加链接。编辑主题的_config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:

menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

添加标签和这个操作类似，将categories换成tags即可。

参考：创建分类界面

对文章进行加密

打开 hemes\hexo-theme-next\layout\_partials\head\head.swig，在文件的开头位置找到如下代码

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="{{ theme.android_chrome_color }}">

在上边代码的末尾添加如下代码：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
		if (history.length === 1) {
		    window.opener = null;
		    window.open('', '_self');
		    window.close();
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

添加完脚本代码，接下来在想要加密的文章的文件头加上 password 属性就行了，如下：

---
title: XXX
date: XXX
tags:
  - XXX
categories:
  - XXX
password: 123
---

这样在打开这篇文章时只有输入了123这个密码才可以打开成功。

参考：NexT主题个性化 - 对文章进行加密

Hexo admin编辑博客

如果自己编辑 MD 文件的话，确实比较麻烦，你可以用一些 MD 的编辑器，但是在管理 MD 文件上还是操作不方便。
这里推荐使用 hexo-admin，而且编辑完之后可以马上看到效果呢。
需要说明的是，hexo-admin 管理是本地用的，就是你需要在本地编辑完之后再上传到 github，而不能直接在线编辑保存，因为 github pages 只支持静态页面的。
安装过程：

npm install --save hexo-admin

在 hexo-admin 你可以

• Pages - 新加 page；
• Posts - 新加或删除 post；双击一个 post，你可以编辑，预览，新增修改 tags、categories，选择发布或不发布；
• Settings - 一些配置；
• Deploy - 可以直接部署到 github。
  

参考：hexo-admin安装使用

注：按照这个方案配置hexo-admin后，会出现如下警告，但不太影响使用。

hexo s -g
(node:12084) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

配置完成后，可以进行认证，详见：【hexo】安装并配置admin插件。
这样登录admin就需要账号密码验证。

阅读全文

推荐使用< !--more--> 进行手动截断，网上有很多教程自动截断，但文中包含中文和一些特殊符号的时候，判断可能会失效。自动截断教程可参考：Hexo-设置阅读全文。

修改标签样式

修改模板 \themes\hexo-theme-next\layout\_macro/post.swig，搜索 {%- set tag_indicate = '#' %}，将 # 换成<i class="fa fa-tag"></i>

修改布局模板

layout 布局模板放在 scaffolds/ 目录下，文件名称就是layout 名称。每次新建时，Hexo 会尝试在 scaffolds 文件夹中寻找同名文件，并根据其内容建立文章。所以可以在这里添加自己的 layout，作为常用的新建模板使用。同时你也可以编辑现有的 layout，比如 post 的 layout 默认是 scaffolds\post.md。

这里有一份文章配置信息，可以根据情况修改后作为模板复用，或直接在保存文章的路径新建.md文件中使用：

---
title:   #文章名
date:   #发表日期
updated:   #更新日期
categories:   #文章分类
tags:   #文章标签，多标签时使用英文逗号隔开
photos:  #如果使用Fancybox（文章头部展示图片），如此设置
- URL1
- URL2
---

参考：Hexo 使用指导

切换主题风格

在主题文件_config.yml中查找schemes

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

4种风格大同小异，你们可以选择自己喜欢的风格。

• Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist - Muse 的紧凑版本，整洁有序的单栏外观
• Pisces - 双栏 Scheme，小家碧玉似的清新
• Gemini - 类似Pisces

配置浏览进度

在主题文件_config.yml中查找scrollpercent，将false改为true。

本地搜索

安装插件

npm install hexo-generator-search --save

修改 站点配置 文件:

search:
  path: search.xml
  field: post
  content: true

• path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
• field - the search scope you want to search, you can chose:
  • post (Default) - will only covers all the posts of your blog.
  • page - will only covers all the pages of your blog.
  • all - will covers all the posts and pages of your blog.
• content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

  参考：hexo-generator-search

注：之前只能搜索标题，不能搜索内容，可能是与local admin冲突，去掉admin后，可以正常使用了。后面发现好像是之前post的一个文件格式有问题，加了URL 1和URL 2导致没法搜索。并不是，烦。但是已经不报错了。
最后不清楚到底为啥，并不能搜索全文，无论修改成post还是all，都不行。最后在github上找到了一个解决方案，完美解决，感谢。
经验证，仅仅采用第二种方案还是不行，必须要同时安装两个插件才可以。
使用hexo-generator-search-zip

npm install hexo-generator-search-zip --save

配置说明：修改站点文件

search:
  path: search.json
  zipPath: search.zip
  versionPath: searchVersion.txt
  field: post

其中field有以下可选，
* post (Default) - will only covers all the posts of your blog.
* page - will only covers all the pages of your blog.
* all - will covers all the posts and pages of your blog.

参考：hexo-generator-search-zip

SiteMap插件

hexo-generator-sitemap：生成易于搜索引擎搜素的网站地图

npm install hexo-generator-sitemap --save

添加配置信息：

#feed
atom:
  type: atom
  path: atom.xml
  limit: 20

可以在主题配置文件中添加相关配置，可以在页面上显示。
比如，添加链接信息

links:
  Feed: /atom.xml
  SiteMap: /sitemap.xml

参考：手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

注：有点问题，给关了。

设置菜单及对应页面

在主题配置文件中查找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

去掉#注释即可显示对应的菜单项，也可自定义新的菜单项。 ||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

新添加的菜单需要翻译对应的中文
打开hexo/theme/next/languages/zh-CN.yml，在menu下自定义，如：

menu:
  resources: 资源

hexo new page “categories”
此时在根目录的source文件夹下会生成一个categories文件，文件中有一个index.md文件，修改内容如下

---
title: 分类
date: 2017-12-14 13:05:38
type: "categories"
comments: false
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

参考：Hexo框架下用NexT(v7.0+)主题美化博客

网站图标设置

图标可以从图标素材网站：iconfont、easyicon上进行下载。
下载16x16以及32x32大小的PNG格式图标，置于/themes/next/source/images/下
打开themes/next/下的_config.yml，查找favicon

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改small和medium的路径为下载的图标路径

参考：Hexo框架下用NexT(v7.0+)主题美化博客

设定站点建立时间

打开themes/next/下的_config.yml，查找since

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2019

如果不设置，默认显示当前年份。

参考：Hexo框架下用NexT(v7.0+)主题美化博客

修改侧栏颜色

打开\themes\hexo-theme-next\source\css\_schemes\Pisces中的_menu.styl文件，查找background：

.menu-item-active a {
  background: #f9f9f9;
  border-bottom-color: white;
  $badges = hexo-config('menu_settings.badges');

将f9f9f9修改成自己想要的颜色，可从encycolorpedia上查看颜色。

创建同名文件夹

新建文章时，在相同目录下创建同名文件夹（便于图片管理）：
打开站点配置文件_config.yml，搜索post_asset_folder字段，设置其值为true
安装hexo-asset-image：

npm install hexo-asset-image --save

此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
只需在 md 文件里使用 ![title](图片名.jpg) ，无需路径名就可以插入图片。

设置博客透明度

在\themes\hexo-theme-next\source\css\_schemes\Pisces\_layout.styl文件中，查找.content，修改background：

.content-wrap {
  background: rgba(255, 255, 255, 0.8);

rgba中最后一个参数表示透明度。

图片点击放大

图片可点击放大查看，放大后可关闭。打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true
进入到theme/text/文件夹下，打开`git bash。

博客访问量统计

打开主题配置文件_config.yml，查找busuanzi：

busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

false改为true即可。

修改powered标识

修改文末的“由 Hexo 强力驱动”，theme版本标志：

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:
  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true
theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

false改为true即可。

统计字数

使用hexo-symbols-count-time. Symbols count and time to read of articles.Better than hexo-reading-time and faster than hexo-worcount. No external dependencies.安装：

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

在站点配置文件中添加：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false

在主题配置文件中修改：

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
  suffix: mins.

参考：https://github.com/theme-next/hexo-symbols-count-time

社交账号

Usage: Key: permalink || icon
Key is the link label showing to end users. Value before || delimiter is the target permalink. Value after || delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.

social:
  GitHub: https://github.com/sunfove || github
  E-Mail: mailto:sunfove@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

友情链接

Blog rolls：

links_settings:
  icon: link
  title: 友情链接
  # Available values: block | inline
  layout: block
links:
  我的简书: https://www.jianshu.com/u/39e329082972

评论系统

评论系统采用了Valine和Leancloud结合，先在Leancloud申请账号，并创建应用

进入应用设置，在安全中心绑定域名，然后在应用keys中读取AppID和AppKey，进入主题配置文件中，查找valine，然后按照如下形式填写ID和Key。

valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid:  # Your leancloud application appid
  appkey:  # Your leancloud application appkey
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 说两句吧 # Comment box placeholder
  avatar: monsterid # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  #post_meta_order: 0

其中Valine 的 avatar 参数用来设置评论头像，avatar 参数可选值如下:

匿名聊天

按照网上的说明配置Daovoice一直出现问题，后来使用了chatra，十天试用期，之后又尝试了tidio，以下是tidio配置说明。

tidio:
  enable: true
  key:  # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

id通过在tidio官网注册账号，然后输入中developer中找到public key，输入即可。但是加载速度似乎特别慢，可能因为服务器在国外的缘故。

打赏功能

添加打赏。在主题文件中查找reward：

 reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: true
  #comment: Donate comment here.

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

百度SEO

在主题配置工具中，查找baidu_push并更改为true：

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true

百度统计

在百度统计中注册账号并获取app_id，然后在主题配置文件中查找Baidu Analytics，粘贴到对应位置。

# Baidu Analytics
baidu_analytics:  # <app_id>

文章置顶

在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。
修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。
需添加的代码：

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

修改完成后，只需要在front-matter中设置需要置顶文章的top值，将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是，这个文件不是主题的一部分，也不是Git管理的，备份的时候比较容易忽略。
以下是最终的generator.js内容

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置置顶标志
打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到

标签下，插入如下代码：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

我没有修改color而是修改了font size = 2，使得和其他字体大小统一。

参考：Hexo博客添加文章置顶功能
hexo博客优化之文章置顶+置顶标签

---

Hexo

#hexo #技能 #兴趣

Hexo搭建个人博客

https://sunfove.xyz/2019/09/24/2019-09-24-Hexo搭建个人博客/

Author

Sunfove

Posted on

September 24, 2019

Licensed under

重装系统后软件安装 Previous

Matlab批处理 Next