hexo+github博客搭建与备份教程（详细篇）

来自肥宅的小乐趣，带你玩转hexo自建博客，生活还是需要装一下的嘛：）。

官网 : https://hexo.io/zh-cn/

关于hexo，如官网的一句话介绍,

正如上面的介绍，hexo会在本地生成一个静态html页面，为了让别人看到我们的博客，我们就需要将其推到远端--服务器。

那么github就提供给我们一个免费的仓库，对于新人练手是再好不过了。当然，也可以购买属于自己的域名，让更多的朋友看到你的博客。话不多说，让我们开始吧！（作者使用的是mac os系统，其他系统也类似）

mac用户推荐使用 Homebrew

笔者安装的版本为v12.6.0

安装hexo需要依赖node.js的 npm 的包管理器，由于国内镜像源速度很慢，为了避免出错，所以在使用之前一般是利用 npm 来安装 cnpm , cnpm 为淘宝的镜像源。

至此，我们hexo的博客搭建初步完成了。 INFO Start blogging with Hexo!

若不存在，请进行下一步（存在，请跳过创建步骤）

输入后按回车，然后会提示输入密码，可以按回车设为空。之后SSH就生成了，下图所示：

4. 检验SSH Key

执行yes，若出现下例，则表示配置成功。

5. 设置用户信息

6. 本地博客部署至Github

终端 myblog 目录下，使用 vim 打开 _config.yml ,

滑动至最底部，如图，编辑 deploy 节点,

type: git

repo: git@github.com:codehory/codehory.github.io.git

branch: master

注：1.冒号后有空格 2. repo 一行为新建仓库的SSH地址，打开新建仓库就能看见

输入完毕，按 esc , :wq 保存退出。

7. 安装部署插件

在 myblog 目录下，

8. Deploy to Github

至此，恭喜，完成全部部署，在网址栏输入： yourusername.github.io 就能看到你的初步博客啦！（ yourusername 为你github用户名）

在 myblog 目录下，新建一篇博客，

在本地博客的 source->_posts 路径下看到新建的文章，是md格式的，使用markdown文本编辑器进行编辑即可。

编辑完成之后，执行以下命令，即可更新博文，

为了继续满足我们深入骨髓的DIY之心，换一个自己喜欢的主题也是必不可少的环节。Github上有很多眼花缭乱的主题，去选一个自己喜欢的吧！ https://hexo.io/themes/

本文例程使用的是： https://github.com/litten/hexo-theme-yilia

在 myblog 目录下，用 vim 打开 _config.yml ,

可以修改 title,subtitle,description,keywords,author 等内容，这些属性依赖于你选择的主题。

输入完毕，按 esc , :wq 保存退出。

menu 用来设置你博客的分类，标签等。

subnav 为你的社交媒体的链接，如github，微博等。

用github当图床

头像 更换:在 myblog 目录下的 source 文件下创建 img 文件，将图片保存在其中。我们通过部署生成，把图片放到 github 上，通过链接找到。

例如：本文将一张 timg.jpeg 的图片存放到 myblog/source/img/ 下，那么我们可以通过之前生成的链接，如 https://codehory.github.io/img/timg.jpeg ,进行图片的插入。

还有许多诸如此类的设置，各自进去修改吧，同样的 *** 作，保存退出。

最后来看看我们的博客吧，还不错吧：

由于博客是在本地生成的，如果更换电脑，那我们是不是就不能用这个博客了？方法总比问题多，我们可以利用 github 来备份博客的文件和数据。

第一次备份完毕，以后的备份，只需进行如下 *** 作：

这样备份完毕后，我们在另一台电脑上，只需 git clone 一下就行了。

说长不长，说短不短，一通 *** 作下来，不知你是否成功了呢？作者只是抛砖引玉，带你入门，之后的进阶过程，还望各位继续探索，玩转hexo。欢迎在评论区展示下你们的成果咯，让作者也学习学习，哈哈。同样，如若有任何纰漏或者相关问题，请在评论区留言吧！感谢各位观看！See you～

在 我的自建博客之路系列 的前面几篇文章中，我们已经一起在本地和github、coding搭建起了自己的hexo博客站点，更换了Next主题，并且绑定了自己选择的个人独立域名，但是还未发表过文章，站点的配置还是原来的默认值。在本节，我们来进行个性化的设置，按照自身需要情况将站点打造成自己的。

这里首先要知道在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的： D:\hexo_config.yml ），主要包含 Hexo 本身整站的配置；另一份位于主题目录（ D:\hexo\themes\next_config.yml ）下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置 文件， 后者称为 主题配置 文件。下面我们先来看看 站点配置 文件的配置修改。

Hexo 使用 Moment.js 来解析和显示时间。

在站点的根目录下执行以下命令：

更多插件请移步 Hexo官方插件 页了解

现在执行

打开 localhost:4000 查看效果了。

访问HEXO官方文档

Hexo是一个静态的博客网站生成器，生成一个博客只需要分分钟的时间就能搞定。

Hexo的博文是支持Markdown格式的，发表一篇文章只需要简简单单的几个命令。

hexo new '文章' 就会生成一个名为'文章'的md文件。

在图中位置添加描述，分类以及标签，有利于搜索分类。

众所周知，在md文件中插入图片的语法为 ![]() 。

其中 方括号 是图片描述， 圆括号 是图片路径。

一般来说有三种图片路径，分别是 相对路径，绝对路径和网络路径 。

所谓的网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中就完事了。

这种方式十分的方便，但是也存在一定的问题：

这种方式算是有利有弊。

绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。

由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。

在hexo中使用 文章资源文件夹 需要在 config.yaml 文件中更改一下配置：

当该配置被应用后，使用 hexo new 命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。

插件 hexo-renderer-marked 解决了这个问题。可以只用 npm install hexo-renderer-marked 命令直接安装，之后在 config.yaml 中更改配置如下：

之后就可以在使用 [图片上传失败...(image-5f3c69-1603081095188)] 的方式愉快的插入图片了。

我们做了这么多都是为了方便，那么为什么不再方便一点呢。

上述是从文章资源文件夹中引用图片，前提是 先将图片放入到文章资源文件夹 ，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。

Typora 是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好，在 文件->偏好设置 或者直接 <C-,>进入设置。

使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。

如复制网络路径的图片 https://...../image.jpg 粘贴到Typora中叫 文章名 的文章后，图片会自动变为 [图片上传失败...(image-bd41f4-1603081095188)] 。

但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的 文件名/ 。不慌，也很简单。

在Typora编辑器中，使用 <C-f>快捷键，将所有的 文章名/ 替换为空即可删除。

然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。

---