博客主题已由Fluid改为了Butterfly

Fluid可以说是极简版博客，Butterfly的功能要多一些
更改Butterfly主题请参考官方文档

欢迎参观我的博客

Master Young’ Inn

接下来是正式内容

硬件环境

云服务器:

OS: Ubuntu20.04(采用y总提供的Django课的镜像)

git version: 2.25.1 (git –version)

nginx version: nginx/1.18.0 (Ubuntu) (nginx -v)

本地：

OS: Windows11

git version : 2.33.0.windows.2 (git –version)

Nodejs version: 16.15.1 (node -v)

npm version: 8.11.0 (npm -v)

hexo version: 5.4.2 (hexo -v)

具体流程如下：

本地安装git

之前用vscode我就已经装过了

可以参考：教程1

本地安装Nodejs

也参考的别人的: 教程2

但我的npm尝试了很久才安装好，遇到了许多坑可以给你们排一下雷

1.我在安装时下载路径的C改成D就行，其他都是默认，路径就是D:\Program Files\nodejs

2.安装完后在cmd输入node -v和npm -v应该是正常显示版本号, 但也有极大可能npm -v会有警告或报错

npm WARN config global --global, --local are deprecated. Use --location=global instead.

解决办法：教程3

3.nodejs 和npm安装好之后配环境继续跟着教程2做,

执行cmd这两个命令的时候注意路径使自己的实际路径，不要照抄别人的路径

npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"

正常情况是执行了 不会有任何输出

3.修改环境变量的时候一定要注意路径！！！是自己的路径，不要盲目照抄！！！

如果你Nodejs的下载路径和我是一样的话那么就可以参考我的

用户变量Path：

D:\Program Files\nodejs\node_global

系统变量名：

NODE_PATH

系统变量值：

D:\Program Files\nodejs\node_global\node_modules

本地安装Hexo

参考教程的第三节没有雷坑，非常安全的，你就可以在本地的localhost看到最初始的博客了

是不是有些小激动呢^_^

但是在这主题其实很难看，我选择的是Fluid主题封面长这样：

{% asset_img 封面.png 封面 %}

一步一步的按照教程来，在编辑.yml文件的时候最好用编译器vscode之类的，否则看的你眼花缭乱，而且编译器的搜索功能也很友好

访问量，访问人数，评论我另开一篇文章，他的教程有问题

配置好之后你的博客界面就应该非常的漂亮了

接下来就是部署到云服务器了

之前的教程在服务器端写的不好，反正我成功不了，我综合了七八个教程自己找到了部署成功的方法

如果你是才租的原始服务器可以参考y总的b站视频一小时上线黄金矿工，看到第35分钟也就是生成完容器就行，由于镜像里啥都给你安好了，所以可以省去很多麻烦

最麻烦的一步来了,配置NGINX

镜像的nginx好像有点问题，我是卸载了重新安装的

卸载参考 https://blog.csdn.net/adley_app/article/details/79223221

安装参考 https://www.bilibili.com/read/cv16169310

安装好以后默认未启动，使用以下命令启动nginx服务：

sudo /etc/init.d/nginx start

nginx参考命令:九个流行的Nginx命令

其中只有停止、查看服务器状态、测试可以用

启动得用上面那个，并且启动和停止要加上sudo

启动成功后，浏览器输入网址就能看到成功启动Nginx的提示，离成功越来越近了！！

配置云端git

进入家目录：

cd 

初始化空仓库

git init --bare blog.git
vim blog.git/hooks/post-receive

在post-receive中输入，注意路径要改写成你的用户名，不要写错了

#! /bin/bash
git --work-tree=/var/www/blog --git-dir=/home/你的用户名/blog.git checkout -f

然后改一下这个仓库的权限

chmod -R 755 /home/你的用户名/blog.git

创建一个blog文件夹

cd /var/www/
mkdir blog

我就是在这里卡了一晚上，因为每篇博客都写得不一样的，也不知道谁是对的，最后我取其精华，去其糟粕总结出来了正确的做法

代码的意思就是：

/home/你的用户名/blog.git 就是你的云端git仓库 and 你在本地的数据会git push到这

然后经过这个命令所有push上来的数据会转存到这个目录下

/var/www/blog

这个目录就是存放html文件的地方(大概就是这个意思，我还没学过前端)网页的渲染就靠它

但是Nginx默认的路径不是/var/www/blog，因此我们得去改一下

cd /etc/nginx/sites-available sudo chmod 777 default vim default

找到41行左右的

root /var/www/html;

改为

root /var/www/blog;

这样云端就部署完了

回本地Windows

倒数第二步

回到本地，用管理员身份 管理员身份 管理员身份（说三遍) 打开cmd，输入下列指令，否则会乱七八糟的报错

npm install hexo-deployer-git --save

下载过程会有警告，不用管

如果还有报错的话建议百度

最后一步

修改D:\myblog\hexo-blog_config.yml的末尾

deploy:
  type: 'git'
  repo: blog:blog.git
  branch: master

repo是你服务器仓库的地址，由于我在.ssh/config文件中配置了别名blog所以这样写

没配置别名的话，如果是镜像的话应该是20000端口,写成这样:

deploy:
  type: 'git'
  repo: -P portnumber 用户名@xxx.xxx.xxx.xxx:blog.git 
  branch: master

这个blog.git就是服务器家目录下的git仓库

最后

hexo clean # 清缓存 可选
hexo g
hexo d

大功告成，这样博客就被部署到云端里，输入你的网址访问博客吧！！！

关于美化可以参考主题的官方教程

https://hexo.fluid-dev.com/docs/guide/

补充点有用的命令

1.生成一篇文章

在hexo-blog目录下用git-bash

hexo new post 我的文章

2.便签

在 markdown 中加入如下的代码来使用便签：

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

或者使用 HTML 形式：

<p class="note note-primary">标签</p>

{% asset_img 便签.png 便签 %}

3.图像

把图像存到与文章名字相同的文件夹

{% asset_img 图像名 别名 %}
例如：{% asset_img test.png  测试图像 %}

4.脚注
优雅地将脚注写在文末，比如：

正文

## 参考
[^1]: 参考资料1
[^2]: 参考资料2 

5.后台admin/界面编辑文章
在hexo根路径下用bash下载

npm install --save hexo-admin

只能在localhost:4000编辑
输入localhost:4000/admin进入界面
可以在编辑文章的同时实时预览效果