Hexo fluid主题博客网站的初体验

环境准备

node.js、npm、

安装主题

一、搭建 Hexo 博客

如果你还没有 Hexo 博客，请按照 Hexo 官方文档 (opens new window)进行安装、建站
主要命令操作命令步骤是

1、全局安装hexo脚手架命令 npm install -g hexo-cli

2、新建个文件夹，执行初始化hexo命令 hexo init

执行完上述两个命令后，新建文件夹中将会生成很多新的文件，

3、执行页面初始化命令 hexo g

4、执行开启本地服务预览命令 hexo s

提示：hexo s -p 端口 该命令可以指定端口预览页面

5、当你看到下面的页面，恭喜你，你已经成功在本地创建了一个属于你的博客网站了

image.png

二、安装使用fluid 主题

获取最新版本

方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml (opens new window)内容复制过去。

方式二

下载 最新 release 版本 (opens new window)解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

在这，我使用的是第一种方式，主要步骤是

1、运行安装命令 npm install --save hexo-theme-fluid

2、在根目录下创建文件一个名为_config.fluid.yml的文件

3、将node_modules里面hexo-theme-fluid文件夹里面的_config.yml的内容复制到新建的_config.fluid.yml文件中

4、如下图修改_config.fluid.yml文件中的内容 ，注意空格位置什么的不要改

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

5、运行清除缓存命令 hexo clean 再运行hexo g 再运行hexo s ,然后预览页面。类似下图的页面

image.png

三、完善页面的功能插件

1、中间的背景图的更换，如下图效果

image.png

在_config.fluid.yml中找到上面的位置填写上图标记的代码(注意图片的路径位置)

banner_img: /img/bg.jpg

image.png

步骤：

2、添加随机打印机效果，如图我所标记的位置的效果

image.png

步骤1、在_config.fluid.yml文件中找到下图位置修改，开启打印机插件：

image.png

步骤2、在上述文件找到下图位置修改，调用接口

image.png

3、添加统计数，我使用的是valiner插件。如下图效果

image.png

步骤：在在上述文件找到下图位置修改，

image.png

image.png

4、添加右上角的社交图标和链接，如下图效果

image.png

步骤：点击这里 或者 这里挑选自己喜欢的样式，选择其中一个并复制其代码。 如下图

image.png

在找到下图位置粘贴代码，如图绿色标记处

image.png

四、部署到github的托管网站上，实现在线博客

步骤1：在github 创建好仓库，至于如何创建可以点击这里查看。
步骤2：在_config.yml文件中找到下图位置修改内容

image.png

步骤3：使用命令npm install hexo-deployer-git --save 安装部署插件
步骤4：使用hexo clean 清除缓存 、使用hexo g 渲染页面 、使用hexo d 部署页面
步骤5：此时，你远程仓库上，已经有文件了，也就是如下图public文件夹中的文件

image.png

image.png

步骤6: 在浏览器地址栏输入https://仓库名.github.io 就能看到你的线上博客网站了。

总结

本来以为挺简单的，但在操作过程中，还是有些地方卡住了。还有很多的功能，你们可以自己去玩。为了下次不卡住，我就在此记录下来了。希望你们跟着我的操作，也能搭建出属于你们自己的博客。