Hexo基础使用教程

发表于 更新于 分类于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 6 分钟

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装前提

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

环境准备

  • 安装Node.js

    Node.js官网下载地址：Node.js download

    1.进入node.js官网下载最新版本的Node.js（推荐使用LTS，LTS：长期稳定版 Current：尝鲜版，操作系统根据自己的系统进行选择。）

    image-20230425095436247

    2.下载完成后，双击node-v18.16.0-x64.msi文件进行安装。

    3.安装完成后，检查node.js版本，打开cmd，输入以下命令

    1
    2
    3
    node -v
    或者
    node --version

    如图所示表示成功（我这里是之前已经安装过，不是最新版本）

    image-20230425100838204

    4.设置镜像加速，安装淘宝镜像。

    在cmd命令窗口输入以下命令并回车

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    image-20230425101316879

    ​ 检查是否安装成功

    1
    cnpm -v

    image-20230425110724351

  • 安装Git

    Git官方下载地址

    1.根据自己的操作系统下载最新版本Git，我这里是Windows x64

    image-20230425102149826

    2.下载完成后，双击Git-2.40.0-64-bit.exe进行安装（这里直接采用傻瓜式安装，直接全部默认选项下一步安装）

    至此Hexo所需的环境已经安装完成。

安装Hexo

安装Hexo

1
2
3
npm install -g hexo-cli
或者
cnpm install -g hexo-cli

我这里已经安装过，界面有可能不同

image-20230425103108031

初始化Hexo

选择一个你想存放初始化文件的位置，然后进入cmd命令面板

image-20230425103520522

image-20230425103550141

输入初始化命令 （hexo-blog：指的是初始化文件的名称，这里自定义）

1
hexo init hexo-blog

image-20230427144218345

进入初始化文件夹，安装npm

1
2
cd hexo-blog
npm install

image-20230427144300721

image-20230425104216821

scaffolds：模板文件夹

source：资源文件夹

themes：主题文件夹

_config.yml：站点配置信息

package.json：应用程序信息

启动Hexo

hexo最常用的四个命令 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo clean：该命令可以简写为：hexo c
作用：
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

hexo generate：该命令可以简写为：hexo g
作用：部署之前预先生成静态文件。

hexo deploy：该命令可以简写为：hexo d
作用：部署网站。

hexo server：该命令可以简写为：hexo s
作用：启动服务器。默认情况下，访问网址为： http://localhost:4000/。

本地启动服务：
hexo c && hexo g && hexo s
部署到远程服务器
hexo c && hexo g && hexo d

image-20230425110007609

启动完成后直接访问：http://localhost:4000/

如图所示表示成功。

image-20230425110112099

创建GitHub仓库

我这里使用的是GitHub，你可以根据自己的情况选择其他的代码托管平台（Gitee、Coding······）

这里需要拥有一个github账户，如果没有的话请先注册一个。

首先将我们的源代码hexo-blog，提交到github仓库，这样每次打开不一样的电脑，只需要进行简单的配置和在github上把文件同步下来，就可以无缝操作了。

image-20230427143947795

image-20230427144718160

声明：我这里采用的是两个仓库的方式，一个仓库用于部署网站，一个用于存放网站源代码。如果你不想使用两个仓库的话，可以只新建一个仓库，采用多分支的方式实现也可以。

由于我们之前已经将源代码仓库上传到了github，这里我们还需要新建一个仓库用于部署网站。

登录github，在右上角有一个“+”标志，点击加号，选择New repository新建一个仓库。

image-20230426104429453

创建一个和你用户名相同的仓库（xxxx：你的用户名）：xxxx.github.io，将仓库设置为公开，然后点击创建。

image-20230426112450473

配置SSH

回到桌面，鼠标右键选择Git Bash Here，进入到Git Bash界面。

image-20230426172646840

image-20230426172803619

在Git Bash命令窗口依次输入下面两条命令。

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

yourname：github的用户名

youremail：github的邮箱

检查输入是否正确，如果输入下面两条命令显示用户名和邮箱表示正确。

1
2
git config user.name
git config user.email

创建SSH，输入下面命令后一路回车即可，这里的youremail同上。

1
ssh-keygen -t rsa -C "youremail"

创建完成后就可以在电脑上找到它，文件位置一般是在C盘→用户→你电脑用户名→.ssh文件夹下

image-20230426173854106

id_rsa：公钥，可以给别人看。

id_rsa.pub：私钥，自己保管不要泄露给别人。

公钥与私钥的作用：用公钥加密的内容只能用私钥解密，用私钥加密的内容只能用公钥解密。公钥与私钥是用来验证服务端与客户端之间发送的报文信息是否被篡改了。

回到github，点击个人头像，选择setting，进入设置页面。

image-20230426174550079

点击SSH and GPG keys，选择SSH keys。

image-20230426174756087

点击 New SSH key

image-20230426175102449

Title自己随便起一个名字，Key type使用默认选中的，Key里面的内使用我们刚刚电脑上生成的id_rsa.pub文件内的内容，直接复制id_rsa.pub文件的内容到输入框，然后点击Add SSH key就OK了。

image-20230426175215631

验证是否成功，在Git bash命令窗口输入以下命令

1
ssh -T git@github.com

如图所示表示成功

image-20230426180020084

将Hexo部署到GitHub

这一步主要是将hexo和github关联起来，打开站点配置文件_config.yml，找到deploy的位置。

image-20230427152241024

修改为

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

image-20230427152346217

假如你想将项目部署到多个平台的话，修改为

1
2
3
4
5
6
deploy:
  - type: git
    repo:
      github: https://github.com/YourgithubName/YourgithubName.github.io.git
      gitee: https://gitee.com/YourgithubName/YourgithubName.git
    branch: master

image-20230427152642471

然后安装部署插件deploy-git。

1
npm install hexo-deployer-git --save

image-20230427152828609

然后执行命令，将本地代码部署到远程服务。

1
hexo c && hexo g && hexo d

image-20230427153319767