hexo使用记录

NOTE: 本文中所有提到_config.yml文件的地方

site config：表示运行hexo init的那个文件夹的目录下的_config.yml文件
theme config：表示theme下对应的文件夹中的_config.yml

1. 安装nodejs

2. 安装hexo

先创建一个文件夹（用来存放所有blog），然后cd到该文件夹下
安装hexo: ~~npm i -g hexo~~

Updated in Jan 19th, 2019: 旧的hexo安装方法不再支持

$ npm i -g hexo
npm WARN deprecated titlecase@1.1.2: no longer maintained
# -------------------------
# Updated in Jan 19th, 2019
# New command to install hexo
$ npm install hexo-cli -g

初始化hexo: hexo init
optional: 有时候hexo init会在最后失败，按照提示运行npm install && npm audit fix就行

3. 创建github.io

在自己的github账号下创建一个repo，名字叫yourname.github.io，其中yourname=github用户名
如果没有配置过这个github账号的话，要先在本地配置github账号信息
1
2
3
git config --global user.name "yourname"
git config --global user.email "your_email@youremail.com"
ssh-keygen -t rsa -C “your_email@youremail.com”
然后会要求输入用户名密码，成功的话会在~/下生成.ssh文件夹，cd进去，cat id_rsa.pub，复制里面的key

打开github账号account settings下的ssh keys，点new SSH key，title随便填，Key把刚才的内容黏贴进去

Updated in April 22nd, 2020:
现在github修改了建站的流程，建完repo以后直接deploy上去会发现一直报404，必须要去repo的setting里面把站点的默认分支和默认主题配置好，可以说是mdzz了

4. 修改_config.yml配置

4.1. 通过hexo deploy部署

在site config中修改deploy对应的那几行：

deploy:
    type: git
    repo: https://github.com/YourgithubName/YourgithubName.github.io.git
    branch: master

需要部署时hexo d就推上去了，第一次推需要安装hexo-deploy-git，命令

1	$ npm install hexo-deployer-git --save

4.2. post加密

Updated in April 22nd, 2020:
不建议搞，加密的那个nodejs组件会和其他的冲突

4.3. 修改hexo主题

Updated in April 22nd, 2020:
折腾来折腾去，发现最省心的还是hexo-next，其他主题基本上在一些细节上都会有各种不尽人意之处，建议不要把太多精力耗费在页面美化上，对于个人博客来说，内容才是最重要的

site config中把theme改成next，theme config中提供了四种主题，个人最喜欢Gemini

4.4. TEX语法支持

这一步最恶心，基本照着下面这个链接配就行，完了以后在theme config里面把mathjax的enable开关填true，最下面的cdn，到网上找到最新版本的mathjax的cdn链接，填进去

实际上这个链接才是最新版本的mathjax，不确定是否work：http://cdn.mathjax.org/mathjax/latest/MathJax.js

4.5. 添加本地图片

1	$ npm install hexo-asset-image --save

装完这个包以后会发现以后每次hexo new post "xxx"的时候，都会同时在source/_post/路径下生成一个同名的文件夹，可以把图片扔进去，文章里引用图片大概两种方式：

markdown方式：![](./image-name.prefix)
html方式：<img src="./image-name.prefix" ...>

后者可以比前者起到更好的控制图片格式的效果，注意无论哪种方式，引用的时候都无需在写文件夹的名字

此外，next主题下，无论我如何在markdown里面写html，都无法做到让图片并排显示，怀疑是css里面直接覆盖了我写的html，I hereby advice against all readers to try similar things. It’s a waste of time.

4.6. 修改NexT主题配置

调整默认字体、字体大小与背景颜色等设定，定位到文件 ./newblog/themes/next/source/css/_variables/base.styl
修改代码块主题，找到./themes/next/_config.yml中的Code Highlight Theme，有下面四种可选项，我个人比较喜欢night bright，下面有个mac的选项打开，复制按钮和复制提示都打开，舒服

Updated in April 22nd, 2020:
新版的next不知为何把selection选项给去掉了，只好直接去改他的css文件，grep一下就可以找到css文件的目录位置在：

/******
CSS Directory: ./themes/next/source/css/_common/scaffolding/highlight/highlight.styl
 ******/
.highlight {
  @extend $code-block;

  *::selection {
    //background: $highlight-selection;
    background: $orange;
  }
  // ...
}

这里我把selection改成了orange，因为next主题下默认的selection颜色是黑色，night bright本来的背景色就接近黑色了，会导致代码框里selection看不清

另外next默认的blockquote也很丑，grep一下很容易找到css文件的位置，改成我比较喜欢的配色：

/******
CSS Directory: ./themes/next/source/css/_common/scaffolding/base.styl
 ******/
blockquote {
  border-left: 6px solid #78C0A8;
  color: #555555;
  background: #EDEDED;
  margin: 0;
  padding: 0 15px;

  cite::before {
    content: '-';
    padding: 0 5px;
  }
}

剩下的基本都比较简单，在theme config里可以直接改，比如我把超链接的hovered改成了orange

4.7. 加宠物狗

WARNING：使用live2d插件会显著提高内存消耗，在apple的设备上，来回切换网页窗口时safari会为了节省内存重新加载网页，强烈不建议打开live2d的mobile选项

1	$ npm install --save hexo-helper-live2d

接下来的步骤参考live2dw的官网文档或者第三方博客即可

Hello world HEXO

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

1. Create a new post

1	$ hexo new "My New Post"

More info: Writing

2. Run server

1	$ hexo server

More info: Server

3. Generate static files

1	$ hexo generate

More info: Generating

4. Deploy to remote sites

1	$ hexo deploy

More info: Deployment