这是我在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 | $ hexo init <folder> |
<folder>
按照自己的喜好来重命名。举例,采用blog为初始化文件夹,那么命令为:
1 | $ hexo init <blog> |
配置完成后,该目录会存放hexo建站所需要的文件。
_config.yml是位于根目录的一个配置文件,在这里配置大部分必要的参数。
在第一次建站时,或者如果对_config.yml的内容并不了解,那么通常情况下没有必要修改_config.yml内的参数。
【重要:在Hexo服务启动时必读的文档】: 命令文档 | Hexo
现在试着新建一篇文章:
1 | $ hexo new "post title with whitespace" |
在完成后,这篇文章会被保存在source文件夹中的_post文件夹,后缀md(markdown)。
接下来,使用 Hexo 服务三板斧:
1 | $ hexo clean |
这三行命令分别用于清除预存、生成静态页面,以及启动服务。
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 | deploy: |
在与Github的ssh key配置完成后,输入三板斧+deploy来推送到GitHub:
1 | $ hexo clean |
最后在Github上完成设置:在Settings>Pages中,将Branch修改为Hexo。
在Settings>General中,将Default Branch修改为Hexo。
稍等后,打开 <GitHub 用户名>.github.io
,就可以看到本地页面已经被推送到了Github上。
还可以在下方的Custom Domain中输入你拥有的域名,并配置CDNAME的DNS解析。稍等后,你将能使用你的域名来访问它。需要注意的是,似乎每次deploy后,custom domain都会被删除,需要重新修改。