使用hexo搭建基于gitee pages的个人博客(jsimple主题)

文章目录

准备工作
1. 安装nodejs
2. 安装hexo
本地博客部署
本地配置博客
完善页面
部署到GitHub
1. 申请GitHub Pages
2. 部署到GitHub Pages

前言系统环境为Ubuntu18.04

准备工作

安装nodejs

从node官网下载二进制包(最后下载低一点的版本，这样之后配置主题时成功率更高)并命名为nodejs，再进行如下操作：

1 2	$ sudo mv nodejs /opt/ $ sudo cp /opt/nodejs/bin/node /usr/local/bin/ && chmod +x /usr/local/bin/node

在/opt/nodejs/bin目录下还有npm、npx两个sh脚本，试过符号链接到/usr/local/bin/目录下但是运行不了，那就只能在运行它们时使用绝对路径精确指定了:(，将npm换淘宝源以便更快下载：

1	$ /opt/nodejs/bin/npm config set registry https://registry.npm.taobao.org

安装hexo

使用npm安装hexo：

1 2	# 这种下载方式不会出错，遇到错误的都懂 $ sudo /opt/nodejs/bin/npm install --unsafe-perm --verbose -g hexo

本地博客部署

新建一个文件夹用来存放博客数据：

1	$ mkdir hexo

在新建的博客文件夹hexo的父目录初始化hexo：

1	$ hexo init hexo

输出警告“Failed to install dependencies”，继续执行下面命令即可；

1 2	$ cd hexo $ /opt/nodejs/bin/npm install

使用hexo编译静态页面：

1 2	$ hexo generate $ hexo server

然后在浏览器中进入http://localhost:4000，就可以看到编译好的静态页面。

本地配置博客

下载一个自己觉得好看的主题，比如jsimple；

1	$ git clone https://github.com/tangkunyin/hexo-theme-jsimple themes/jsimple

然后将hexo/_config.yml文件中的theme: landscape更改为theme: jsimple
手动安装主题所需依赖hexo-generator-search：

1	/opt/nodejs/bin/npm install hexo-generator-search --save

还没到打开网页的时候，还要进行一些文件的配置：

scaffolds/post.md，用如下内容替换：

title: {{ title }}
date: {{ date }}
author: 托码思
avatar: /images/avatar.png
authorLink: https://www.tangkunyin.com
authorAbout: https://about.tangkunyin.com
authorDesc: 一个写代码的「伪文人」
category:
tags:
comments: true

注author、authorLink、authorAbout、authorDesc可以换成自己想写的内容，avatar的/images/favicon.png可以换成自己想换的图片；

scaffolds/page.md，用如下内容替换：

title: {{ title }}
author: 托码思
avatar: /images/avatar.png
authorLink: https://www.tangkunyin.com
authorAbout: https://about.tangkunyin.com
authorDesc: 一个写代码的「伪文人」
layout: {{ title }}

_config.yml对应内容(原来有的如果不一样改成与下面一样，没有的添加进去)配置得与如下内容一样：

# 语言配置
language:
    - zh-cn

# URL （注意 permalink 格式。其中timestamp是改了源码加上的，具体参见patch目录文件）
url: https://shuoit.net
root: /
permalink: :category/:entitle-:timestamp.html
permalink_defaults:
  lang: en

# 搜索配置
search:
  path: search.json
  field: all
  content: true
  
# 分类和标签别名
default_category: 技术
category_map:
   技术: tech
   人文: humanity
tag_map:
  hexo: hexo
  生活: life

# 便于动态配置导航，最新版把左导航写成配置方式了。注意uri前边的"-"，这里是object类型，内层包了数组
leftPagesMenu:
- uri: pageName    // 这个是创建layout为page类型的页面名称，简而言之，就是独立页面名称
  title: navName	  // 故名意思，导航名称，这在大屏幕时体现
  faName: fa-wifi  // FontAwesome样式名称，最新主题使用了4.7.0，请参考http://fontawesome.io/icons/

注其中主题配置文件里的menu项需要和category_map键值对一致。二者顺序可以不同，但是主题中的顺序决定网站导航栏菜单的顺序。

然后重新编译静态页面(由于本文接下来会多次进行下述操作，因此提到”重新编译静态页面”就是进行下面操作)：

1 2	$ hexo clean && hexo generate $ hexo server

然后在浏览器进入http://localhost:4000，可以看到主题已经应用；在终端按Crtl-C退出继续配置；

完善页面

数学公式

卸载原Markdown渲染器，安装hexo-renderer-kramed --save这款Markdown渲染器：

1 2	$ /opt/nodejs/bin/npm uninstall hexo-renderer-marked --save $ /opt/nodejs/bin/npm install hexo-renderer-kramed --save

安装了新的Markdown渲染器并没有完全解决公式渲染的问题！接下来修改node_modules/kramed/lib/rules/inline.js的内容—第11行与第20行，分别改为：

# 第11行，原为escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,改为如下：
escape: /^\\([`*\[\]()#$+\-.!_>])/,
# 第20行，原为em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,改为如下：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

将主题配置文件_config.yml中的mathjax的enable设置为true，对于需要公式渲染的博客，在开头添加mathjax: true，重新编辑静态页面，可以看到该博客内的公式可以被无误渲染！

小插曲

正当我兴致冲冲重新编辑静态页面，去看看配置好的另一篇带有数学公式的博客时，神奇的事情发生了，博客页面出现的竟然是hello world！！！整个人发出无数wc，平静下来后在这篇博客的地址栏发现了端倪，地址是这样的：

1	http://localhost:4000/tech/undefined-undefined.html

刚看到这个我也不明白是哪里出了问题，不断的研读两篇配置文件，终于找到了一点突破，我们还记得在前面，根据主题作者修改配置文件时有一个permalink: :category/:entitle-:timestamp.html，首先是我感觉这有点像地址的构造方式(原谅我还没学过前端，一点小聪明还望大佬勿喷)，category我知道是什么，它就在文章开头设置的，那么基本上就清楚了，地址是根据category、entitle与timestamp三者组合而成的，而我在博客开头压根没有设置什么timestamp，所以地址生成失败，统一生成了undefined-undefined，其实地址这么复杂我也用不到，就自己改成如下：

1 2	permalink: :category/:title.html permalink_defaults:

重新编辑静态页面，终于没问题了！

地图(sitemap)

为保证博客可被baidu、Google检索，需安装hexo-generator-sitemap插件：

1	$ /opt/nodejs/bin/npm install hexo-generator-sitemap --save

嵌入图片

post_asset_folder设置为true，对于需要引用图片的博客，首先在与博客的同目录下新建一个与博客名相同的文件夹，想要引用的图片放入该文件夹中，以{% asset_img 1.png pic1 %}命令就可以嵌入图片！虽然在Typora中不能显示，但是编辑到博客中可以正常显示。

其他

还有一些site_name，头像，cover_title，cover_description等等自己改一下就行了。

部署到GitHub

在本地将博客配置得足够满意之后，还要将博客部署到GitHub上面，这样其他人也可以在互联网访问；

申请GitHub Pages

这个主题必须要求博客是根目录部署，就是创建的项目名称与个人空间地址一致，重要的事情说三遍！！！网上大部分教程说的项目名称与用户名一致是因为他们申请GitHub账号后没有更改用户名，从而个人空间地址与用户名一致，因此他们的做法可以正确部署到根目录，但是如果你更改过用户名导致个人空间地址与用户名一致的话，那么这时你创建的项目名称应该与个人空间地址一致，否则就是错误的根目录部署！

个人空间地址在：设置—>个人资料—>个人空间地址进行查看。

项目创建好之后，新建一个blog分支；然后开启GitHub Page服务，服务部署到gh-pages分支上，勾选强制使用HTTPS；然后就可以生成Page了，这时我们可以看到什么叫根目录部署了，以我的GitHub Pages服务的地址为例：https://KangMing-ux.github.io；

部署到GitHub Pages

安装hexo-deployer-git组件：

1	/opt/nodejs/bin/npm install hexo-deployer-git --save

我这里假定你电脑上面已经安装git，并且公钥已经添加到了Gitee；修改站点配置文件_config.yml的deploy：

deploy:
  type: git
  repo: ssh地址
  branch: blog

使用命令hexo d就可以将本地的博客数据部署到Gitee上面，可以看到blog分支下已经有了博客数据，但是，但是你如果这个时候打开GitHub Pages服务的地址它还是404，或者和你本地的博客显示不一致，这时因为GitHub Pages还没有更新，你只能手动更新：

点击上图的更新，等重新部署完成，再次打开GitHub Pages服务地址，可以看到博客的效果终于和本地的博客效果一致了！

注意：

比如我的search功能好像还有些问题，可以再hexo d一次然后再更新一次GitHub Pages，如果还不行可以稍等一会儿再看，毕竟没有氪金，更新起来不会很快，我等第二天早上再去博客时search功能就正常了；
每次刷新浏览器时不要用Ctrl-R，一定要用Shift-F5强制刷新；

参考链接

coming

天行健君子以自强不息