GitHub 上搭建 Hexo 博客

将 Hexo 博客部署到 GitHub 上其实并不难。

完全不会用 Git 的我昨天晚上折腾了一个小时,期间虽然遇到了好多问题,但大多都被我一一解决了。GitHub 上搭建 Hexo 博客步骤比较多,这次就写个教程,篇幅可能会很长,主要是为了不让新人踩坑,我会尽量写得详细点。


首先需要做的第一件事,就是在你正在使用的电脑上安装 GitNode.js 。步骤很简单,分别打开 GitNode.js 官网下载安装所需的版本就好。

这篇教程是在 Windows 操作系统下进行的,所以我本人下载使用的 Git、Node.js 也是 Windows 版本。

下载安装完成之后,前往 GitHub 创建一个项目:

请注意尽量不要勾选 “ lnitialize this repositroy with a README ”,因为上传 Hexo 时项目中不能有任何文件,如果你实在是需要 README 这个文件,在本文后部分会讲到如何保留。

项目名称可自定,当然你也可以选择使用 “ (你的 GitHub ID).github.io ” 来把内容放到 GitHub.io 上,如果你和我一样之前就已经创建过了一个 “ (你的 GitHub ID).github.io ” 项目,那这次你就不能或者说没必要这样命名,随便取个名字就好。

但是如果没有创建过名为 “ (你的 GitHub ID).github.io ” 的库,那么你可以创建并把它作为 Hexo 博客所需部署的目录。

例如,我创建一个名为 Blog-Hx 的项目,在没有勾选 lnitialize this repository with a README 的情况下,创建完成后是这个样子的:

 

先记住上边的项目链接,也就是上图我打上红圈的地方,这个链接待会会用到。

接下来在本机创建一个文件夹,例如我在 E 盘创建一个名为 Hexo 的文件夹,则路径为 E:\hexo

在该文件夹中单击鼠标右键,选择 “ Git Bash Here ” 会弹出一个窗口,接下来的所有操作都是在这个窗口下进行了。

但如果右击时没有发现这个选项,可以在开始菜单或者 Git 安装目录找到 git-bash.exe 单击打开,而后 cd 到 e:\hexo 就可以了 (Linux 操作命令:cd)。

在命令行输入:

npm install -g hexo-cli

用于安装 Hexo ,期间直到 “ $ ” 符号再次出现前不要进行任何操作。完成后,再输入:

hexo init

同样需等到 “ $ ” 出现才能继续下一步操作,就像使用 Linux 操作系统一样。继而执行:

npm install

接下来试着将 Hexo 部署到本地访问试试,按顺序分别执行两条指令:hexo ghexo s 。然后在浏览器内输入 “ http://localhost:4000/ ” 进行访问,如果一切正常就能看到你的 Hexo 博客了。但这篇教程所要讲的是将其部署到 GitHub 上,而不是在本机搭建。所以接下来就要将 Hexo 上传到刚在 GitHub 中创建的项目里了。

首先按下 Ctrl + C 停止,在 Hexo 所在的文件夹下找到 “ _config.yml ” 文件,用记事本打开,在最后一行输入添加这些内容:

deploy:
    type: git
    repository: ********
    branch: master

此时需注意以下几点:

“ ******* ” 为上文说会用到的项目链接。
deploy:type: 可能在 “ _config.yml ” 文件中原本就存在。
deploy 必须顶格,前面不能有空格,但 type:repositroy:branch: 前面必须要有两个空格,而且 “ : ” 号后边必须要有一个空格。

接下来安装 hexo-deployer-git,只需要执行 npm install hexo-deployer-git --save 即可。

打开一个新的 git-bash.exe 窗口,依次输入确定以下命令:

git config --global user.name "*******" “ ******* ” 为你 GitHub 用户名。

git config --global user.email "*******" “ ******* ” 为你 GitHub 注册邮箱。

最后,执行 hexo g 再执行 hexo d ,这就算是部署完成了。

在执行 hexo d 时会弹出 GitHub 账号登陆窗口,此时输入 GitHub 账号密码登陆即可。


如果你在 GitHub 上用来部署 Hexo 博客的项目名称为 “ (你的 GitHub ID).github.io ”,那么现在就可以通过 “ (你的 GitHub ID).github.io ” 来访问 Hexo 博客。如果不是,那么就需要到项目设置 Settings 中找到 GitHub Pages:

点开 None,选择 Master branch,然后就可以通过 “ (你的 GitHub ID).github.io/项目名称 ” 来访问了。


接下来就是绑定域名。

GitHub.io 绑定域名需要到项目下创建一个 CNAME 文件,在这里我并不建议你去 GitHub 项目下手动创建,因为每次更新文章上传后 CNAME 文件都会被删除。如何解决 CNAME 文件被删除这一问题,其实很简单,在本地 Hexo 所在文件夹下,找到 source 文件夹,里边还有个 _posts 文件夹,里边存放着发布的所有文章,暂且先不管 _posts 文件夹,回到 source,在这里创建一个 CNMAE 即可,将要绑定的域名输入进 CNAME 文件中保存。注意 CNAME 文件是没有文件格式的。而上文提到不要勾选的那个选项所创建的 README.md 文件也可以通过这种方式创建。

然后再次输入运行 hexo ghexo d 命令项目下就出现了 CNAME 文件,而且每次更新文章 CNAME 文件也不会被删除。再将域名以 CNAME 解析到 “ (你的 GitHub ID).github.io ”。如果之前就已经存在了一个 名为 “ (你的 GitHub ID).github.io ” 的项目,而且那个项目已经绑定了域名,那就将现在需要为 Hexo 站点绑定的域名以 CNAME 解析到之前 “ (你的 GitHub ID).github.io ” 项目绑定的域名。

比如说之前有个 “ (你的 GitHub ID).github.io ” 项目已经绑定了域名 se.vikon.me,现在要将 hx.vikon.me 绑定到这次为 Hexo 创建的项目,那就将 hx.vikon.me 以 CNAME 解析到 se.vikon.me。


GitHub 上搭建 Hexo 博客教程也就这么多了,如何使用 Hexo 博客程序具体可自行在网上找教程或参考官方中文文档,以后有机会我也会写一篇 Hexo 使用教程。

 

发表评论

发表评论

*

评论区什么都没有