一、前言

日常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 https://github.com/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 最终到服务器上的文件

2019/3/25添加

感谢这篇文章

12. 字数统计和阅读时长

• Hexo已集成此功能，首先输入以下命令集成：

npm i --save hexo-wordcount

• 然后在yelee/layout/_partial/post/word.ejs下创建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
        |  
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

• 最后在themes/yelee/layout/_partial/article.ejs中找到如下位置并添加内容：

<header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        
        # 从这里开始添加以下内容
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        # 到这里结束
          
        <% } %>
      </header>

• 在根目录下的 -config.yml文件内通过word_count: true来控制，true打开字数统计，false关闭字数统计。

13. PDF 预览

• 首先安装：

$ npm install --save hexo-pdf

• 使用：
  1.链接使用：
  {% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
  2.本地使用：
  {% pdf ./bash_freshman.pdf %}

14. 添加萌物

• 首先还是安装，执行以下命令：

npm install --save hexo-helper-live2d

• 然后在根目录下的 _config.yml中添加

live2d:
  enable: true   # 开启
  scriptFrom: local # 默认
  model:
    use: live2d-widget-model-wanko   # 对应人物模型包名
  display:
    position: left     # 处于屏幕左下方
    width: 60         # 大小
    height: 120
  mobile:
    show: true

其中model.use就是要使用的任务模型了，更多模型可以到这里看看。将上面wanko换成对应的名字即可。
官网

可以看看效果：

live2d.PNG

15. 网站运行时间添加

• 在 themes\yilia\layout\_partial下找到footer.ejs文件，然后像我这样添加：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
      <div class="footer-middle">
      <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("03/22/2019 20:32:21");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已稳定运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
      </div>
    </div>
  </div>
</footer>

15. 相册
...

16. 视频
直接在 .md 文件中添加：

hexo添加视频.PNG

六、总结

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

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