搭建hexo博客与yilia主题优化

一、目的

作为一个学程序的，有个个人博客，平时写写自己的学习笔记，记录一下自己的生活，写一些自己在学习过程中遇到的一些坑，还有记录一下自己的项目作品，我觉得这是一个很有趣的事，另外，个人博客在自己找工作的过程中是一个很好的加分项。

我其实也是一个小白，什么都不会，一些网页的知识都不知道，而我跟随大佬一步步搭建出了我的个人博客，故此记录一下整个过程，写一些我遇到的坑。

大佬视频：手把手教你从0开始搭建自己的个人博客

二、开始准备

1、Git

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目，之后我们会将博客部署到Github pages 中，所以一个Github的账号是必要的，还有自己电脑必须装有Git才能将博客部署上去。

Git下载地址

Git 的安装网上有很多教程，这里就不演示了。

Windows系统Git安装教程（详解Git安装过程）

安装成功后需要登录用户名和密码

git config --global user.email "you@example.com"
git config --global user.name "Your Name"git 

然后使用

git config user.name
git config user.email

查看自己的Git账号

2、Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。我们需要Node.js来支持，生成 Hexo 。

Node.js 官网下载

Node.js 中文网

Node.js新版本安装很简单，一路下一步就好，可能要修改的就只有安装目录等，完了会提示你安装一下依赖项，确定就好，我因为安装的时候着急，依赖项安装了一半，没安装成功，最后找到开始菜单下的Install Additioal Tools to Node.js 才安装好的，所以安装的时候一定别着急。

三、部署环境

准备工作做好了之后建一个你之后要存博客的文件夹 Blog ，然后在这个文件夹中鼠标右键点击打开Git Bash Here ，用Git Bash 执行之后的命令比较好。之后如果中途出了问题，或者你想重新弄一个博客可以直接将这个文件夹删了重新来一遍

1、安装hexo框架

• 然后使用 node -v 查看安装好的版本

• 使用npm -v查看包管理器的版本

• 因为我们需要利用 npm 包管理器安装 hexo的框架，但npm的源在国外，下载很慢，故我们使用淘宝的源，使用npm install -g cnpm --registry==https://registry.npm.taobao.org

我的是安装过得所以很快，你们的要自己看，错了也没事，重来就行

• 安装好了就用cnpm -v查看版本

• 安装好cnpm后利用cnpm 安装 hexo cnpm install -g hexo-cli

• 安装完可以用hexo -v查看版本

2、解决Git Bash 中文乱码问题

• 打开设置后点击 Text，将 locale 中改为 zh_c ，将 Character set 中改为 GBK

修改后保存，退出 Git Bash ，重新打开就不会乱码了

四、初始化博客

• 使用hexo init初始化 hexo ，注意文件夹必须是空文件夹

• 这里出现了一个错误 ，经过我多次查找问题，在百度上查询，最终找到原因，是因为没有node_modules文件夹，所以我们按照提示运行npm install

直到没有错误出现

• 然后就可以启动博客了，使用hexo s启动博客

• 然后就可以看到博客启动成功，在本地的4000端口启动，我们可以将这个地址添加到浏览器访问，（不能用Ctrl+C，那样会停止运行）

他会默认生成一个博客叫 Hello World，当然你完全可以直接删除 Hello World这篇文章。

五 、写博客

1、生成博客

• 博客已经生成了，现在我们已经可以写博客了，使用hexo n "我的第一篇博客"，他就可以为我们创建一篇名叫“我的第一篇博客”的博客

• 这样就已经建立了一个博客，并且他将文件路径给了我们，我们可以先使用 pwd 命令查看我们当前在哪个目录下

• 使用cd命令切换到我们要编辑的文件夹，即 cd source/_posts

• 然后查看当前文件夹的文件，使用ls 命令，即 ls -l

就可以看到我们新建的博客了，还有hexo默认帮我们建的博客，

2、使用 vim 编辑器编辑博客

• 然后我们就可以写博客了，用 vim 编辑器打开要写的博客

• vim 编辑器刚进来是在命令模式下，我们需要按 a或i 进入编辑模式，输入将要写的内容
  
  注意，着这里我用了 Makedown 的方式写的

• 写完后按 Esc 键退出到命令模式，之后输入按 : 进入底线命令模式，输入wq 按回车进行保存退出

• 然后我们退回到原来的文件夹目录，即刚开始的 Blog 目录，cd ../..

• 然后使用 hexo clean 清除一下，接着用 hexo g 重新生成一下

• 然后就可以重新启动博客了 ，使用hexo s 启动博客

• 打开浏览器，输入http://localhost:4000 查看博客

3、非命令行编辑博客

当然不会用命令行的或命令行用不惯的可以省略部分命令

• hexo n "博客名称" 和cd source/_posts 可以在资源管理器内找到路径，右键点击新建文本文档，将文件后缀名改为 .md ，加上文件名，新的博客就创建成功了

• vim 博客名称 、按a或i进入插入模式、按Esc进入命令模式，按：进入底线命令模式、按wq 保存退出，可使用任何一款带 Makedown 的编辑器，我使用的是 Typora ，很好用，Typora下载地址

• 剩下的 hexo clean、hexo g、hexo s 是必须要记住的

4、vim编辑器中文乱码问题

找到 Git 的安装目录，比如说我的在D:\Program Files\Git 中，在这个文件夹中进入etc目录中，用文本编辑器打开 vimrc 文件，在里面添加

set fencs=utf-8,gbk,utf-16,utf-32,ucs-bom "编码配置
set nu									  "vim行号显示

修改完成后退出 Git Bash ，重新打开之后再使用 vim 编辑器时就不会乱码了

六、把博客部署到远端

现在已经可以写博客了，但是这样只能在本地查看，所以我们需要将博客部署到远端，这里我们使用 GitHub ** ，将我们的博客部署到GitHub**中，实现远程访问

1、创建仓库

• 首先我们需要一个 GitHub 的账号，可以在GitHub中注册
• 然后我们新建一个仓库

• 博客名称必须以你 GitHub 账号的昵称构成，比如说我的 GitHub 账号昵称为thelnktears ，则这个仓库的名称为thelnktears.github.io 描述随便写

我这已经创建过了，所以就出错了，然后就创建

2、安装插件

• 之后回到我们电脑上创建的Blog 文件夹下，安装一个git 的部署插件，使用cnpm install --save hexo-deployer-git 安装

3、设置上传

• 然后修改 Blog 文件夹下的 _config.yml 这个文件，使用vim 编辑器打开 vim _config

• 按a或i 进入插入模式，找到 Deployment 在下面添加如下内容，按esc 退出插入模式，按: 进入底线命令模式，输入wq保存退出
  • type: git
  • repo: 新建仓库的HTTPS的地址
  • branch: master

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/thelnktears/thelnktears.github.io.git
  branch: master

新建仓库的地址可以在建完仓库后跳转的页面中得到，如果退出去了则可以在克隆仓库的地址中找到

4、上传博客

• 退出后使用 hexo d 把博客部署到远端，在浏览器中输入https://thelnktears.github.io/ ，也就是你新建仓库的地址，有时GitHub 网比较慢，所以稍微等待

• 部署成功后

注意，如果你的 GitHub 昵称里有大写，建议你重新修改一下名字，不要有大写，因为大写的话浏览器会改为小写，从而无法访问到正确的地址

七、给个人博客换主题

现在博客的主题是默认带的，不好看，所以我们需要对其进行修改

1、下载主题

这里我们使用 yilia这个主题，写的很好，很多人用

使用git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 克隆下载 yilia 这个主题

2、修改主题

下载完成后需要将主题应用到我们的博客里面，设置主题我们需要修改Blog 目录下的 _config.yml 这个文件

使用命令 vim _config.yml 打开文件

找到 theme 这行，默认为 landscape ，修改为我们想要替换的主题

修改过后

这样我们的主题就换过来了，我们启动一下看看，使用 hexo clean 、hexo g 、hexo s 在本地启动

八、博客主题优化

此时，我们的博客已经换好主题了，但是不是我们想要的样子，所以对这个主题还要进行修改，换成我们想要的样子

1、网站名称

• 打开 Bolg 目录下的 _config.yml 文件，修改名称，即 title后的名称，修改为你想要的名称

2、副标题

即 subtitle 后的名称，可以放些你喜欢的句子

3、作者名称以及语言

author 以及language

修改完成后

4、修改头像

发现头像还没改过来，至于头像，我们需要到下载的主题的目录中修改而在下载时，将yilia 的主题下载到了 themes/yilia 这个目录下，所以我们打开这个目录，找到里面的 _config.yml 的文件，即 themes/yilia/_config.yml ，打开这个文件

找到如下行，添加你的头像，将你的头像图片放到 yilia 目录下的 source 中的 img 文件夹下，即Blog\themes\yilia\source\img ，并且将 _config.yml文件的如下行修改，在 avatar: 后面添加 路径 /img/avatar.jpg

#你的头像url
avatar:

5、修改网站图标

将你的图标放到 yilia 目录下的 source 中的 img 文件夹下，即Blog\themes\yilia\source\img ，并且将 _config.yml文件的如下行修改，在 favicon: 后面添加 路径 /img/avatar.jpg

6、修改连接

yilia 的主题帮我们打开了 Github 、微博、知乎等的链接，我不需要这么多，或者这些我用不到，那就修改掉，我想要的有Github 、QQ、微信，QQ 、微信我使用添加好友的二维码代替了

此时就会被修改为如下情况

目前看似差不多了，但是我们点击所有文章、友链、关于我时发现好像还是不对，那接着修改

7、所有文章

点击所有文章会弹出如下情况，按照提示，进行修改

输入 cnpm i hexo-generator-json-content --save

打开 Blog 文件夹下的 _config.yml 文件，添加如下内容

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

然后所有文章就改过来了，

8、友链

添加友链，帮忙推广一些技术大佬，添加大佬们的网站、博客地址，同时添加友链也能增加自己博客的访问，打开 yilia 文件夹下的 _config.yml 文件，进行修改

9、关于我

添加一些关于自己的话

10、打赏

现在打开博客文章后，翻到后面会有一个打赏的功能，将其运用起来，如同加载头像、QQ、微信等的链接的方式，添加微信或支付宝的收款码

11、目录

现在博客已经可以了，但是我们点击随笔时会出错，经过查询，我知道了，这是一个标签，通过写的文章的标签添加到这个链接里（我的理解，大佬勿喷），而博客的随笔可能不多，相同这个后，我觉得应该为博客添加一个目录，以后文章多了找起来方便，写文章时添加一个名叫目录的标签，以此达到为博客添加目录的目的，简单易行。

之后每次写文章，在 tags 后面都添加一个目录的标签，就实现了目录的功能，注意每个标签后面都有一个空格，这是人家规定的，必须这样写，否则会出错

修改完启动博客，点击目录就会发现可以跳转到类似于目录的页面

---

然后使用 hexo d 把博客部署到远端，在浏览器中输入https://thelnktears.github.io/ ，也就是你新建仓库的地址，有时GitHub 网比较慢，所以稍微等待，然后你就会发现，博客被部署到远端了，之后你就可以将这个网址告诉别人，说这是你的博客网站

---

九、我们的博客

博客搭建好了，我没有添加评论等功能，因为十分麻烦，效果也不明显，就放弃了，现在的功能我已经满意了，剩下的就是多写博客，为博客添加内容。其实除了一些必要的明亮，搭建博客还是很容易的，毕竟别人帮我们写了很多内容，我们只是使用者。我的博客就这样了，我很满意，如果各位有不满意的可以在网上查找相关内容，修改_config.yml 文件，所有设置都是通过这个文件实现。