hexo笔记

hexo

玩hexo过程中遇到的坑

本文主要参考自 https://chaooo.github.io/article/20161229.html，主要用来记录hexo搭建的整个过程，方便后面查看。

1.hexo安装

在安装hexo之前，必须确认你已经安装了Node.js和Git。

1.1.hexo 初始化

安装 hexo

1
npm install -g hexo-cli

在你想要存放该博客项目的目录下，执行以下命令，这两步都比较耗时，因为要下载许多文件

1
2
hexo init
npm install

先预览一下效果

1
2
hexo generate
hexo server

上面命令可简化成如下：

1
2
hexo g
hexo s

运行成功后，即可在浏览器输入localhost:4000即可看到效果。

1.2.部署到远端

我们这里以gitee码云作为远端进行部署，在根目录下找到_config.yml，添加以下代码

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repository:
    #github: git@github.com:lingengxiong/lingengxiong.github.io.git
    gitee: git@gitee.com:lingengxiong/lingengxiong.git
  branch: master

假如需要部署到多个远端，只需要在repository中配置多个地址即可。

配置完成后，安装deployer插件，该插件用来将生产的静态文件部署到远端仓库

1
npm install hexo-deployer-git --save

安装完成即可生产静态文件，继而推送到远端

1
2
hexo generate
hexo deploy

温馨提示：第一次使用git时会弹出输入框，此时输入git仓库的用户名和密码即可。

2.hexo 主题安装

尝试了很多种主题，最后决定用BlueLake，一方面是因为布局功能都很符合自己的需求，另一方面则是挺好看的

2.1.安装

安装主题和渲染:

1
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake

Blue是基于jade和stylus写的，所有需要安装hexo-renderer-jade和hexo-renderer-stylus

1
2
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-stylus --save

切到themes/BlueLake，下载主题所需要的库

1
2
$ cd themes/BlueLake
$ npm install

2.2.启用主题

要使用刚下载好的主题，只需要修改根目录下_config.yml配置文件，找到theme字段，修改为BlueLake

1
theme: BuleLake

依次执行以下命令，然后打开localhost:4000就可以看效果了

1
2
3
hexo clean
hexo g
hexo s

2.3 配置

目前的整个工程都还是比较原始的状态，我们的工作就是添加我们自己的东西进去了。

2.3.1 配置网站头部显示文字

打开_config.yml，找到：

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

title和subtitle分别是网站主标题和副标题，会显示在网站头部；

description在网站界面不会显示，内容会加入网站源码的meta标签中，主要用于SEO；

author就填写网站所有者的名字，会在网站底部的Copyright处有所显示。

2.3.2 设置语言

该主题目前有七种语言：简体中文（zh-CN），繁体中文（zh-TW），英语（en），法语（fr-FR），德语（de-DE），韩语 （ko）,西班牙语（es-ES）；例如选用简体中文，在根_config.yml配置如下：

1
language: zh-CN
2.3.3 添加about页

about页是一个介绍自己的页面，可以在上面写一些自己的联系方式或者其他平台博客链接之类

在根目录下运行命令：

1
hexo new page 'about'

打开主题_config.yml，补充详细信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# About page
about:
  photo_url: ## Your photo e.g. http://cdn.chaooo.top/blog/themeauthor.jpg
  items:
  - label: email
    url: ## Your email with mailto: e.g.  mailto:zhenggchaoo@gmail.com
    title: ## Your email e.g.  zhenggchaoo@gmail.com
  - label: github
    url: ## Your github'url e.g.  https://github.com/chaooo
    title: ## Your github'name e.g.  chaooo
  - label: weibo
    url: ## Your weibo's url e.g.  http://weibo.com/zhengchaooo
    title: ## Your weibo's name e.g.  秋过冬漫长
2.3.4 安装 RSS(订阅) 和 sitemap(网站地图) 插件

在根目录打开命令行，运行以下命令：

1
2
3
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

添加主题_config.yml配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Plugins:
  hexo-generator-feed
  hexo-generator-sitemap
  hexo-generator-baidu-sitemap

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

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
2.3.5 更换主题背景

该主题目前有两种背景，深色和浅色，需要设置为深色只需要修改主题_config.yml

1
2
# Theme tone
dark: false #true/false
2.3.6 添加文章版权信息

修改主题_config.yml

1
2
3
4
5
# Theme tone
#Copyright
copyright: 
  enable: true #true/false  
  describe: 转载请注明出处(必须保留原文作者署名原文链接) #自定义描述替换默认描述

2.4 添加本地搜索

默认本地搜索是用原生JS写的，但还需要HEXO插件创建的JSON数据文件配合。安装插件hexo-generator-json-content来创建JSON数据文件：

1
$ npm install hexo-generator-json-content@2.2.0 --save

然后在根_config.yml添加配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

最后在主题_config.yml添加配置：

1
local_search: true

2.5 首页添加文章置顶

在根目录下打开命令行窗口安装：

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

假如文章需要添加置顶，只需要在Front-matter中加上top: true即可

1
2
3
4
5
6
---
title: BlueLake博客主题的详细配置
tags: [hexo,BlueLake]
categories: Hexo博客折腾
top: true
---

2.6 修改站点图标

站点图标存放在主题的Source目录下，已经默认为您准备了两张图片。您也可以自己设计站点LOGO。
您需要准备一张ico格式并命名为** favicon.ico ，请将其放入hexo目录的source文件夹，建议大小：32px X 32px。
您需要为苹果设备添加网站徽标，请命名为 apple-touch-icon.png **的图像放入hexo目录的“source”文件夹中，建议大小为：114px X 114px。
(有很多网站都可以在线生成ico格式的图片。)

3. 笔记仓库与博客项目分离

我们可以看到目前文章放在source/_posts目录下，我们不可能每次写笔记都跑到这里写，这里我采用git子模块的形式，我们平常笔记在自己的笔记仓库里写，写完推到远端仓库，更新博客只需要先拉一下笔记仓库里的文件，再更新到线上博客。这样做博客项目只负责发布，不负责编辑笔记。我的博客笔记放在https://gitee.com/lingengxiong/blog-note.git

3.1添加子模块的方法

1
git submodule add 仓库名 路径

其中，仓库地址是指子模块仓库地址，路径指将子模块放置在当前工程下的路径。
注意：路径不能以 / 结尾（会造成修改不生效）、不能是现有工程已有的目录（不能順利 Clone）

3.2删除子模块方法

submodule的删除稍微麻烦点：首先，要在“.gitmodules”文件中删除相应配置信息。然后，执行“git rm –cached ”命令将子模块所在的文件从git中删除。

故先把source/_post文件夹删除，然后执行

1
git submodule add https://gitee.com/lingengxiong/blog-note.git source/_posts/

这样我们已经成功把笔记仓库引入博客项目内，以后只需要定时拉取最新内容进行发布即可

3.3 README.md等文件不生成博客内容

我们引入的博客仓库中包含有该仓库的README.md文件，这些文件不需要生成文章，可以修改根目录_config.yml文件进行屏蔽：

1
skip_render: ['_posts/**/README.md','_posts/**/README.en.md']

4.hexo备份与恢复

4.1.备份

在公司好不容易把工程搭建起来，却到了下班的时候，回家想继续搞岂不是蛋疼得再配置一遍？这可不行，而且要是电脑坏了怎么办，前面的时间岂不是白费，所以肯定得做好备份~

最开始想到的是用传统的git 进行备份，但在网上搜了一下，发现前辈们早已想出更懒的办法，并做成插件—hexo-git-backup，依旧是备份到github，但用起来更加便捷。

首先安装该插件

1
npm install hexo-git-backup --save

然后到你的博客根目录的_config.yml配置文件中添加如下配置：

1
2
3
4
5
6
7
8
#备份博客
backup:
  type: git
  theme: hexo-theme-yilia-master
  message: Back up my blog
  repository:
    github: git@github.com:lingengxiong/lingengxiong.github.io.git，backup
    gitee: git@gitee.com:lingengxiong/lingengxiong.git,backup

参数解释：

  • theme：你要备份的主题名称
  • message：自定义提交信息
  • repository：仓库名，注意仓库地址后面要添加一个分支名，比如我就创建了一个 backup 分支

我这里备份了两份，一份到github，另一份备份到码云，不需要的只配置一个即可，实际上我们是在放博客静态文件的仓库上拉了一个backup分支，如果你不放心，也可新建一个仓库用来存放整个博客工程

实际上，并不是整个工程都需要备份的，只需要备份关键几个文件夹即可，其余到时再次生成即可

1.生成.gitignore文件

1
touch .gitignore

2.输入要忽略的文件及文件夹

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
.log
node_modules/
public/
.deploy/

3.最后用以下命令备份博客：

1
hexo backup

或者简写：

1
hexo b

4.2.恢复

已经备份好的hexo，到新发电脑只需要使用以下步骤即可恢复，无需从头开始配置，这里以我的仓库地址为例，实际情况改成自己的地址即可

1.先安装hexo

npm install -g hexo-cli

2.把存在远端的备份git clone下来

git clone https://gitee.com/lingengxiong/lingengxiong.git

这里备份在backup分支，可以直接下载对应分支

git clone -b backup https://gitee.com/lingengxiong/lingengxiong.git

3.下载所需要的库文件

npm install

4.下载推送工具deployer

npm install hexo-deployer-git

5.接下来就可以用熟悉的命令生成博客站点了

1
2
3
hexo clean
hexo g
hexo s

正常情况下以上步骤完成后即可在浏览器用localhost:4000打开你的博客

继而发布到远端

hexo d

5.添加评论系统gitalk

5.1申请

第三方评论系统很多，如

多说评论、Disqus评论、来必力评论、友言评论、网易云跟帖评论、畅言评论、基于Github Issue的GITALK

但国内的有写时不时就没法用了，所以这里还是使用gitalk

1.申请GitHub Application

  • Application name： 应用名称，随便起
  • Homepage URL： 网站URL，对应自己博客地址
  • Application description ：描述，随意
  • Authorization callback URL：# 网站URL，博客地址就好
  • 点击注册，页面会出现其中Client ID和Client Secret在后面的配置中需要用到

5.2 配置

在主题_config.yml配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comment:
  gitalk:
    enable: true 
    ## If you want to use Gitment comment system please set the value to true.
    owner: lingengxiong 
    ## Your GitHub ID, e.g. username
    repo: blogtalk
    ## The repository to store your comments, make sure you're the repo's owner, e.g. gitalk.github.io
    client_id: 
    ## GitHub client ID, e.g. 75752dafe7907a897619
    client_secret: 
    ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
    admin: lingengxiong
    ## Github repo owner and collaborators, only these guys can initialize github issues.
    language: zh-CN 
    ## Language
    pagerDirection: last 
    # Comment sorting direction, available values are last and first.

注意:

1.repo ,存放评论的仓库，这里我们新建一个名为blogtalk的仓库，这里只需要填入blogtalk即可，而不是完整地址

5.3 踩坑

5.3.1 Error:Not Found

发现是gittalk中的信息填写错了，name随便写；Homepage URL是你的仓库的名字，Authorization callback URL如果你指向了新

的域名就填新的，比如说我指向了域名http://blog.lgx123.cn/；否则也写仓库的名字就可以。

5.3.2未找到相关Issues进行评论

1.理想状态登录一下github账号即可，假如点击后返回首页，那应该是配置有问题，检测gitalk各项参数

2.配置完成未发布到线上，使用localhost:4000访问，也会出现这种情况，点击登录会跳到线上工程地址，此时只需要试试发布到线上

呵呵到天亮

游戏前端一枚。