suyc's blog

哎，什么时候才能把英语学好啊🙇‍~

Build a Hexo Blog

Posted on Edited on In

我这个博客搭建的全部工作。更加详细的内容可以参考categories，后边有些新的文章。

准备工作

Node.js

使用的是Nodejs 10，从官网下载的时候发现Nodejs 10的支持时间还很长，所以就用的这个，第一个接触这个东西，不是很懂。

受制于用啥软件都要用最新版的强迫症思想，去查了查怎么升级Nodejs，然后node版本如何升级中提到了一句话：

爬坑后的结论：windows系统升级node只能到node官网下载安装包来覆盖之前的node。

所以安安静静的用吧，先别想着升级了，node -v查看版本，我的版本是v10.15.3。

npm

下载了nodejs之后就可以用npm管理包了，同样是第一次用。类似Python的pip，安装包的。但是和pip不太一样的是，可以选择把包装在项目文件里还是装在全局，所以在安装时就会有点迷糊。

npm install xxx -g 安装在全局，可能就安装到了node的安装目录，和pip一样，安装好的项目可以全局使用，比如直接在命令行里用。如果不加-g参数就是安装到了当前项目，即在当前项目下新建一个node_modules文件夹，然后把包装进去，可以在项目代码里引入。所以安装的时候一定要注意安装位置。还可以指定-save，意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。关于他们的具体区别可以看这篇文章，就不多说了。
有了这些知识，去看Hexo的官网的相关信息就不会迷糊了。

使用npm install npm -g命令可以方便的升级npm，这样我心里舒服多了。
npm list -g --depth 0查看全局安装包，npm outdated -g --depth=0查看全局能升级的。同理，不加-g就是看当前项目的咯。npm list xxx查看某个包。

其他的用法还有uninstall/ls/update/search，详见runoob

Hexo

安装过程详见官网，有了上边的准备知识就不难了。
安装完成后有如下几个部分：

  • _config.yml 网站配置信息，这里边可以设置的不多，theme的设置项非常多
  • package.json 包信息，使用的包用了-save在这里都会有记载，所以安装包的时候只需要把使用-save，那么把当前项目写作分支同步到git后，更换设备直接安装这里边的项目即可
  • scaffolds 模板文件，其实就是md文件头模板吧~
  • source 新建的文章都在这里，还有其他资源，比如images
  • themes 下载的主题
  • node_modules 安装在当前项目的包都在这里，这个在gitignore里不会同步这个文件，因为换了设备的时候使用npm重新安装即可
  • .gitignore hexo的git信息

从官网的配置页面很容易就能修改_config.yml文件。

命令

hexo new [layout] <title> 新建一个文章~标题文章过长记得加引号，支持中文。

hexo generate/g 生成静态文件，可以直接部署-d/--deploy或者监视-w/--watch，监视的意思就是边改边生成静态文件~
也可以用hexo server/s的形式，边改边看。

hexo deploy/d 部署，-g/--generate同时生成静态文件。g -d和d -g是一样的

hexo clean 清除缓存，清除缓存文件db.json和已生成的静态文件public

hexo list <type> 可以查看网站的各种信息，可用的参数有page, post, route, tag, category

写作

布局

有三种默认布局，post会发一个文章到博客的Archives类别里；page会新建一个标签页，和Archives是一个级别的，需要去主题页面加入生成的页面，才能正常解析，例如可以添加About me页面；draft是草稿。
可以定义很多布局，比如一个categories就有一个布局，这样每次新写文章的时候直接new对应的布局就行了。据我尝试，新建的布局都会被放到_post目录下当作文章看待。

布局中的title对应着正文中文章名称，而md文件的名称则对应着url解析时对应的文章名称。

草稿

这个模式还挺有用的，hexo publish [layout] <title>可以发布写好的草稿，有些文章舍不得删除也可以直接拖进_drafts文件夹，就成了草稿，再拖回_posts就有成了可以发布的文章。
hexo server --drafts可以预览草稿

分类

可以使用两种分类方式，一个是categories，另外一个是tags，使用方式是有两种，区别是categories包含层级关系，tags则全是并列关系~

1
2
3
4
5
tags/categories:
- t1
- t2

tags/categories: [t1, t2]

正文中的标签插件

这一类是hexo解析的特殊格式，可以快速在正文中插入所需的东西。算是给markdown做了个扩展吧，感觉这部分比较好。
问题是很多编辑器没有办法预览这个部分，所以最好以server的形式看，也可以修改vscode中的配置信息使其兼容图片的预览。我更喜欢用原生markdown，除了图片可以用这个外，其他的部分如果使用原生markdown可以直接用插件预览。(vscode预览详见下一篇文章)

引用块

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

别名quote，代替了>的引用形式，增加了一些解释字段，内容更加丰富。

One meets its destiny on the road he takes to avoid it.

Kung Fu Pandadouban

代码块

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

别名code，相比原生代码块，增加了对引用网址等信息的解析。

图片

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

这个class names还是没搞懂啊，应该是对应的css文件，直接修改图片属性。路径是source目录下的图片。
其实我还是更喜欢使用source/images的形式传入图片，然后![](/images/image.jpg)引入图片，问题是预览的时候根路径是当前路径，难以预览。

可以使用post_asset_folder: true设置为一个文章对应一个文件夹，这样会导致文件夹太多了，作为一个强迫症看着心里难受，还是扔一个文件夹好。在这个模式下，官方推荐使用{% asset_img name image %}方式引入图片，不会在预览的时候消失。这个命令会自动在同名文件夹下读取这个文件夹的资源了。我没这么做哦。

1
{% link text url [external] [title] %}

它和默认的Link相比就是链接text之间允许空格

除了上述命令外，还有：加入一个iframe，就是嵌入一个子网页；source中的代码文件；Youtube视频；引用文章或文章中的资源等。

推送到Github

hexo clean && hexo deploy，这个好像不用-g参数也会重新生成。
记得推送到master分支啊，尝试推送到别的分支github.io并不会更新，这个推送了部署分支

Tip

个人感觉可以直接使用下载时的gitignore，然后把项目推送到写作分支，然后再重新部署的只需要git clone下来项目文件，然后用npm install即可，因为在使用hexo建站的时候就是类似的流程，而所需的model在安装时都被记录下来了，详见新更新的文章link。

NexT

本博客基于NexT，且长期更新。

安装方式

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

之前的安装方式，目录下直接执行这个下载最新的，可以直接用git更新。 git pull就可以更新这个主题，但是如果对主题魔改可能会遇到冲突，需要懂一点git知识，才能合并。
参考新更新的文章link(持续更新，NexT 8.x开始可以使用npm直接安装，墙裂推荐)如何把配置提取出来，就不需要处理冲突了。

Theme Setting

NexT的官网的Theme setting页面做得很好，跟配置页面几乎同步在介绍各种设置的作用。下边这些都是在主题的配置页中：

  • 修改favicon可以修改浏览器标题前的那个小图标~
  • 修改avatar可以放上个人的照片
  • 关于许可协议的介绍可以看看这个，添加许可协议
  • mobile_layout_economy: true 可以设置自适应窄屏
  • logo就是在上边添加一个logo，不能修改其他的，可能没什么用
  • 各种小图标来自Font Awesom，可以去这里看，点击想要的图标就会出来图标的简写
  • 有三两种方式控制首页文章的长度，可以混合用，效果更好哦
    • 第一种是可以设置description字段在每篇文章的开头，这个在预览的时候只会出现这句话，同时这句话还会出现在文章标题的下边，以小字的形式出现
    • 第二种是在文章任意部分添加<!-- more -->，就会从这里截断，这是Hexo推荐的，比如有些博主喜欢每个文章的预览都是一个图片，就可以用这个，开头放上图片，然后截断。（我现在也是用的这个。新版本的NexT支持在home页的预览中也保持文章的结构，而不像旧版，预览总是纯文字，代码和公式都表现不出来，现在这样很好看）
    • 第三种是在设置里设置auto_excerpt，控制字数进行截断，Hexo不推荐
  • busuanzi_count.enable显示访客量，这是框架自带的，不用接入什么api
  • 搜索功能棒，很简单就可以添加本地搜索
  • back2top全设为true，把返回顶部的按钮从右下角改到sidebar的底端，同时显示阅读进度~

Math

（NexT 7.2，新版本的有细微的变化）数学公式的支持，按照官网的要求，先卸载旧的marked，然后安装新的渲染引擎，我用的是hexo-renderer-kramed。然后只需设置math.enable=true就行，因为默认已经写了cnd加速。默认是需要在文章的开头设置mathjax: true才会对当前文章进行math渲染，也可以设置为对每一个文章都渲染，显然没啥必要。

标签插件

NexT也提供了一套标签插件，可以看看和Hexo的哪个好用啊~这个图片突然就显示title了，因为引入了Fancybox。

7.4.0更新link：fi成为过去了，取消了一个这么好用的功能。

note的表达更加多样性，还可以在note中使用###写入标题。style: modern使用新式css，icons: true使用提示的图标。
label就是给这段文字加个颜色。class很通用，都是这几个类别。
使用了NexT后，外链Link都会在后边加一个小图标，很nice。
此外还有Mermaid来画图，很方便。这个值得推荐，公式+图，完美。

1
2
3
4
5
6
7
8
9
{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}
[class]   : default | primary | success | info | warning | danger.

{% label [class]@Text %}
[class] : default | primary | success | info | warning | danger.

{% video url %}

External Libraries

全部使用cdn加速
Fancybox: 对图片进行jq优化，支持大图，可以点开图片后左右切换图片 ✔
bookmark: 支持记录当前阅读位置，在浏览器左上角显示一个小书签，下次阅读的时候可以继续看
reading_progress: 在浏览器顶端显示阅读位置
Progress bar: 载入时在顶部显示进度条，或者我是用的这个载入时转圈圈的雷达 ✔
FastClick: 优化点击动作（7.3开始删除了这个）
Jquery Lazyload: 图片懒加载 ✔
Canvas Nest: 背景jq，点点点点点的这个背景 ✔
Canvas Ribbon: 炫酷的条带背景，每次点击鼠标就会换

Related Posts