Hexo与Github的快速博客建站教程

What is Hexo?


Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

install


本教程只考虑 Windows 环境,如需要其他环境进行安装请移步官网 Doc。并且默认用户会使用基础的一些编辑工具。

hexo 的安装需要两个前置应用:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

Node.js install


访问该 Node.js 链接即可直达官网进行下载。
部分用户可能需要多个版本的 Node.js 可以使用 nvm 来管理不同版本的 Node.js。

当在 cmd(命令提示符) 或者 power shell 中输入 node -v 时,出现 v12.0 及以上版本即成功安装了。

如遇环境变量配置等问题请用户自行查询。

Git install


通过官网 Git 即可快速下载并安装 Git。具体步骤可按该 文章
其中部分步骤可以省略。

要注意,之后的过程里 Github 账户是必须的,需要用户进行相应注册。

本文不考虑其中的一些配置,用户主观能动发挥在机魂接受范围内,不影响后续使用即可。

Hexo install


安装完上述两个软件后,恭喜你,接下来我们可以正式开始安装 Hexo 了!
Node.js 安装完毕后正常情况下会带有 npm 软件包管理工具,使用 cmd(命令提示符) 或者 power shell 输入:

 npm install -g hexo-cli

这里是全局安装的命令,如果您有局部安装的需求,请移步官网 Doc。

同样的,输入 hexo -v 以检查 Hexo 是否安装完成。
当出现一列应用程序的版本号即安装完成。

有些用户使用 power shell 可能会遇到 hexo -v 报错提示,在设置中打开 developer mode 或者更换 cmd 再次尝试,应该与 Hexo 本身无关

安装 Hexo 只需几分钟时间,若您在安装过程中遇到问题或无法找到解决方式,请检查前置步骤及其相关配置,如仍无法解决问题,移步官网进行问题提交。
如果遇到问题可能是国内网络的原因。跳转到后文问题列

First App


基本流程

安装 Hexo 完成后,选择你想要进行工作的文件地址,继续在终端执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

如此操作后,您的文件目录应该会呈现下列格式:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中文件的意义这里不加以赘述,本文意在快速建立起一个 DemoApp,个性化及其配置问题可在官网和主题网站了解。

这里补充创建新文章的命令:

hexo new [layout] <title> 

[layout] 不指定时会按照默认的配置,我们只需要改变 title 即可。

输入下面命令,我们即可在本地进行初始 blog 预览。

hexo s 

hexo server

此时正常的话,终端会出现一个链接,点击即可进行本地预览。

一些作者遇到的问题


问题1

当你网络不佳或者使用 Watt Toolkit 进行网络加速时,可能在 hexo init <folder> 时,终端可能出现如下提示:

fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': SSL certificate problem: unable to get local issuer certificate
WARN  git clone failed. Copying data instead

这时关闭 Watt Toolkit 网络加速或更换网络可能可以解决。该问题在后续主题安装也可能出现。

问题2 友链作者提供

当你网络状况莫名链接不正常某些学校的校园网,在 npm install -g hexo-cli 这一步卡住时可以采用如下方法尝试解决,经过友链作者实测有效。
来源于该博客
使用 Git Bash 运行以下命令:
全局切换

npm config set registry http://registry.npm.taobao.org/

查看版本信息

npm get registry

切回官方镜像

npm config set registry http://www.npmjs.org

此时再去运行下载 Hexo 的命令应该就正常了

npm install -g hexo

使用 hexo -v 查看是否安装成功。

正常结果展示


hexo init <folder> 后正常的结果展示应该如下:

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

此时再继续进行操作即可正常,当一直输入到 hexo shexo server 后打开本地预览应该如下图所示:

alt text

那么恭喜你,你已经成功建成了一个默认 Hexo 样式的博客,接下来我们将了解美观的主题使用以及如何将自己的本地博客挂载到 GitHub 上!

主题更换


Hexo 的社区提供了大量美观的主题,可以访问官网提供的主题总览来预览和跳转到具体的项目中,
可以根据自己的喜好选取相应的主题,我个人使用的是 Next 主题,
这是一个至今仍有社区成员维护的项目,许多技术前辈使用的主题,并且支持大量插件的使用。接下来的内容将以该主题为例。

安装主题


其他主题的安装方式都大同小异,Next 官网写的比较具体,其方法可以迁移到别的主题。
Next 的 Git 给了 Hexo 5.0 及其更高版本的主题安装方法,但是我自己并不清楚该版本的 Hexo 和 Windows 是否可以下载,这里使用 Git clone 的方式进行下载安装。
Git clone 可能需要一些配置,如 ssh 密钥等,这里不做展示,
具体可以参考该文章的GitHub创建仓库部分。


注意
与上文所写的一样,Git clone 可能会遇到网络问题,关闭 Watt Toolkit 再进行尝试。没有 Watt Toolkit 可能连不上 Git 库,克隆又要关掉,呃呃


定位到你的项目地址,在终端输入 clone 命令:

cd hexo-site (用你实际地址替换)
git clone https://github.com/next-theme/hexo-theme-next themes/next

安装完成后回到刚刚的项目地址中的 _config.yml 文件,该文件为配置文件,划到底部,找到名为 theme:landscape 的配置信息,
将其默认的信息修改为 theme: next,这时再在本地预览,输入 hexo s 命令点击 http://localhost:4000/,则会出现以 Next 为主题的博客。

Next 文档的个性化配置写的很详细,如果你觉得该主题不够好看,尝试个性化定义它或者更换主题

如果出现如下图所示的页面,恭喜你,我们距离成功只有最后一步了!

alt text

Git 部署


首先我们已经确定注册了 GitHub 账户,不然前面的步骤应该也不可能完成。
默认新用户从零开始创建库即可。

在个人主页中选择 New 新建仓库,需要注意,新建库名称一定以你的账户名称开始,不过输错不要紧,我们可以删库,重命名的方式后续修改。

库名应如下:

yourname.github.io

其他配置随意,基本默认即可,点击创建。

回到 Hexo 的配置文件 _config.yml 中,在文末添加或替换掉重复部分

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
    type: git
    repo: https://github.com/username/username.github.io.git
    branch: master

并将第十六行的 url 改为:

https://username.github.io

这里的 Username 均为你的 Git 账户名称。

然后在 Git Bash中输入以下命令:

npm install hexo-deployer-git --save

最后输入以下命令:

hexo clean
hexo g
hexo d

现在,在你的浏览器内输入刚刚库的名称,稍等一会,不出意外的话,你的第一个博客成功在 Github 上部署了!

可能的问题


可能需要修改库的 page 设置才能正常部署,多次更换尝试即可。

感谢您的阅读

基本的内容就这些,更高级的设置请移步 Hexo 官网 Doc 和相应主题的官网。