史上最流行最简单的个人博客搭建方式---Hexo+Gitee，你学废了吗?

最新推荐文章于 2022-04-19 17:20:13 发布

Luis9527

最新推荐文章于 2022-04-19 17:20:13 发布

阅读量291

点赞数

分类专栏：博客文章标签： npm node.js javascript hexo github

本文链接：https://blog.csdn.net/Luis9527/article/details/122082117

版权

博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装nodejs环境

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。由于hexo的运行依赖于node.js环境，所以在安装hexo之前我们需要先安装node.js

1、去官网下载node.js安装包并安装：node.js下载地址

在这里插入图片描述

2、双击安装，然后无脑下一步就完了，有强迫症的可以修改一下安装路径。

安装完之后可以通过cmd终端敲以下命令检验一下是否安装成功

node -v		#查看node版本
npm -v		#查看自带的npm版本

在这里插入图片描述

这里说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

3、配置环境变量

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
在这里插入图片描述

创建完两个空文件夹之后，打开cmd命令窗口，输入

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

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

在这里插入图片描述

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\nodejs\node_global】

在这里插入图片描述

配置好后用npm命令装一个包验证一下是否安装在我们前面配置好的路径

npm install express -g     # -g是全局安装的意思

在这里插入图片描述

注册一个gitee账号

参考连接：博客系列2-Gitee注册 - 知乎 (zhihu.com)

新建一个gitee仓库

这个仓库是用来托管我们的博客项目的

在这里插入图片描述

申请Gitee Pages服务

只有申请了Gitee Pages服务我们才能将我们的博客站点发布出去，第一次申请需要上传身份证照片，审核时长为一个工作日

在这里插入图片描述

安装git工具

git是一个版本控制工具，写代码的同学都会用到，用来拉代码、提交代码等。因为我们需要将我们的博客借助gitee发布到网上，所以需要用到git工具把我们博客工程项目托管到gitee仓库中。

1、去官网下载git安装包并安装：git下载地址

在这里插入图片描述

2、双击安装，然后无脑下一步就完了，有强迫症的可以修改一下安装路径。

3、配置我们电脑上的git连接gitee仓库

在电脑任意目录点击右键，打开git bash，打开后长这样：

在这里插入图片描述

然后进行已下配置

# Git一些重要配置
git config --global user.name "luuuuuuis"  #码云用户名
git config --global user.email "xxxxxx@163.com"   #邮箱

# 生成SSH公钥并添加到码云，实现免密码登录
# 1、生成公钥
ssh-keygen -t rsa
# 2、进入 C:\Users\主机名\.ssh 目录，把 id_rsa.pub 里面的信息复制到码云的 SSH公钥 中即可

在这里插入图片描述

安装Hexo

打开我们的老朋友git bash，输入以下命令安装hexo：

# 全局安装
npm install hexo-cli -g
# 查看hexo版本
hexo -v

在这里插入图片描述

启动一个hexo项目

进入自己想存放博客的文件夹下（我的是【F:\Blog】），执行已下命令：

# 1、初始化一个项目，it-blog是项目名
hexo init  it-blog
# 2、进入it-blog项目目录
cd it-blog
#/3、安装it-blog项目的依赖包
npm install
#/4、启动it-blog项目服务
hexo server

在这里插入图片描述

用浏览器访问http://localhost:4000

在这里插入图片描述

到这里我们本地的hexo博客就已经搭建好了，接下来我们要把他发布到gitee上。

配置连接gitee

发布之前我们要修改hexo项目的配置文件_config.yml，如下：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: 这里填我们前面创建的git仓库
  branch: master

在这里插入图片描述

git仓库地址从gitee上复制

在这里插入图片描述

发布博客

1、发布之前我们需要在项目根目录下安装git发布插件

npm install hexo-deployer-git --save

2、装好发布插件后执行以下命令将我们的博客项目发布到gitee

hexo d

【注：第一次发布的时候会被要求输入账号密码，我们输入我们gitee账号密码即可】

发布成功后就可以在gitee上看到相关静态网页文件了

在这里插入图片描述

3、最后一步在Gitee Pages 静态网页托管服务点击更新站点

在这里插入图片描述

更新完成后即可点击网站地址访问我们发不出去的博客网页^_：https://luuuuuuis.gitee.io

在这里插入图片描述

附：hexo的一些常用命令

$ hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章，前者是简写模式
$ hexo p  => hexo publish
$ hexo g  => hexo generate  #生成
$ hexo s  => hexo server  #启动服务预览
$ hexo d  => hexo deploy  #部署
$ hexo server   #Hexo 会监视文件变动并自动更新，无须重启服务器。
$ hexo server -s   #静态模式
$ hexo server -p 5000   #更改端口
$ hexo server -i 192.168.1.1   #自定义IP
$ hexo clean   #清除缓存，网页正常情况下可以忽略此条命令
$ hexo g   #生成静态网页
$ hexo d   #开始部署