环境准备
需要预先安装node.js、npm、并添加到环境变量(path)
1.官网安装Nodejs(建议使用 Node.js 12.0 及以上版本)
NodeJs是Hexo所必需的环境。
点击 NodeJs 官网,下载左边那个即可,下载好一直 next,选择一个文件夹位置在一直 next 即可完成。安装Node.js会包含环境变量及npm的安装。
验证安装完成cmd中输入命令:
1 | node -v |
返回版本号代表安装完成。
2.安装git
Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。
我们网站在本地搭建好了,需要使用Git同步到云服务器或者GitHub的代码库里。点击 git 官网,下载安装包。点击 next,选择文件夹位置,然后一直 next 到底就行了,选择默认配置就好,默认配置会将环境变量配置好的。安装成功右击鼠标如图所示:
3.下载安装Hexo博客框架
Hexo 是一个快速、简洁且高效的博客框架。Hexo是有官方说明文档,想看最详细的教程可以移步到HEXO官网。前面git和nodejs安装好后,就可以安装hexo了,可以先创建一个文件夹HEXO,然后在这个文件夹下直接右键git bash打开,输入命令:
1 | npm install -g hexo-cli |
下载太慢可以换一下淘宝源,依旧用
1 | hexo -v |
查看一下版本,至此就全部安装完了。
接下来初始化一下hexo,,在该文件夹下鼠标右键gitbash后输入命令:
1 | hexo init blog |
“blog”是你要生成博客的文件夹名称,可以根据自己的喜好来取名。生成的文件如图所示:
输入命令:
1 | hexo g |
完成后,打开浏览器输入地址:localhost:4000就可以看到你生成的博客了。使用ctrl+c可以把服务关掉。
本地部署好之后,只能自己在本地查看博客,我们需要上传到云端的代码库(云服务器或者GitHub)来托管你的博客,这样其他人才能随时访问你的博客。
二、安装使用fluid 主题
获取最新版本
主题下载:https://github.com/fluid-dev/hexo-theme-fluid
方式一
Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令:
1 | npm install --save hexo-theme-fluid |
然后在博客目录下创建 _config.fluid.yml
,将主题的 _config.yml (opens new window)内容复制过去(找到主题文件夹,一般在\blog\nikolahuang.github.io\node_modules\hexo-theme-fluid里面)。
方式二
下载 最新 release 版本 (opens new window)解压到 themes 目录,并将解压出的文件夹重命名为 fluid
。
指定主题
如下修改 Hexo 博客目录中的 _config.yml
:
1 | theme: fluid # 指定主题 |
在这,我使用的是第一种方式,主要步骤是
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文件中的内容 ,注意空格位置什么的不要改
1 | theme: fluid # 指定主题 |
5、运行清除缓存命令 hexo clean 再运行hexo g 再运行hexo s ,然后预览页面。类似下图的页面
image.png
三、完善页面的功能插件
1、中间的背景图的更换,如下图效果
image.png
在_config.fluid.yml中找到上面的位置填写上图标记的代码(注意图片的路径位置)
1 | banner_img: /img/bg.jpg |
image.png
步骤:
2、添加随机打印机效果,如图我所标记的位置的效果
image.png
步骤1、在_config.fluid.yml文件中找到下图位置修改,开启打印机插件:
image.png
步骤2、在上述文件找到下图位置修改,调用接口
3、添加统计数,我使用的是valiner插件。如下图效果
步骤:在在上述文件找到下图位置修改,
4、添加右上角的社交图标和链接,如下图效果
步骤:点击这里 或者 这里挑选自己喜欢的样式,选择其中一个并复制其代码。 如下图
在找到下图位置粘贴代码,如图绿色标记处
四、部署到github的托管网站上,实现在线博客
步骤1:在github 创建好仓库,至于如何创建可以点击这里查看。
步骤2:在_config.yml文件中找到下图位置修改内容
步骤3:使用命令npm install hexo-deployer-git –save 安装部署插件
步骤4:使用hexo clean 清除缓存 、使用hexo g 渲染页面 、使用hexo d 部署页面
步骤5:此时,你远程仓库上,已经有文件了,也就是如下图public文件夹中的文件
步骤6: 在浏览器地址栏输入https://仓库名.github.io 就能看到你的线上博客网站了。
上面的方法尝试之后不行的,可以继续下面这种办法:将博客托管到GitHub
1.GitHub生成代码库
首先,你先要有一个GitHub账户。点击+号,选择New repository,新建仓库:
创建一个和你用户名相同的仓库,后面加.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名,点击create repository。
本地SSH生成密钥,将公钥复制到云端
回到本地主机git bash中,创建用户名和密码
1 | git config --global user.name "GitHub用户名" |
创建SSH密钥,一路回车
1 | ssh-keygen -t rsa -C "GitHub注册邮箱" |
ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,相当于钥匙,id_rsa.pub是公共秘钥,相当于锁。要把id_rsa.pub公共秘钥给GitHub,这样才能用自己的私人密钥去开这把锁。当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。
将id_rsa.pub中的内容复制,而后在GitHub的setting中:
点击左侧SSH and GPG keys的设置选项,点击New SSH key,把你的id_rsa.pub里面的信息复制进去。title随便填,本地的公钥复制到key中。
在本地gitbash中检测GitHub公钥设置是否成功
1 | ssh git@github.com |
第一次登录需要输入GitHub的登录用户名和密码。
3.修改配置文件
下一步将我们的Hexo与GitHub关联起来,打开站博客根目录blog的配置文件_config.yml
翻到最后修改为:(注意后面三行缩进两格)
1 | deploy: |
repository里的内容是GitHub代码仓库浏览器网址栏的网址,注意后面加上.git,保存站点配置文件。
4.本地上传到GitHub
本地gitbash安装Git部署插件
1 | npm install hexo-deployer-git --save |
然后输入下面三个命令就可搭建成功博客了
1 | hexo clean |
云服务器的部署参考博客:https://blog.csdn.net/m0_50609661/article/details/125216866
改自:随心了
- 本文作者: Anderson
- 本文链接: http://nikolahuang.github.io/2024/03/19/hexo-fluid搭建个人博客网站并部署到github/
- 版权声明: 转载请注明出处,谢谢。