前言

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

准备工作

验证安装 CMD 命令行下执行

1
2
$ git --version
#   git version 2.34.1.windows.1  提示Git版本信息安装成功
1
2
$ npm version
#   {  npm: '8.1.2',...}   提示npm版本信息安装成功

为方便操作接下来的操作均在 Git Bash 下执行

安装Hexo

  • 安装Hexo框架

    安装Hexo框架 - Hexo官网

    1
    npm install hexo-cli -g
    1
    2
    $ hexo -v
    # 查看hexo版本验证安装

  • 初始化博客

    进入到你要存放博客静态文件的目录下 使用Git Bash 输入命令

    1
    2
    3
    hexo init blog      # 在当前位置创建blog文件夹【此文件夹就是你博客静态文件的根文件夹，需要重置等操作删除此文件夹即可】
    cd blog                # 进入blog文件夹
    npm install         # 安装hexo所需文件

  • 初始化完成后[blog]文件夹下会有如下文件

    • node_modules: 依赖包
    • public：存放生成的页面
    • scaffolds：生成文章的一些模板
    • source：用来存放你的文章
    • themes：主题
    • _config.yml: 博客的配置文件 - 博客的基础设置在这里修改

  • 启动Hexo服务

    Git Bash在/Blog路径下输入 hexo三连 [修改完配置文件后需要执行此操作]

    1
    2
    3
    hexo cl      # 清除数据
    hexo g      # 生成静态页面
    hexo s      # 启动服务 默认为4000端口  [-p]指定启动端口

    服务启动完成后在浏览器输入 http://localhost:4000 就可以看到博客页面了 👍
    20220227213149.png
    到此本地博客就搭建完成了.使用ctrl+c可以把服务关掉。

部署GitHub

  • 创建GitHub仓库

    1. 登录GitHub新建仓库

    2. 设置仓库基本信息
      仓库名字 用户名.github.io 描述可填可不填 其余保持默认

    3. 点击 Create-repository 创建仓库

  • 添加SSH Key

    • 设置Git的user name和email

      1
      2
      git config --global user.name [用户名]
      git config --global user.email [邮箱]

    • 生成密钥

1
ssh-keygen -t rsa -C [邮箱]
注意：这里-C这个参数是大写的C

执行命令后需要进行3次或4次确认：

  1. 确认秘钥的保存路径（如果不需要改路径则直接回车）；
  2. 如果上一步置顶的保存路径下已经有秘钥文件，则需要确认是否覆盖（如果之前的秘钥不再需要则直接回车覆盖，如需要则手动拷贝到其他目录后再覆盖）；
  3. 创建密码（如果不需要密码则直接回车）；
  4. 确认密码；

  • 查看id_rsa.pub 文件内容

    • 默认保存在用户家目录 .ssh 目录下
      1
      cat ~/.ssh/id_rsa.pub

  • 添加 SSH Key

    复制 id_rsa.pub 文件内容
    登录 GitHub，点击用户头像 → Settings→SSH and GPG keys → New SSH Key
    输入密钥内容、备注Title → 点击Add SSH key保存

  • 测试

    1
    ssh -T git@github.com

    你将会看到：
    The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
    RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
    Are you sure you want to continue connecting (yes/no)?
    选择 yes

    Hi liujiazhou! You’ve successfully authenticated, but GitHub does not provide shell access.

    如果看到Hi后面是你的用户名，就说明配置成功了。

  • 推送远端

  1. 配置_config.yml文件 deploy部分
    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:用户名/仓库名.git    # 仓库地址
      branch: master    #仓库分支
  2. 安装部署插件 Git Bash在/Blog路径下输入
    安装后可以使用hexo d命令部署 
    1
    npm install hexo-deployer-git --save
  3. 推送
    1
    2
    3
    hexo cl   # 清除数据
    hexo g    # 生成静态页面
    hexo d    # 将页面提交到Github仓库

    在完成上述步骤没有报错的情况下，恭喜你博客就部署成功了🎉🎉
    在浏览器输入 http://youname.github.io/ 访问你的博客吧~

博客美化

这里以Next主题为例

  1. 下载主题
    Git Bash在/Blog路径下输入
    1
    git clone git@github.com:theme-next/hexo-theme-next.git themes/next
  2. 修改_config.yml文件 theme 部分
    1
    theme: landscape  修改为👉 theme: next
    3.输入hexo三连 即可看到效果
    1
    2
    3
    hexo cl
    hexo g
    hexo s

    其他主题配置方法相同

其他

  • 新建文章

    因为Hexo 使用 Markdown 解析文章，所以Hexo编写文章也采用 Markdown 格式。
    在博客根目录下使用命令快速创建文章

    1
    hexo new '文章名'

    会在 /blog/source/_posts 文件夹下生成.md后缀的文件，也可以手动创建。

    • Markdown文件头部需有如下参数，用 --- 分隔区域 (使用hexo new命令会帮我们自动生成)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      ---
      title: 新建文章       # 文章标题 【必需】 
      date: 2022-02-28 23:54:46       # 文章创建日期【必需】
      ---
      文章内容
      .
      ..
      ...
      文章内容

  • 绑定域名

    购买一个域名然后进入 域名解析 页面（这里用阿里云作为演示）

    1. 把默认的解析给删除掉，添加一条新的解析
    2. 在博客目录source文件夹里新建一个 CNAME 的文件（！注意文件没有后缀）
    3. 将刚才解析的域名保存在里面(格式：xxxx.com)
    4. 重新生成部署到GitHub上，稍等片刻，在浏览器中输入我们的域名。访问成功！（原本.github.io域名也可以访问）