笔者从小就有一个梦想，那就是能拥有一个属于自己的网站，那真的是泰裤辣！！但是对于当时一个连html/css/js是啥都不知道的小白来说有辣么亿点点难..后来我遇见了hexo框架，开箱即用，大大降低了难度，感觉可以尝试一下[捂脸]，所以笔者就从零开始，慢慢摸索。而写这篇文章，就是为了记录总结笔者建站(掉坑)的全过程...
Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页
Fluid是基于 Hexo 的一款 Material Design 风格的主题，由 Fluid-dev 负责开发与维护。
netlify是一个提供托管服务的平台，免费额度充足，速度较快且易于上手
Cloudflare是国外著名的CDN供应商，可以提供免费的DNS服务和SSL证书，用来加速和保护网站
Hexo官方文档
使用 npm 安装 Hexo：
npm install -g hexo-cli
{% note success %} 使用淘宝镜像加速 npm config set registry http://registry.npmmirror.com
npm config set registry http://registry.npmmirror.com
安装完成后新建博客项目：
hexo init <folder> cd <folder> npm install
Fluid用户手册
下载 最新release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid
然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml内容复制过去
_config.fluid.yml
_config.yml
如下修改 Hexo 博客目录中的 _config.yml：
theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改
首次使用主题的「关于页」需要手动创建：
hexo new page about
创建成功后修改/source/about/index.md，添加layout 属性：
/source/about/index.md
layout
--- title: 标题 layout: about --- 这里写关于页的正文，支持 Markdown, HTML
至此，博客已基本安装完成，以下为常用hexo命令：
# 生成静态网页 hexo g #启动服务，默认地址为 http://localhost:4000/ 在浏览器中输入地址即可预览 hexo s # 删除生成的静态网页 hexo clean #创建一篇新文章或者新的页面 hexo new [layout] <title> #文章的布局(layout), 默认为 post,可以通过修改 _config.yml 中的default_layout 参数来指定默认布局 #Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径 #而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹
Fluid配置文档 修改博客目录下的_config.yml"站点配置" 和 _config.fluid.yml"主题配置" 以配置博客
修改主题配置：
index: slogan: enable: true text: 这是一条 Slogan api: enable: true url: "https://v1.hitokoto.cn/?c=d" method: "GET" headers: {} keys: ["hitokoto"]
url: 一言的请求接口，参数c为句子类型见下表
url
设置主题配置：
post: math: enable: true specific: false engine: katex
更换 Markdown 渲染器：
npm uninstall hexo-renderer-marked --save npm install hexo-renderer-markdown-it --save npm install @traptitech/markdown-it-katex --save
然后在站点配置中添加：
markdown: plugins: - "@traptitech/markdown-it-katex"
安装完成后执行 hexo clean
hexo clean
安装hexo-abbrlink：
npm install hexo-abbrlink --save
修改站点配置：
#permalink: :year/:month/:day/:title/ permalink: post/:abbrlink/
在主题配置的 footer: content 中添加：
footer: content: ' <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> <div style="font-size: 0.85rem"> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/js/duration.js"></script> </div> '
在博客目录下创建 source/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 = "本站安全运行 "+dnum+" 天"; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; } update(); setInterval(update, 1000); })();
不要忘记把上面注释的时间改为自己的时间，至此这项功能就引入到
浙公网安备 33010602011771号