手摸手教你用github和hexo搭建个人博客(二)

上一篇我们创建并开启了 githubGithub Pages 服务,已经可以通过指定路径访问博客内容了,这篇我们开始用 Hexo 管理和更新博客内容。

Hexo

安装Hexo

Hexo的安装非常简单,当我们安装好 GitNode.js后,只需要在命令行工具中执行如下命令即可

$ npm install -g hexo

建站

安装好 Hexo 后,我们通过其提供的命令在指定文件夹中快速创建所需要的文件

$ hexo init 
$ cd 

默认情况下在初始化的时候会自动帮我们安装所有项目依赖包,如果没有可以在创建的目录下执行下面的命令进行安装

npm install

新建完成后,指定文件夹的目录如下:

/
┣━━ _config.yml
┣━━ package.json
┣━━ scaffolds
┣━━ source/
┃      ┣━━ _drafts
┃      ┗━━ _posts
┗━━ themes

此时我们已经完成了一个基本博客的创建,如果你迫不及待的想看下效果,可以执行下面的命令在本地模拟运行博客

$ hexo server

$ hexo s

运行后终端上会显示如下信息

start server result

现在我们打开浏览器,输入 http://localhost:4000/并按下回车后,Hexo默认的博客样式和内容就呈现出来了。

default hexo

部署

上面我们只是在自己的机器上模拟运行了我们的博客网站,如果想要让其他人也可以浏览我们的博客则需要把它部署在可以提供公共访问的地方,这里结合我们之前介绍的Github Pages服务就可以很简单的实现这个需求。

编译

首先我们需要先对源代码进行编译生成静态文件,执行如下命令:

$ hexo generate

$ hexo g

此时我们的博客所在文件夹下会多出一个 public 的目录,里面就是生成好的所有静态文件

上传

接着我们把生成的所有博客静态文件上传到指定的git仓库

Hexo提供了方便的一键部署功能,只需要执行如下命令即可

$ hexo depoly

$ hexo d

在上传前我们还需要做些准备工作,比如我们需要告诉Hexo需要上传到哪里。

首先安装插件hexo-deployer-git来启用一键部署的功能,Hexo在初始化的时候没有默认安装此插件

$ npm install hexo-deployer-git --save

注意:如果你的机器上安装了yarn,在执行hexo init初始化的时候会默认使用yarn安装所有依赖包,这里必须用yarn add hexo-deployer-git进行安装,否则会报错

打开项目中的_config.yml配置文件,找到deploy配置项,修改deploy下的typerepo参数,最终效果如下:

deploy:
  type: git
  repo: https://github.com/yourGithubName/yourGithubName.github.io

在配置好对应参数后,执行 hexo d 即可将所有静态文件推送到远端git仓库

此时我们打开浏览器,输入 https://yourGithubName.github.io/即可看到我们刚才部署成功的博客内容

如果你自己有购买专属域名,也可通过配置CNAME来使我们的域名关联到此地址上,具体内容可以参见手摸手教你用github和hexo搭建个人博客(番外篇)

在完成了博客的创建和部署后,下一篇我们会聚焦在HEXO框架内的_config.yml文件,看看这些设置项都能带来什么效果。

(完)

如果此文有帮助到你,你可以选择请我喝杯☕️ ,感谢你对我分享内容的认可😃