【原创】Gitee + Hexo + Fluid 搭建个人免费网站


【原创】Gitee + Hexo + Fluid 搭建个人免费网站

原文链接:https://jasoninterface.gitee.io/hexo-blog

相关链接
1.Hexo
2.Gitee
3.Fluid主题

准备环境

1. nodejs+npm的安装

  • 从nodejs官网直接下载,并且根据顺序安装文件到对应的位置,就完成
    因为nodejs内部已经集成npm,所以不必要分开下载,地址:nodejs+npm
$ node -v  
$ npm -v

上面校验本地是否安装完成,如下图:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第1张图片

  • 新建node_global和node_cache文件夹,避免npm安装的依赖全部堆积到默认盘

因为默认的npm下载依赖安装路径都是在 ‘C:\Users\你自己电脑名字\AppData\Roaming\npm’ 路径下面,所以我们一般会更改这个位置

1.在安装nodejs的目录下,新建上面两个文件夹,如下图:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第2张图片

2.配置全局环境变量

用户变量:
编辑PATH,添加’C:\Program Files\nodejs\node_global’路径
系统变量:
新建变量,名字NODE_PATH,值’C:\Program Files\nodejs\node_modules’

3.然后运行执行命令

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

最后npm安装的路径就会改变,查看效果,如下图:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第3张图片

2. Git安装

从Git官网下载稳定的版本,然后开始无脑点击下一步安装即可。Git地址

$ git version

上面校验本地是否安装完成,如下图:
在这里插入图片描述

开始搭建

1. 搭建Hexo网站

  • 下载脚手架
# 全局安装
$ npm install hexo-cli -g
# 查看hexo版本
$ hexo -v

#出现下面的,就是安装成功
hexo-cli: 4.3.0
os: win32 10.0.18363
node: 14.18.1
v8: 8.4.371.23-node.84
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.17.2
modules: 83
nghttp2: 1.42.0
napi: 8
llhttp: 2.1.4
openssl: 1.1.1l
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0
  • 初始化项目
$ hexo init 项目名字 # 初始化

found 0 vulnerabilities
INFO  Start blogging with Hexo! #安装成功

$ cd 项目名字 # 进入目录
$ npm install # 安装npm
$ hexo server # 启动服务

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. # 部署成功

如下图:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第4张图片

2. 部署网站到Gitee

  • 创建账号
    这步可以跳过了吧,哈哈。

  • 新建仓库

仓库名称和仓库路径要尽量保持一致。

  • 配置ssh
$ git config --global user.name "" # gitee用户名
$ git config --global user.email ""  # 邮箱
# 生成SSH公钥并添加到gitee,实现免密码登录
# 1、生成公钥
ssh-keygen -t rsa -C "# 邮箱" 

把 C:\Users\主机名.ssh 目录,把 密钥名字.pub 里面的信息复制到gitee的 SSH公钥

  • 配置gitee pages

进入到仓库,点击管理选项,点击选项初始化 README.md 快速开启 SVN访问,然后点击服务,选择Gitee Pages,如果这个是第一次操作,需要身份证上传核实,然后等一天就可以重新回到这个界面操作。

然后按照下图操作即可:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第5张图片

  • 配置项目的_config.yml文件
  1. 修改url中的Gitee Pages地址
  2. 语言可修改为中文language: zh-cn
  3. deploy 修改为Gitee Pages 的地址

如下图:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第6张图片
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第7张图片

  • 部署项目
$ cd 项目名字  #进入项目目录
$ hexo clean #清理缓存
$ hexo g #生成网站文件
$ hexo s #本地测试代码,Ctrl+c停止本地映射
$ hexo d #推送本地代码到码云,第一推送需要输入gitee的账号密码 

注意,每次部署了项目,都要在Gitee Pages里面点击更新

3. 搭配Fluid主题

创建fluid的配置文件,该文件会永久覆盖_config.yml文件

修改_config.yml的配置,找到theme,指定主题为:fluid

在_config.yml同目录创建_config.fluid.yml文件,里面的内容直接拷贝这里

然后重启,就完成了。

如需要继续编辑或者写文章,点击这里

遇到的问题

vscode的终端无法执行hexo指令

  1. 以管理员身份运行power shell
    (备注:右键win标,选择 “Windows PowerShell(管理员)”打开即可)
  2. 输入 set-ExecutionPolicy RemoteSigned 回车
  3. 输入 A 或者 Y 回车

Hexo部署出现错误err: Error: Spawn failed解决方式

##进入项目根目录
cd 项目名字

##删除git提交内容文件夹
rm -rf .deploy_git/

##执行
git config --global core.autocrlf false

##最后
hexo clean && hexo g && hexo d

微信扫一下二维码,不定时分享有趣的事情哦:
【原创】Gitee + Hexo + Fluid 搭建个人免费网站_第8张图片

你可能感兴趣的:(npm,前端,node.js)