通过 Hexo + GitHub + yilia 搭建个人博客

2019-07-23 本文已影响0人 BunnRecord

这两天在尝试搭个人博客，最终效果如：BunnRecord，在这里记录下 win10 环境下的搭建过程。

内容主要分为七个部分：

Hexo 简介
安装 GIT 和 Node.js
安装 Hexo
将博客部署到 GitHub 上
发表第一篇文章
切换 yilia 主题
设置个人域名

Hexo 简介

Hexo 是一个基于 Node.js 的快速、简洁且高效的博客框架，可以方便的生成静态网页托管在 GitHub 上。更多内容可以查看 Hexo官网。

安装 GIT 和 Node.js

GIT 是一个分布式版本控制系统，可以从这里了解：GIT 相关，下载安装包进行安装。
安装好后，在命令行输入 git -version 查看版本。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，下载 LTS 版本安装包进行安装。
安装好后，在命令行输入 node -v 和 npm -v 查看是否安装成功。
如果出现（`node` 不是内部或外部命令，也不是可运行的程序或批处理文件），可以这样解决。

安装 Hexo

GIT 和 Node.js 安装成功后，就可以安装 Hexo 了。

新建一个 BLOG 文件夹，这个文件夹就是用来存放你的博客的所有文件，然后在 cmd 控制台打开这个文件夹。
相继输入以下命令：

npm install -g hexo-cli （用于安装 Hexo）
hexo init （用于初始化 Hexo）
npm install（用于安装依赖包）
npm install hexo-deployer-git --save （用于安装 deploy-git 插件）

一系列命令完成后，再在命令行输入 hexo g + hexo s ，就能在浏览器的 localhost:4000 这个网址上看到你的博客了。

会像这个样子
这时候 Hexo 已经安装好了（默认 landscape 主题，可以根据自己的喜好切换，参考后面有切换 yilia 主题介绍），而现在只能在自己本地查看博客，想让别人看到，还需要部署到 GitHub 上。
另外常用的 Hexo 命令：
hexo clean （清除当前项目的静态文件）
hexo g（hexo generate，生成静态文件）
hexo s（hexo server，启动服务器，本地可以测试）
hexo d（hexo deploy，将本地编译好的静态文件发布到github上）
hexo n（hexo new，新建一篇文章）

将博客部署到 GitHub 上

这部分不细说 GitHub 的使用 和 添加 SSH 密钥 了，还不会可以参考从 0 开始学习 GitHub 系列。

到 GitHub 上创建一个名为 xxxx.github.io 的公开个人仓库（ xxxx 为你的 GitHub 用户名），以我的为例：
然后建立 Hexo 和 GitHub 仓库的关联，将博客的内容部署到 GitHub 上。
打开本地 BLOG 文件夹，打开 _config.yml 文件（这个文件与博客的各种配置有关），找到 URL 和 deploy 进行修改，其中 YourgithubName 就是你的 GitHub 用户名。

  url: https://YourgithubName.github.io/
  root: /

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

然后在 cmd 控制台中 BLOG 目录下（以后控制台输入命令行都是在 BLOG 目录下），输入以下命令：
```
hexo clean
hexo g
hexo d
```
完成后就能在 http://yourname.github.io 这个网址下看到你的博客了。

发表第一篇文章

在 cmd 控制台，BLOG 目录下，输入 hexo new articlename 新建文章（articlename可以换），然后在文件 BLOG\source\_posts 里就能见到你的第一篇文章了。
这里注意要使用 markdown 语法和 markdown 编辑器，可以看关于 markdown 了解 markdown 知识。
文章编辑完成后，控制台输入以下命令：

hexo clean
hexo g
hexo d

就能在博客里看到你的第一篇文章了。
PS：这里可以见到 hexo clean -> hexo g -> hexo d 这三条命令是非常常用的将本地内容推上 GitHub 推上网上博客的命令。

切换 yilia 主题

前面提到 hexo 默认的主题是 landscape，那么我们可以自己切换主题，我看了一下各种主题，个人比较喜欢 yilia 这个主题，这里就以 yilia 为例，记录一下怎么切换主题。

在 cmd 控制台 BLOG 目录下，输入 cd themes 读取到主题文件夹，然后输入 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 下载 yilia 主题包。
如图
接着打开本地 BLOG 文件夹，打开 _config.yml 文件，找到 theme: landscape ，修改成 theme: yilia 。
如图
接着 cmd 控制台输入 hexo clean -> hexo g -> hexo d 三条命令。
部署完成后再去到网页上就能看到新主题啦。

这是我的博客