Hexo 搭建与改造

迁移会出大事！！！

概述

为啥我要换Theme？

当我第一次听到Hexo有点懵，后面看了大佬的博客
我才意识到Hexo+Theme的强大
简单介绍下
Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github上。

比起之前那个。。。。。好太多~
之所有我选Hexo主要原因有以下几点：

• 1.我选择hexo的最大理由就是可以插入html，就像头上那个网易云音乐（非主流qq空间必备）
• 2.Markdown的美观性和自由度远远大过之前那个。。。。
• 3.最让我心动的是居然可以自定义页面，在我的about页面里可以看到
• 4.对之前Markdownw文件还是兼容的挺好，入乡随俗，就是部分渲染需要稍作调整
• 5.丰富的插件，尤其是emoji，太不可思议了
• 6.有了搜索功能，再也不用一个一个找或者用网页的搜索功能
• 7.标签和分类都有
• 8.对手机界面的适应也是美美哒~

---

相关链接

Hexo 官网
hexo-theme-indigo

环境部署

我部署是参考Hexo 博客搭建指南

安装Git和NodeJs

Git 官网下载
NodeJs 官网下载

检验NodeJs安装成功（成功会返回版本号）Install Node.js 官方文档

$ node -v

Hexo

安装Hexo

右键 Git Bash HereInstallation Install Hexo 官方文档

$ npm install hexo-cli -g

注意：Mac系统，则需要

$ sudo npm install hexo-cli -g

SetupSetup 官方文档

$ hexo init Brywmzl.github.io # 创建文件夹
$ cd Brywmzl.github.io # 打开文件夹
$ npm install # 安装

生成静态页面

清除 就是删除生成的文件夹 避免出错

$ hexo clean 

生成顾名思义不说了generating 官方文档

$ hexo g # generating

本地运行

server 在本地运行（默认：localhost:4000）server 官方文档

$ hexo s # server

如果要更改端口或遇到 EADDRINUSE 错误，请使用该 -p 选项设置其他端口。Custom IP 官方文档

$ hexo server -p 5000

命令也可以连着

$ hexo clean && hexo g && hexo d

配置Hexo

网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档

• title -> 网站标题
• subtitle -> 网站副标题
• description -> 网站描述
• author -> 您的名字
• language -> 网站使用的语言(写zh-cn也不起作用，官方文档也没详细说明)

indigo Theme

运行后你会发现默认的主题很怂，具体有多怂我这里也没法形容

1.下载主题 hexo-theme-indigo
2.解压到Theme文件夹
3.在_config.yml文件中改theme: indigo（文件夹的名字）
4.安装（执行步骤3在安装里的前两个步骤可以省略）

配置Theme

新建

$ hexo new post # 新建post文章
$ hexo new page pageName # 自定义页面

前者执行命令后会在你的 Hexo 根目录 source/_posts 的文件夹，生成一个md文件。
后者执行命令后会在你的 Hexo 根目录 source/ 目录下生成一个与你刚才输入的 pageName 一样的文件夹，里面只有一个 index.md。
如果文件存在会变成index-1.md

如果发布后发现文章或页面出现乱码
主要原因就是Markdown文件需要以UTF-8编码

颜色配置
颜色参考

Github部署

设置Github项目名称

• 就是项目名为 用户名.Github.io
• 搭建过的都知道，不详细说明

页面

页面渲染

表格

表头1	表头2	表头3	表头4
默认左对齐	左对齐	居中对其	右对齐
默认左对齐	左对齐	居中对其	右对齐
默认左对齐	左对齐	居中对其	右对齐

图片按钮

[![Watch the video](https://raw.github.com/GabLeRoux/WebMole/master/ressources/WebMole_Youtube_Video.png)](http://youtu.be/vt5fpE0bzSY)

被渲染成

[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="http://youtu.be/vt5fpE0bzSY" alt="Watch the video[Watch the video](https://raw.github.com/GabLeRoux/WebMole/master/ressources/WebMole_Youtube_Video.png)" title="">
                </div>
                <div class="image-caption">Watch the video[Watch the video](https://raw.github.com/GabLeRoux/WebMole/master/ressources/WebMole_Youtube_Video.png)</div>
            </figure>

只能选用html替代

<a href="https://youtube.com"><img src="https://placekitten.com/50/50"></a>

参考

图片

{% img cat https://placekitten.com/50/50 50 50 猫 喵喵喵 %}

图片名称

![这边没用](https://placekitten.com/50/50 图片名称)

<img src="https://placekitten.com/50/50" width=10% height=auto > // 百分比
<img src="https://placekitten.com/50/50" width=10% > // 空着为自动，也可以用auto来表示
<img src="https://placekitten.com/50/50" width=50 height=50 > // 像素

=50x50

标准的markdown，在图片后面加上 “=200x300” (200是宽度，300是高度，也可以之定义宽度)，就能实现下面的效果。但是此版本的hexo不行。

图片居中

<div align=center>
<img src="https://placekitten.com/50/50" > 
</div>
-
<div align=center>
![](https://placekitten.com/50/50 =200x300)
</div>

hexo原代码 并成一行效果比较好

<div class="img-lightbox"> // 支持缩放
<div class="overlay"></div> // 背景（可无）
<img src="https://placekitten.com/50/50" alt="" title="" width=8% height=auto > // 常规图片显示
</div>
<div class="image-caption"></div>

---

字体

这里是斜体
这里是粗体
这里是粗体 + 斜体

---

注释符号

{% raw %}
{% endraw %}

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>
<strong><font size=5>我是加粗</font></strong>
<a href="链接"><strong><font color=37668b>标题</font></strong></a>
<div align="right"><strong><font size=5 color=0470a1>标题</font></strong></div>

left：左对齐内容。
right：右对齐内容。
center：居中对齐内容。
justify：对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

原文

自定义页面

自定义页面
自定义页面还存在很多问题（例如图片被拉伸来强制适应card）

支持 html 后就是爽~

直接复制 html代码直接可用
https://fontawesome.com/icons

官方提供的标签官方文档

{% youtube video_id %}
{% vimeo video_id %}

窄屏

<iframe width="666" height="400" src="https://www.youtube.com/embed/MlQoqO7MJ7Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

宽屏

<iframe width="900" height="560" src="https://www.youtube.com/embed/MlQoqO7MJ7Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

关于迁移

• 重装系统后可能导致两个问题
• 一个是github的登录没掉了，还有一个就是git的配置（git 只需改环境变量 这个百度有）
• 而登录的话发现https登录的时候产生问题了，所以改用生产 ssh密钥

hexo重装迁移法

问题1

TypeError [ERR_INVALID_ARG_TYPE]: The “mode” argument must be integer. Recei

解决办法

• 迁移肯定需要安装 git 和 node.js
• 注意：这里 node.js 需要用 11.15.0 版本（据说 12.14.0 版本就行了）

问题2

warning: LF will be replaced by CRLF in

解决办法

执行 git config --global core.autocrlf false 关闭注释

问题3

• indigo 的作者最后一次更新是在 2017年11月20日，作者以后应该是不会在维护了
• indigo 是为 Hexo 3.0 设计的，所以新版的 Hexo 可能会有问题（据说 4.2.1 没问题）#issues

hexo@4.2.1

npm uninstall hexo
npm install hexo@4.2.1 --save

问题4

Github 部署配置

• Hexo 部署到 Github，需要 hexo-deployer-git 插件

_config.yml

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

_config.yml

deploy:
  type: git
  repo: git@github.com:Brywmzl/Brywmzl.github.io.git
  branch: master

生成 ssh 密钥

• ssh-keygen -t rsa -C "用户名"
• 生成过程中需要输入两次密码
• 而在git里输入密码时不显示的
• 然后去github自己头像下面有个setting 里添加
• 然后登录的时候_config.yml需要改成

_config.yml

deploy:
  type: git
  repo: ssh://git@github.com/Brywmzl/Brywmzl.github.io.git
  branch: master

提交时会提醒输入密码~