全网最好基于hexo搭建个人博客(附挂载到Github+美化)

个人博客的搭建：

本次是基于hexo框架来搭建个人博客，可以挂载到Github上，优化会在后期进行。

Step1：

1. 首先要在机器上安装node.js，到node.js官网下载安装就行，安装步骤=下一步

   检查安装是否成功：node -v

2. 安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

​ 安装完成检查：cnpm -v

3. 使用cnpm全局安装hexo：

npm install -g hexo-cli

卸载hexo： npm uninstall hexo-cli -g

​ 安装完检查：hexo -v

4. mkdir命令创建一个空文件夹(后序博客内容全部在这里面)

5. 使用管理员命令初下载博客：

   sudo hexo init

Step2:

进入到blog文件夹下发现Hexo自动帮我们生成了一些文件：

1. 本地运行起博客：hexo s

2. 创建发布我的第一篇博客：

   首先进入到 blog/source/_posts 目录下，该目录中存放的就是我们创建的博客文件，使用vim编辑器博客，然后创建.md文件。

   文件创建完成后退回到blog目录清除缓存 hexo clean。

   然后重新生成博客： hexo g。

   最后重新启动博客即可： hexo s。

Step3：挂载博客到Github（不错的选择）：

1. 在GitHub上新建仓库，注意仓库名必须为 xxx.github.io 注意这里的xxx必须为你的Github用户名，否则后面访问时为404！

2. 下载部署到Github上的插件： cnpm install --save hexo-deployer-git

3. 修改_config.yml文件：

   通过vim编辑器进入到文件的最后新增如下代码：

deploy:
   type: git
   repo: 你的github上博客仓库的地址
   branch: master

4. 更换主题：

在 https://hexo.io/themes/ 中挑选自己喜欢的，不推荐花里胡哨的，那种教程比较少。

推荐使用 https://github.com/litten/hexo-theme-yilia 简洁的风格，毕竟主要是用来记录学习的过程。

选择好Github主题后就 git clone到blog文件夹下，你会发现新克隆的主题存放在themes文件夹下。

最后就是 清除缓存然后重新部署到 Github上即可啦！

5. 美化

---

（1）.添加网易云音乐插件：

①首先打开网易云音乐首页，复制自己喜欢的音乐外分享外链：

点击后会生成对应的HTML代码。

②引入播放器代码：

在你的yilia主题文件夹theme中的 layout/_partial/left-col.ejs文件中添加如下代码：

！注意需要放在

和

之内

<!-- 网易云音乐插件 -->
<% if (theme.music && theme.music.enable){ %>
    <div style="position:absolute; bottom:120px left:auto; width:85%">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||1334445174%>&auto=<%=theme.music.autoplay?1:0%>&height=66"></iframe>
    </div>
<% } %>

---

（2）.添加字数统计：

①安装 hexo-wordcount:

在博客根目录下输入： npm i –save hexo-wordcount

②文件配置：

在\yilia\layout\_partial\post下创建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">
      &nbsp; | &nbsp;
      <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/yilia/layout/_partial/article.ejs中添加：

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <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中添加：

# 是否开启字数统计
#不需要使用，直接设置值为false，或注释掉
word_count: True

---

（3）.修改文章标题样式：

感谢：

b站up主 codesheep（非常好的教程！）:

https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=15936694823282570499

yilia风格美化教程：

https://blog.csdn.net/lynnbest/article/details/79845944

感谢：

b站up主 codesheep（非常好的教程！）:

https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=15936694823282570499

yilia风格美化教程：

https://blog.csdn.net/lynnbest/article/details/79845944

客官进来看看呗：
https://iStitches.github.io