HEXO框架搭建个人博客

HEXO框架搭建个人博客

一、 环境搭建

1. nodejs安装

1.1 下载

下载地址（选择LTS稳定版）：https://nodejs.org/en/

下载之后直接默认安装，一路next（建议不要放在C盘）

1.2 测试nodejs

打开windows的命令行工具输入

node -v
Copy

显示版本号则安装成功

1.3 测试npm

# npm是nodejs安装时默认安装的
# 直接在windows的命令行工具输入
npm -v
Copy

显示如下则安装成功, npm管理工具用于安装Hexo框架

1.4 安装nrm（需要一点耐心）

nrm的安装原因：需要切换下载源到国内镜像源，提升下载速度

• 默认npm的全局安装路径在C盘，我们需要修改到nodejs的安装目录，新建两个文件夹: node_global_modules 和 node_cache

• 在命令行执行以下两条命令修改npm配置

  npm config set prefix "D:\Java\nodejs\node_modules\npm\node_global_modules"
  npm config set cache "D:\Java\nodejs\node_modules\npm\node_cache"
  Copy
  

• 执行后输入以下命令，查看npm配置结果

  npm config ls
  Copy
  

• 验证配置成功后，需要配置环境变量。在环境变量中，新建一个系统变量，变量名：NODE_HOME，变量值：D:\dev\nodejs，效果如图：

• 在系统环境变量Path变量名中，新建变量值：

  %NODE_HOME%
  %NOED_HOME%\node_modules
  %NODE_HOME%\node_modules\npm\node_global_modules\
  Copy
  

效果如图：

• 保存后重新打开命令行工具，执行性全局安装

  npm install nrm -g
  Copy
  

  安装结束后如图：

  

• 在命令行输入指令查看下载源，可能会报错如下图：

  nrm ls
  Copy
  

  

• 找到nrm目录(错误第四行)

  at Object.<anonymous> (D:\Java\nodejs\node_modules\npm\node_global_modules\node_modules\nrm\cli.js:17:20)
  Copy
  

• 打开cli.js 第17行修改成

  //const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)
  const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
  Copy
  

• 重新输入nrm ls查看下载源

  

• 修改下载源指令，推荐选择taobao

  nrm use taobao # 选择淘宝
  Copy
  

2. 安装Hexo框架

2.1 安装hexo-cli脚手架

打开命令行输入

npm i -g hexo-cli
Copy

安装成功如图：

2.2 验证hexo-cli安装成功

命令行输入测试

hexo -v
Copy

结果如图：

3. 安装Git

具体可以参考我的Git总结

二、使用Hexo搭建博客

1. 创建项目文件夹

在本地硬盘创建并进入项目文件夹（blog），并在该文件夹下打开命令行工具

2. 初始化blog项目

使用hexo命令初始化项目

hexo init
Copy

初始化项目文件如图：

3. 运行hexo服务预览博客

在当前路径下输入命令

hexo s
Copy

命令行出现访问路径，直接点击访问即可

默认样式如图：

4. 创建文章

在当前路径下输入命令

hexo n 'hexo test'
Copy

回车后出现以标题命名的.md文件路径，打开该文件编辑文章内容

5. 更新文章

命令行输入指令

hexo clean # 清理缓存
hexo g # 解析生成
hexo s # 运行hexo服务预览博客
Copy

三、 博客部署到GitHub

1. 登陆GitHub创建仓库

创建仓库命：git_name.github.io (注意第一个.前面一定是账户名)

2. 在本地目录安装git部署插件

在项目根目录下打开命令行工具输入如下

npm install --save hexo-deployer-git # --save 表示只在本目录下安装
Copy

3. 修改项目根目录下的配置文件

找到_config.yaml文件

找到最下面的deploy：type 进行编辑:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: https://github.com/git_name/git_name.github.io.git 
  # repo : github上创建的仓库地址
  branch: master
Copy

4. 部署到GitHub

项目根目录下打开命令行输入

hexo d
Copy

提示你输入GitHub账户和密码后将代码提交到GitHub仓库

通过GitHub链接可访问博客

四、 更换主题

1. 下载主题

将主题文件下载到本地项目的theme文件夹

在本地项目根目录下打开命令行输入

git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid
Copy

2. 修改配置 _config.yml

找到#Extensions项的theme

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid
Copy

3. 更新并重新部署

hexo clean # 清理缓存
hexo g # 解析生成
hexo s # 运行hexo服务预览
hexo d # 部署到github
/fluid
Copy

2. 修改配置 _config.yml

找到#Extensions项的theme

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid
Copy

3. 更新并重新部署

hexo clean # 清理缓存
hexo g # 解析生成
hexo s # 运行hexo服务预览
hexo d # 部署到github