抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

这是我在Hexo创建的第一篇文章!
我把部署的过程简要地记录在这里,以便之后可以回顾我的Blog设计。
我使用Hexo框架来建站,并且部署在Github Page上的博客,使用Volantis作为主题。


0、预准备

【重要:在安装Hexo时必读的文档】: 安装文档 | Hexo

在Windows下与配置相当方便。

在本地(Windows)上安装好Git、node.js后,打开Git Bash并通过以下命令来安装hexo:

1
$ npm install -g hexo-cli

1、Hexo的部署与启动

【重要:在配置Hexo时必读的文档】: 配置文档 | Hexo

选择一个位置来存放项目文件夹, 在空白处点击右键菜单中的【以Git Bash Here打开】打开命令行界面。

以下命令用于新建并初始化一个文件夹:

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

<folder>按照自己的喜好来重命名。举例,采用blog为初始化文件夹,那么命令为:

1
2
3
$ hexo init <blog>
$ cd <fblog>
$ npm install

配置完成后,该目录会存放hexo建站所需要的文件。

_config.yml是位于根目录的一个配置文件,在这里配置大部分必要的参数。

在第一次建站时,或者如果对_config.yml的内容并不了解,那么通常情况下没有必要修改_config.yml内的参数。

【重要:在Hexo服务启动时必读的文档】: 命令文档 | Hexo

现在试着新建一篇文章:

1
$ hexo new "post title with whitespace"

在完成后,这篇文章会被保存在source文件夹中的_post文件夹,后缀md(markdown)。

接下来,使用 Hexo 服务三板斧:

1
2
3
$ hexo clean
$ hexo g
$ hexo s

这三行命令分别用于清除预存、生成静态页面,以及启动服务。
Hexo默认的端口是4000。如果服务启动无误,现在应该可以在 (http://localhost:4000/) 中看到自己的网页。
注意:如果无法访问,试试访问 (http://127.0.0.1:4000/) ,这两个都是本机地址。
如果依旧存在无法访问的情况,试着开启代理,因为Hexo使用的CDN似乎被部分屏蔽。
如果想要关闭服务,在git bash页面按住ctrl+c来关闭。

2、美化(可选)

Hexo拥有庞大的主题以供美化。在这里使用Volantis来美化。当然如果不需要主题美化或者想要自定义,也可以跳过这一部分。

【Volantis的部署文档】: Volantis 快速开始

截止文章时间,volantis 5.x处于稳定版本。

在/_config.yml中找到theme字样,将该行改为:

1
theme: volantis

然后,按住ctrl+s保存。
然后,在终端中下载volantis主题:

1
npm i hexo-theme-volantis

在修改完以后,通常需要关闭并使用hexo s 重新启动服务。

在打开网址后,就可以看到页面发生了变化。

如果想要在细节上修改美化,那么访问以下文档Volantis | 主题配置来配置。

3、推送到Github page

Github Page可以用来部署静态页面,所以在本地完成部署后推送到github上的repo就可以完成部署。

在github上建立名为 <GitHub 用户名>.github.io 的储存库。

为了将本地的Hexo推送到Gtihub上,需要安装git推送工具。在终端输入:

1
$ npm install hexo-deployer-git --save

然后,在_config.yml中的末尾部分找到deploy相关的参数。

1
2
3
4
5
deploy:
type: git
repo: <repository url> # 填写你的repourl,例如:https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch] # 填写你的分支名称。例如,我将主分支重命名为Hexo,那么填入Hexo。注意[]不填。
message: [message] # 自定义提交信息。这里选择删除。

在与Github的ssh key配置完成后,输入三板斧+deploy来推送到GitHub:

1
2
3
4
$ hexo clean
$ hexo g
$ hexo s
$ hexo d

最后在Github上完成设置:在Settings>Pages中,将Branch修改为Hexo。
在Settings>General中,将Default Branch修改为Hexo。

稍等后,打开 <GitHub 用户名>.github.io ,就可以看到本地页面已经被推送到了Github上。

还可以在下方的Custom Domain中输入你拥有的域名,并配置CDNAME的DNS解析。稍等后,你将能使用你的域名来访问它。
需要注意的是,似乎每次deploy后,custom domain都会被删除,需要重新修改。

评论