使用Hexo搭建属于你自己的博客

欢迎来到 MineStart’s Blog，为您带来有用且免费的经验教学!
Hexo博客是我一步一步摸索过来的，期间我找了很多博主的教程，结合起来，就有了今天的教程！

前提

相信大家对于博客这个东西不陌生吧，我身边的朋友包括我同学都有属于他们自己的博客

• MSDNicrosoft ‘s Blog
• GuaiJie’s Blog
• Mintimate’s Blog

等等(在我的友情链接里owo)

市面上的博客有很多博客，这里我收集了一些常用的博客(仅针对个人意见！！)

• WordPress

  优点：功能强大、扩展性强、对seo搜索引擎友好、适合DIY
  缺点：不能安装太多插件、备份和网站转移比较繁琐，需要涉及到数据库!

• Typecho

  优点： 容易上手，对小白友好、简单快速的博客平台
  缺点： 主题模板少

• Hexo

  优点：美观简洁，主题模板多
  缺点：暂时没有qaq

那我们今天使用Hexo来搭建一个属于你自己的Blog(doge)

使用视频辅助搭建

准备环境

我这里选择的是Windows环境，如果你不是Windows环境的观众请移步至 Mintimate’s Blog

下载且安装所需文件

• Node.js
• Git or 淘宝 Git for Windows
• VSCode

这边最好选择个梯子，方便我们去下载东西(bushi

下载完记得安装哦~

修改npm下载源

在桌面-鼠标右键-找到"Git Bash Here"，点击"Git Bash Here"

npm config set registry https://registry.npm.taobao.org

接着输入以下代码来验证是否安装成功

npm config get registry

注：如果想还原npm仓库地址，只需再把地址配置成npm镜像就可以了

npm config set registry https://registry.npmjs.org/

部署Hexo到本地

安装Hexo框架

可按照 Hexo 官方文档 来安装

在桌面找个地方新建文件夹，统一取名为"Blog"，不建议使用中文名称，不然后面报错你都不知道怎么死的qaq

统一取名为”Blog”，方便以后部署

进入"Blog"文件夹-鼠标右键-点击"Git Bash Here"

然后在Git窗口输入安装Hexo博客指令

npm install -g hexo-cli

查看Hexo版本

hexo -v

安装Hexo后输入新建博客文件夹

hexo init

至此Hexo框架就安装好了

构建Hexo

初始化Hexo博客，并加载HTML+CSS+JS等静态文件

hexo g

Node.js会在博客根目录生成public文件夹，里面装的就是Node.js生成的静态网页

运行Hexo本地服务器

Node.js生成的静态文件如HTML等不能直接访问。

运行Hexo本地服务器

hexo server

hexo server 可以简化成 hexo s

然后在浏览器访问127.0.0.1:4000 或者 localhost:4000

修改语言

Hexo默认语言为en_US，所以我们需要把语言改为中文

使用VSCode打开博客下的_config.yml文件

在第11行左右找到language ，把en改为zh-CN或zh-Hans

至此，你就成功的把Hexo安装到你的电脑上了。
如需更换主题请往下看。

安装Hexo-Fluid主题

可按照 Hexo-Fluid 官方文档 来安装

下载 最新 release 版本 解压到 /Blog/themes 目录，并将解压出的文件夹重命名为 fluid。

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制进去。

使用VScode打开博客内的 '_config.yml'文件

然后在第100行左右找到theme ，把landscape改为Fluid

如果是其他主题，就把Fluid替换为你的主题的名字

e.g. 假如我要安装的主题是 NexT ，那我要把Fluid改为NexT

别忘记了Ctrl+S保存下哦~~

美化Hexo-Fluid主题

这里可以跳过，也可以按照教程一步一步做下去

可按照 Hexo-Fluid 官方文档 来进一步美化

修改主题配色

我个人觉得主题的 明/暗 配色已经很不错了，不需要改。 如果需要改请往下看qaq

打开主题下的_config.fluid.yml文件

找到Color

可以去 Color选择 获得启发

都是官方的内容，我就不唠叨了

关于页、友情链接、404页

创建「关于页」

回到博客目录-鼠标右键-找到Git Bash Here

输入

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2021-10-30 00:41:25
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

创建「友情链接」

打开博客下的_config.fluid.yml

找到Links Page （如果找不到可以Ctrl+F搜索)

创建「404页」

回到博客目录-鼠标右键-找到Git Bash Here

输入

hexo new page 404

创建成功后，编辑博客目录下 /source/404/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: 404
date: 2021-10-30 00:41:25
layout: 404
---

添加页脚

博客运行时间

Fluid 1.8.4 版本支持自定义页脚内容了，群友常改的网站运行时长，这次无需再修改源代码。

仅需要在主题配置_config.fluid.yml中找到footer:

添加:

<div style="font-size: 0.85rem">
  <span id="timeDate">载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script src="/js/duration.js"></script>
</div>

duration.js 包含的才是功能代码，前面代码仅引用了 duration.js，
我们在主题目录下创建 source/js/duration.js

并添加，内容如下:

!(function() {
  /** 计时起始时间，自行修改 **/
  var start = new Date("2020/01/01 00:00:00");
  
  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 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 = "本站安全运行&nbsp"+dnum+"&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }

  update();
  setInterval(update, 1000);
})();

记得把上面注释的时间改为自己的时间，至此这项功能就引入到footer里了。

如:
我想修改我的博客起始时间为2022/08/06 00:00:00
我则要修改代码为：

var start = new Date("2022/08/06 00:00:00"); 

转载为 Hexo-Fluid 官方文档

添加文字说明

Fluid内置HTML语法，可以在Footer中添加你想要的元素
如:

footer:
  content: '
    <div class="text-center">
      <!--- 添加运行时间 --->
      <div style="font-size:smaller">
        <span id="timeDate">载入天数...</span>
        <span id="times">载入时分秒...</span>
        <script src="/js/duration.js"></script>
      </div>
    </div>

    <!--- 推广 Fluid 超链接 --->
    <div style="font-size:smaller">
      <a href="https://hexo.io/" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <span>With</span>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
      <i class="iconfont icon-love"></i>

      <!--- 填写自己的网站和名字 --->
      <a href="https://blog.xx.cn" target="_blank" rel="nofollow noopener">
        <span>你的名字</span>
    </a>
    </div>
  '

Fluid 原有的页脚内容，建议不要删除，可稍作修改，保留 Fluid 的超链接，用于向更多人推广主题。

添加插件

添加js和css脚本

添加Valine评论系统

部署到远程服务器

部署到云服务器

部署到Github托管

Q&A（问与答）

结尾