【Hexo】Hexo搭建教程

Hexo搭建教程

一、软件准备
- [1.1 安装nodejs](#1.1 安装nodejs)
- [1.2 安装git](#1.2 安装git)
- [1.3 安装vscode](#1.3 安装vscode)
[二、搭建 Hexo](#二、搭建 Hexo)
- [2.1 前期准备](#2.1 前期准备)
- [2.2 安装hexo](#2.2 安装hexo)
- [2.3 初始化 hexo 博客](#2.3 初始化 hexo 博客)
- [2.4 安装 hexo 依赖](#2.4 安装 hexo 依赖)
- [2.5 查看网页](#2.5 查看网页)
三、使用butterfly优化界面
- [3.1 安装 butterfly](#3.1 安装 butterfly)
- [3.2 配置 butterfly](#3.2 配置 butterfly)
- [3.3 设置网站参数](#3.3 设置网站参数)
- [3.4 效果展示](#3.4 效果展示)
[四、推送到github 并部署访问](#四、推送到github 并部署访问)
- [4.1 新建仓库](#4.1 新建仓库)
- [4.2 修改配置文件 _config.yml](#4.2 修改配置文件 _config.yml)
- [4.3 安装 hexo 部署](#4.3 安装 hexo 部署)
- [4.4 配置SSH密钥](#4.4 配置SSH密钥)
- [4.5 推送到github](#4.5 推送到github)
- [4.6 打开GitHub仓库，部署页面](#4.6 打开GitHub仓库，部署页面)

一、软件准备

1.1 安装nodejs

node.js 官方下载地址，

在这里你需要配置好国内的镜像源，环境变量等。这里不做演示，请搜索其他教程。

1.2 安装git

git 官方下载地址

在这里你需要配置好你的GitHub用户名和邮箱。这里不做演示，请搜索其他教程。

bash 复制代码

git config --global user.name <你的用户名>
git config --global user.email <你的邮箱>

1.3 安装vscode

vscode 官方下载地址

在这里你只需要下载安装即可，软件界面是英文的，如果你英语不好，请安装中文插件。这里不做演示，请搜索其他教程。

二、搭建 Hexo

2.1 前期准备

在桌面新一个文件夹，用于存放博客。比如：我在D盘，新建一个blog 文件夹，这个blog 文件夹就是我以后存放博客的文件夹，路径为：D:\blog，你也可以在其他位置创建文件夹，路径不要带中文。

以管理员身份打开vscode, 左上角点击文件->打开文件夹->选择你刚刚新建的文件夹并打开

点击终端-> 点击新建终端，在右下角点击向下的小箭头，点击Git Bash。

2.2 安装hexo

Hexo 官网

输入以下指令安装hexo，-g表示global, 全局安装。

bash 复制代码

npm install -g hexo-cli

输入以下指令，查看版本，如下显示则表示安装成功。-v表示version。

bash 复制代码

hexo -v

2.3 初始化 hexo 博客

如果显示Start blogging with Hexo! 则表示初始化成功，否则就是你网络连接不稳定，导致初始化失败。此时，你需要把左侧生成的所有文件删除，并重新执行下面指令，进行初始化。

bash 复制代码

hexo init

2.4 安装 hexo 依赖

bash 复制代码

npm install

2.5 查看网页

此时，你已经成功配置好了hexo运行环境，输入以下指令可查看页面效果。s 表示：server, 启动服务。

按住ctrl键点击http://localhost:4000/即可跳转到部署页面，按Ctrl+C 即可停止运行。

bash 复制代码

hexo s

三、使用butterfly优化界面

3.1 安装 butterfly

butterfly 官方地址

bash 复制代码

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

3.2 配置 butterfly

复制./themes/butterfly/_config.yml 文件，到根目录D:\blog文件夹下，并修改文件名为：_config.butterfly.yml

修改 Hexo 根目录下的 _config.yml文件，把主题改为 butterfly。

安装 butterfly的渲染器

bash 复制代码

npm install hexo-renderer-pug hexo-renderer-stylus --save

再次运行hexo服务, 查看网页

bash 复制代码

hexo s

3.3 设置网站参数

更多参数请参考官网Hexo 官网

3.4 效果展示

四、推送到github 并部署访问

4.1 新建仓库

首先你需要有一个github 账号，如果没有请先注册。

新建仓库一个仓库，仓库名字为：<你的github用户名(全部小写)>.github.io, 这个仓库名是固定的，并且仓库名称必须要全部小写，否则推送到github上，无法打开网页。

进入仓库，复制SSH的内容。你们打开后仓库是空的，我这里已经部署好了一个仓库，所以里面有内容。

4.2 修改配置文件 _config.yml

修改配置文件_config.yml, 在文件最后添加，博客部署的仓库地址。

bash 复制代码

deploy:
  type: git
  repository: 你刚刚复制的SSH内容
  branch: main

在文件前面添加，博客访问的 url 地址连接。

bash 复制代码

https://<你的github名字(全部小写)>.github.io

4.3 安装 hexo 部署

bash 复制代码

npm install hexo-deployer-git --save

4.4 配置SSH密钥

输入以下指令，接着，连续按几次回车，系统会给你配置默认值。执行完毕后，系统会在C:\Users\<你的电脑用户名>\.ssh目录下生成两个文件，使用记事本打开id_rsa.pub文件，复制文件内容。

bash 复制代码

ssh-keygen -t rsa -C <你的邮箱>

打开github, 点击头像，下拉列表中点击设置(Settings)，点击SSH and GPG keys, 点击New SSH key

将你复制的 id_rsa.pub 文件内容，粘贴进去，点击添加SSH key。

4.5 推送到github

bash 复制代码

hexo clean && hexo g && hexo d

hexo clean: 清除博客上一次的静态文件
hexo g: 生成静态文件
hexo d: 将博客推送到github仓库中

4.6 打开GitHub仓库，部署页面

从你创建的仓库位置打开Setting->Page, 你需要等一会他才能部署好，你可以多刷新几次页面。之后你就可以通过你配置的url 链接访问你的博客了。

END