一、前言

日常Google中，无意中看到了一个免费搭建个人博客网站的标签，好奇就点了进去看了看，感觉还挺有意思的，就想着自己也搭一个玩玩，当时看的那篇文章说是5分钟即可以搭建完成，确实简单的搭建一下很快，但我配置完再熟习后已经花了大半天时间了?? （期间被学校的网给害惨了，半天都加载不动，还以为自己哪配错了，白费了不少时间，后来换了自己的热点，嘿嘿，好了??）废话不多说，先给大家看看我搭建完成的博客首页

博客首页

怎样样？你能否经常看到这样相似的博客？
别焦急，接下来我将带领你一步步搭建一个属于你自己的博客网站。

二、开始搭建

1. 创立Github 域名和空间

1.1 创立Github账号

(我想大家身为 程序员 应该都有一个Github账号吧？??)

打开Github官网，点击右上角Sign Up按钮，进入注册页面，按照提醒一步一步创立完成后就OK了。

注册界面

1.2 创立Github仓库

点击按钮 New 打开创立仓库页面
注意仓库名为username.github.io ，username即为Owner的名字，必需一致，后缀为.github.io，也是必需的。如我这里Owner为kylechandev，仓库名就为kylechandev.github.io。

创立仓库

后缀.github.io的作用是Github识别到.github.io的后缀就会自动为你开启GitHub Pages，作为你的网站的仓库。

github_pages.PNG

2. 安装必要软件

2.1 安装Node.js

2.2 安装Git

打开Node.js和Git的官网，下载最新版本，一路next安装完成（注意假如出现add to path请勾选，环境变量是必需的。）
安装完成后，打开cmd，输入以下命令检测安装能否成功：

check_success.PNG

假如出现 ** 不是内部命令的，请查看能否增加对应的环境变量。

2.3 安装并配置Hexo

打开cmd，输入

npm install -g hexo-cli

这样他就会自动帮我们安装Hexo，等待他完成就可(注意保持网络的通畅，不然可能出现和我一样的悲催局面??，注意在这之前肯定要确保Node.js已安装成功)。Hexo就是我们这次的核心所在，博客就是基于他完成的。

安装成功后，随意在一个地方新建一个文件夹，用来存放我们博客需要的东西。例如我这里就在D盘下的某个文件夹下创立了一个名为 Hexo 的文件夹。

create_local_repo.PNG

接下来执行下面的命令来初始化刚刚创立的文件夹(注意这里的Hexo是我的文件夹名，实际按照你自己新建的文件夹名来)：

hexo init Hexo

之后在cmd下进入刚刚创立的文件夹Hexo，直接将光标定位到breadcrumbs后输入cmd后即可以直接定位到该文件夹位置。

create_local_repo_remind.PNG

输入下面的命令新建建站所需要的文件（这里这里也肯定要确保网络的通畅，否则可能会导致失败）：

npm install

等待命令执行完成后，可以发现在新建的文件夹Hexo下多了很多文件(注意这里我是已经弄好后的了，所以我这里的文件会比你现在出现的多少量，别担心，接着往下走)：

npm_install.PNG

3. 开启服务

到这里所有的配置都差不多结束了，最后就是开启服务了。和之前一样，在cmd下进入 Hexo 文件夹，输入以下命令部署并启动服务：

hexo g
hexo s

执行成功后，可以看到如下提醒：

success_remind.png

而后打开浏览器，在地址栏输入http://localhost:4000/后会出现如下页面：

success_web.png

这就是Hexo博客网站的原生主题界面了。

到这里，整个博客的搭建过程就完成了。

三、博客网站配置

1. 安装主题

你也看到了，原生的主题并不是那么的夺人眼球，所以我们就需要安装一个主题插件，来打造一个漂亮的主页！

Hexo的主题有很多，你可以从这个网站找到很多好看的主题，也可以在这个网站找到很多Hexo的插件，可以根据自己的喜好来筛选，每一个主题也都有搭建教程，你可以试着看一看。

这里我安装的一款主题是Yilia，效果还是不错的，个人比较喜欢，主打简约。
所以我就说一下安装这款主题以及这个主题的少量配置吧！

1.1 安装 Yilia 主题

首先通过git命令将 Yizlia 克隆下来（右键新建的文件夹Hexo，选择Git Bash Here，打开Git命令行），使用git命令：

git clone litten/hexo-theme-yilia.git themes/yilia

等待克隆完毕，找到themes文件夹：

theme.PNG

这时我们可以发现在themes文件夹下多了一个 yilia文件，这就是我们刚刚克隆下来的主题了。

theme_yilia.PNG

返回上一级目录，找到_config.yml文件，打开并修改里面的少量配置以使我们刚刚克隆下来的主题生效。

all_config.PNG

打开_config.yml文件后，翻到最底下，找到如下图所示位置：

theme_config.PNG

修改theme: landscape为yilia，注意theme和yilia之间要有空格，否则无效的。
其中 repo 的值是我们在最开始GitHub中创立的仓库的SSH。打开仓库，在右上角找到clone or download,先点击Use SSH切换到SSH下：

github_change_ssh.PNG

而后再点击右边的剪贴本将内容复制下来，粘贴到上面的repo：后即可以了。

github_ssh.PNG

1.2 发布

一切就绪，右键Hexo文件夹，选择git bash here，执行以下命令：

npm install hexo-deployer-git –save

之后继续执行以下命令完成最后的发布：

hexo g
hexo d

或者一步到位：

hexo g -d

假如你是第一次Git可能会出现一个这个问题：

problem.PNG

这是由于你的SSH key没有配置好或者是根本没有SSH key的起因，可以看看这篇文章来处理这个问题。不要慌，小事情??

完成之后你的个人博客就竣工了??，博客地址可以在Github中查看，点击仓库上方的Setting按钮，进入后往下翻翻即可以看到这个界面：

github_pages.PNG

其中的https://kylechandev.github.io/就是你的个人博客地址啦！??

四、发布文章

1. 发布第一篇文章到个人博客

1.1 创立

如图所示操作：

caozuo.jpg

在打开的git命令行中使用以下命令进行创立：

hexo new [layout] <title>

例如：这样就创立了一个名为Test.md的文件

ex.PNG

参数说明：

使用 publish 命令将草稿移动到 source/_posts 文件夹下：

hexo publish [layout] <title>

1.2 写作

打开文件夹 source -> _posts，可以看到你刚刚创立的那个Test.md文件，打开他，你会看到：

re.PNG

这就是你要书写文章的地方了，语法为Markdown语法，有关于Markdown语法，不会的请自行百度。
这里我对上面三个参数做一下说明，其中title和date顾名思义，文章标题和日期，而tag对应的就是文章的标签，他需要注意一点，在需要标识多个标签时，使用如下语法：

tags: [tag1, tag2, tag3]

1.3 发布文章

文章写完后对整个目录 Hexo右键执行git bash，
执行 hexo g -d 命令部署并发布文章到服务器上，期间可能会要求输入ssh密码。
届时可查看到网站的文章升级。

五、Yilia配置

最后我在官网的基础之上对 Yilia 主题的配置做少量额外的讲解，以便各位同学迅速完善。

1. 个人信息
打开根目录下的_config.yml文件（注意是根目录下的，而不是yilia下的）：找到以下内容：

confi_local.PNG

title：表示网站title，就是你博客网站首页在浏览器tab里显示的内容
subtitle：对应你个人信息的形容
author：表示你的名字
效果如下（头像稍后解释）：

confi_web.PNG

2. 配置图片资源
图片资源增加位置：themes\yilia\source\img
图片增加完后即可以直接以 \img\图片名 的形式使用，在themes\yilia\_config.yml文件中配置使用，头像的url就是在这里面配置的，具体作者在_config.yml文件中都有详细的注释，并且篇幅有限，我就不贴图了。

3. 处理文章设置折叠无效

• 问题 打开我们的博客主页，发现所有文章都是以全文开展的，这很不利于我们查看，所以我们就需要设置文章折叠起来，而作者给的设置 excerpt_link: more 并没有效果，
• 处理 在 MD 格式的文章正文中插入 < !--more-->(注意把我 ! 号前的一个空格去掉，这里他属于注释我不空一格的话他不显示的)，这样就只会显示它之前的，在此之后的所有内容都不会显示，只有点击文章标题或者是查看全文才可以看到剩下的内容。而后我们把themes\yilia\_config.yml文件中的excerpt_link: more 给删掉就OK啦。

4. yilia主题表格的坑
肯定要在表格的上下都插入一个空行！！！否则你的表格将不会正常显示出来！！！

5. 添加归档菜单(可选)
修改themes/yilia/_config.yml
将头部修改如下就可：

  主页: /  归档: /archives/index.html

6. 增加版权信息
效果如下：

copyright.PNG

点击查看教程

7. 修改代码块样式
为什么要修改？原生的显得有些太刺眼啦！?? 我们修改成下颜色，这样会显得舒服少量。

• 首先找到文件theme\yilia\source\main.0cf68a.css，
• 修改代码背景色，搜索 .article-entry .highlight,，修改background后面的颜色，推荐色值：#282c34
• 修改代码字体颜色，搜索 .article-entry .highlight .line，修改color，推荐色值：#b6b6b6

8. 插入网易云音乐

• 登入网易云音乐网页版，选择一首歌，点击歌曲介绍，点击生成外链播放器。
• 复制外链代码，插入你需要编辑的 MD 格式文章里面，就可。

9. 增加访客量统计
集成不蒜子
在 themes\yilia\layout\_partial\after-footer.ejs 最后增加：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

• 增加统计网站访问量
  修改 themes\yilia\layout_partial\footer.ejs，包括访客数和站点访问总量

# PV方式，单个客户连续点击 n 篇，记录 n 次记录值<span id="busuanzi_container_site_pv">    本站总访问量<span id="busuanzi_value_site_pv"></span>次</span># UV方式，单个客户连续点击 n 篇，记录 1 次记录值<span id="busuanzi_container_site_uv">  本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

• 单篇文章点击量
  themes\yilia\layout\_partial\article.ejs 中 在<%- partial('post/title', {class_name: 'article-title'}) %> 插入如下代码：

<!--显示阅读次数--><% if (!index && post.comments){ %>  <br/>  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">  <span class="icon-sort"></span>  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">            阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;  </span>  </a>  <% } %>

10. 增加评论系统
点击参考gitalk评论系统

11. 文件说明
.deploy_git 本地库文件
public 最终到服务器上的文件

六、总结

这次的搭建免费个人博客教程到这里就结束了，假如有问题或者是不懂的欢迎在下方评论。??

【参考】
Hexo yilia 主题一揽子使用方案
Github+Hexo搭建个人博客
用Hexo写出第一篇博客