如何使用Hexo

本文主要介绍如何在mac上配置hexo环境，完成md的编写与提交，最后push到github仓库中。

Hexo官方安装文档：hexo官方安装文档启动的5大关键步骤如下：

  1. 安装git -> 配置git（可以提交.md文件）-> git clone hexodemo
  2. 安装node -> 安装hexo
  3. 编写静态文件：hexo new page -> 找到合适的markdown编辑器编写
  4. 提交静态文件
  5. 等待服务器更新

安装git并配置github账号

安装git

mac默认应该是安装git了。可以打开Terminal输入 git --version
如果报命令未找到，那大概率没有安装，需要自己安装一个git

  • 方式1： 最简单的，安装Xcode Command Line Tools.
  • 方式2： 下载git二进制文件，并手动安装。下载路径：git on mac下载路径安装完毕后，再试着运行：git --version，确认是否安装成功。

配置github

为了方便且安全，我们使用ssh方式，实现客户端与github的通信。
因此，我们需要生成一对公私钥，用于身份校验和信息加解密。

在mac上生成ssh密钥

生成密钥：

打开Terminal
输入：ssh-keygen -t ed25519 -C “your_email@example.com”
一路回车，最后会在 /Users/YOU/.ssh下产生 id_ed25519和id_ed25519.pub两个文件

本机配置

  • 在 /Users/YOU/.ssh目录下新增config文件。 touch ~/.ssh/config
  • 编辑config文件
1
2
3
4
Host github.com
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_ed25519
  • 增加key到ssh-agent ssh-add --apple-use-keychain ~/.ssh/id_ed25519

我现在用mac少，不是特别熟悉了。具体的可以多看看在mac上生成ssh密钥

github上配置

  • copy公钥文件 pbcopy < ~/.ssh/id_ed25519.pub
  • 在github增加sshkey

    在边栏的“访问”部分中，单击 “SSH 和 GPG 密钥”。
    单击“新建 SSH 密钥”或“添加 SSH 密钥” 。在 “Title”（标题）字段中，为新密钥添加描述性标签。 例如，如果使用的是个人笔记本电脑，则可以将此密钥称为“个人笔记本电脑”。
    选择密钥类型（身份验证或签名）。 有关提交签名的详细信息，请参阅“关于提交签名验证”。
    在“密钥”字段中，粘贴公钥。
    单击“添加 SSH 密钥”。

测试是否配置成功

1
2
  
ssh -T git@github.com  
1
2
3
> The authenticity of host 'github.com (IP ADDRESS)' can't be established.
> ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
> Are you sure you want to continue connecting (yes/no)?

出现上述信息时，可以先输入yes

当命令行出现如下信息，则表示配置成功，可以开始便捷使用git了。

1
2
> Hi USERNAME! You've successfully authenticated, but GitHub does not
> provide shell access.

安装Hexo

安装nvm

nvm官方链接 
1
2
  
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

安装后，输入 nvm --version 看看是否安装成功。
如果遇到相关问题，可以参考 nvm_install_troubleshooting_on_macos

安装node

nvm安装好了之后，开始安装node。

1
2
  
nvm install node

安装后，输入node --version 看看是否安装成功。

安装hexo

1
npm install -g hexo-cli

撰写第一个文档

git clone hexodemo

选择一个工作目录，比如home，然后将hexodemo clone到home目录下

1
2
  
git clone git@github.com:xxx/hexodemo.git #具体路径请咨询仓库所有者

使用hexo init 初始化本地环境

1
2
3
4
  
hexo init hexo_local  
cd hexo_local  
npm install

具体参考hexo初始化

将hexodemo目录中的_config.yml, scaffolds, source目录拷贝到hexo_local下，替换原来的文件或者目录

1
2
3
4
5
6
  
cp hexodemo/_config.yml hexo_local  
rm -rf hexo_local/scaffolds  
cp -r hexodemo/scaffolds hexo_local  
rm -rf hexo_local/source  
cp -r hexodemo/source hexo_local

参考markdown语法以及hexo的语法，编写.md文件。

编辑source/_posts目录下已存在的md文件或者新建一个。

1
2
  
hexo new post xx.md

编辑中，如果遇到需要插入图片，需要特别小心。建议参考：插入图片需要安装hexo-render-marked插件

完成编写后，编译，并在本地服务器查看是否符合预期。

先完成hexo本地服务器的安装 hexo-server安装
然后打开一个新的终端，执行以下命令

1
2
  
npm install hexo-server --save

回到之前的终端，完成静态文件的生成和部署 hexo编译与部署

1
2
3
  
hexo clean #先clean一把  
hexo genreate --deploy

打开浏览器，输入：http://localhost:4000 看看是否服务预期

编译没有报错，则将相关的.md文件和对应的目录拷贝回hexodemo下。

1
2
  
cp -r hexo_local/source/_posts/xxx.md hexodemo/source/_posts

提交静态文件

1
2
3
4
5
git status #查看下修改是否是预期的  
git pull  
git add xx.md xx  
git commit -m 'add first_post'  
git push

查看

目前，已经完成了自动编译、部署脚本。所以git push新增的.md文件后，服务器会自动hexo generate, 然后把生成的静态文件部署到网站服务器上。
所以，git push提交后，大约过个3-5分钟，如果一切正常的话，在测试网站 会看到新的页面。