一、环境与工具

1.1 安装node.js

安装node.js不赘诉，具体参考这个：安装node.js

1.2 安装git

git主要是用来向提交GitHub代码的，安装git不赘诉

1.3 安装sourcetree

我们去官网下载：https://sourcetreeapp.com/

安装完毕记得：

  1. 添加GitHub账户
image-20231020170000016
  1. 配置ssh密钥
image-20231020170041081

密钥配置相关请看本文：相关操作-生成密钥连接GitHub

二、相关操作

2.1 安装hexo

  1. 我们在命令行中输入：
1
npm install -g hexo-cli
  1. 安装完后输入hexo -v验证是否安装成功。
image-20231020143354965

2.2 GitHub博客仓库的创建

  1. 点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。
image-20231020143945547

注意：1. 仓库名必须是上面这种格式，不然无法通过域名访问；2.仓库设置为公开；3. 添加一个README文件

  1. 打开Git Bash的窗口，点击电脑左下角开始即可看见Git Bash。
image-20231020145248500
  1. 配置我们Github的用户名和邮箱
1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
  1. 配置完成，通过git config -l 检查是否配置成功，如果出现刚刚输入的邮箱和用户名就是成功了。

2.3 生成密钥连接GitHub

  1. 执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github。
1
ssh-keygen -t rsa -C "你的邮箱"
  1. 之后打开%USERNAME%\.ssh文件夹，会看到 id_rsa.pub

image-20231020145843852

  1. 用记事本打开上述图片中的公钥（id_rsa.pub），复制里面的内容，然后开始在github中配置ssh密钥。
image-20231020150008660

  1. 将 SSH KEY 配置到 GitHub

    进入github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

    image-20231020150741352

  2. 测试连接，输入以下命令

1
ssh -T git@github.com

如果出现连接到账户的信息，说明已经大功告成

2.4 创建hexo项目

  1. 打开cmd命令窗口，输入命令创建工程文件夹：
1
hexo init blog-demo(项目名)
  1. 进入blog-demo ，输入npm i安装相关依赖。
1
2
cd blog-demo  //进入blog-demo文件夹
npm i

2.5 运行本地项目

输入命令

1
hexo cl; hexo g; hexo s

2.6 将静态博客挂载到 GitHub

  1. 到博客项目根目录下，使用cmd安装 hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。

    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:poetmilk/poetmilk.github.io.git
      branch: main

  3. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

    1
    hexo clean; hexo generate; hexo deploy

    • hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。

    • hexo generate：生成静态文章，可以用hexo g缩写

    • hexo deploy：部署文章，可以用hexo d缩写

      注意：deploy时可能要你输入 username 和 password。

      如果出现Deploy done，则说明部署成功了。

      image-20231020152429809

      稍等两分钟，打开浏览器访问：https://poetmilk.github.io ，这时候我们就可以看到博客内容了。

2.7 sourcetree本地仓库操作

三、写文章重要操作

3.1 本地运行博客

1
hexo cl; hexo g; hexo s

3.2 GitHub运行博客

前提是已经配置好了ssh密钥，并且工程已经设置了部署参数

1
hexo clean; hexo generate; hexo deploy

3.3 文章内的链接跳转

1
2
3
4
5
# 设置锚点
<a id="miyao"></a>

# 跳转链接
[跳转链接](#miyao)

跳转到配置ssh密钥位置

3.4 文章间的链接跳转

1
[跳转到跨域相关问题](/posts/753dcf2.html)

跳转到跨域相关问题

3.5 分栏

1
2
3
4
5
{% tabs 分栏 %}
<!-- tab 插入图片 -->

<!-- endtab -->
{% endtabs %}

3.6 引用

1
2
3
4
{% note info flat %}{% endnote %}
{% note warning flat %}{% endnote %}
{% note success flat %}{% endnote %}
{% note danger flat %}{% endnote %}

3.7 折叠框

注意：其中的颜色可调整

1
2
3
{% folding green, 查看代码测试 %}

{% endfolding %}
查看代码测试 
          </div>
        </details>

3.8 文字颜色

1
2
3
4
5
6
{% p red, 红色 %}
{% p yellow, 黄色 %}
{% p green, 绿色 %}
{% p cyan, 青色 %}
{% p blue, 蓝色 %}
{% p gray, 灰色 %}

红色

黄色

绿色

青色

蓝色

灰色