环境准备
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 就能看到你的线上博客网站了。
总结
本来以为挺简单的，但在操作过程中，还是有些地方卡住了。还有很多的功能，你们可以自己去玩。为了下次不卡住，我就在此记录下来了。希望你们跟着我的操作，也能搭建出属于你们自己的博客。
网友评论