准备工作
Hexo 是一个快速、简洁且高效的 静态 博客框架,它是基于 Node.js 运行的,也就是说它是可以 不需要服务器 的
在 Node.js官网 中下载并安装。安装完成后可以通过如下指令检测是否成功安装:
1 | # 查看Node.js版本 |
如果你想要安装其他版本的 Node.js,可以前往此处:以往的版本
Node.js 会自带 npm,该 npm 会用于后续为Hexo博客安装相应的插件。关于npm的镜像源有如下操作:
1 | # 自带的镜像源对于国内有时下载插件会很慢,可以更换为淘宝的镜像源 |
Visual Studio Code 是一款免费的、轻量级且可扩展的代码编辑器,适用于构建 Web、桌面和移动应用
安装完 VSCode 后是不能立马使用终端来对Hexo博客输入命令的,需要在终端中执行如下操作:
- 鼠标右键以 管理员身份 运行 Visual Studio Code,在终端中执行 get-ExecutionPolicy,显示 Restricted(禁止)
- 执行 set-ExecutionPolicy RemoteSigned 后再执行 get-ExecutionPolicy,显示 RemoteSigned(解锁)
Visual Studio Code 默认文件夹合并,可以在文件 - 首选项 - 设置上进行如下操作:
小技巧:可以对 VSCode 下载 vscode-icons 来美化默认的文件夹样式
安装 Hexo
Windows上可以按下快捷键 Win + R 打开运行 cmd 来启动命令提示符窗口,执行如下指令:
1 | # 安装Hexo |
这时我们就可以利用如下指令在本地电脑上新建一个 HexoBlog 文件夹,里面就有运行Hexo博客的文件了:
1 | # 初始化Hexo博客 |
初始化完成后,会生成相应的文件夹。下面对这些文件夹进行简单的介绍:
node_modules:依赖包
public:存放生成的页面
scaffolds:生成文章的一些模板
source:用来存放你的文章
themes:主题
.gitignore:发布时忽略的文件(可忽略)
_config.landscape.yml:主题的配置文件
config.yml:博客的配置文件
package.json:项目名称、描述、版本、运行和开发等信息
此时依次执行如下指令(Hexo三连):
hexo clean:清除缓存文件(db.json)和已生成的静态文件(public),缩写为 hexo cl
hexo generate:生成静态文件,缩写为 hexo g
hexo server:启动服务器,缩写为 hexo s
在浏览器中打开此链接就可以访问到Hexo博客默认的landscape主题了
挂载博客
在 Git官网 上根据你的操作系统下载安装。安装好 Git 后,鼠标右键就可以看到 Git BASH Here,执行如下指令:
1 | # 配置你的用户名,需要跟Github相同 |
在 Github官网 上点击右上角的 + 按钮,选择 New repository,创建一个 <用户名>.github.io 的仓库
创建完成后,需要一个密钥来让你的计算机可以连接 Github,可以在命令提示符窗口通过如下指令来生成:
1 | # 生成密钥 |
在你的C盘用户文件夹内生成 .ssh 这个文件夹。其中 id_rsa.pub 里的内容就是我们要在Github上配置的密钥
在 Github 右上角头选择 Settings,进入设置页后选择 SSH and GPG keys,然后点击 New SSH key 配置密钥
执行如下指令,如果你看到 You’ve successfully authenticated 出现,就说明你计算机与 Github 连接成功了
1 | # 查看密钥是否配置成功 |
在 Vercel官网 中通过授权 Github 的方式注册一个账号。点击此链接导入 Github 上的 Hexo博客 仓库,导入后点击 Deploy
上图的 Domains 可以自定义你的博客域名
在 VSCode 上的终端上执行如下命令安装该插件,该插件可以将本地的博客文件上传到 GitHub仓库 中
1 | npm install hexo-deployer-git --save |
在博客配置文件 _config.yml 中的 deploy 填写如下信息:
1 | deploy: |
在这之后就可以通过 hexo deploy 或 hexo d 来部署我们的网站了。这时通过 <用户名>.github.io 就可以访问Hexo博客 了
<用户名> 替换为你的 Github用户名