快速安装 Hexo 静态网站并部署到 GitHub Pages
date
Dec 18, 2020
slug
hexo-install-deploy
status
Published
tags
GitHub Actions
GitHub Pages
Hexo
域名解析
summary
Hexo 是一个非常强大的静态网站系统。配合丰富多样的主题,可以非常方便的搭建博客或个人网站。借助 GitHub Pages,Cloudflare Wokersite/Pages 等提供的托管服务,我们无需任何服务器资源就能拥有展示和记录自己的一片空间。
type
Post
Hexo 是一个非常强大的静态网站系统。配合丰富多样的主题,可以非常方便的搭建博客或个人网站。借助 GitHub Pages,Cloudflare Wokersite/Pages 等提供的托管服务,我们无需任何服务器资源就能拥有展示和记录自己的一片空间。
本文默认您已懂得域名解析和简单的 GitHub 操作。
安装
安装本地环境
- 下载安装 Node.js;
- 下载安装 gitshell;
安装 Hexo
安装非常简单。
新建一个用于存放网站的文件夹,在文件夹中右击,选择在 git bash 中运行:
当然你也可以通过系统自带命令行工具,如 Windows 系统在 CMD 中通过
cd C:\desktop\hexo
来到这个文件夹并运行以上命令。初始化 Hexo
- 直接运行初始化命令:
- 安装组件:
- 清除缓存:
- 生成网站:
- 部署到本地服务器:
在浏览器输入地址 localhost:4000 ,你应该可以看到范例网站了。
配置文件
注意,Hexo 5.0 的主题安装以及主题配置文件有所更新,但向下兼容,所以仍支持以下方法。感兴趣可以查看这篇文章:Hexo 5.0.0 正式发布
你可以到官方主题站找到喜欢的主题:Themes ,下载即可。
Hexo 网站有两个
_config.yml
配置文件。- 一个在 Hexo 文件夹根目录,这是站点配置文件,用于配置网站名称,url 和部署网站等;

- 另一个在 themes 主题文件夹的每个主题内,你找到的主题放在这个 themes 文件夹即可(同时在上述
_config.yml
配置文件的theme:
字段填写主题文件夹名)。这个配置文件包含目录结构,评论和访问统计等具体细节内容。

部署
配合主题文档,在配置文件内修改相关内容。在 source/_posts 文件夹内新建
.md
格式的 Markdown 文档并创作。接着生成内容,预览。
确认好后即可部署到远程服务器。
这里以 GitHub Pages 为例。
你网站的全部内容都在
public
文件夹内,只需将这里的内容放在 GitHub 仓库,剩下的交给 GitHub 即可。具体可以用:
- GitHub 客户端(没记错网页一次只能上传 100 个文件),直接将生成的网站,即
public
文件夹的内容同步到 GitHub 仓库;
- 也可以通过 Github Actions 实现自动部署(推荐),方法稍后补上;
- 如果你是
命令行大佬,也可以使用 git 命令: 这时会要求您输入密码等信息,您也可以通过生成密钥的方式省去每次输密码的麻烦。具体操作这里不再介绍。 - 在文件夹内右击,git bash 或其它命令行工具中运行如下命令,保存你的 GitHub 账户信息。
- 在站点配置文件中的最后填写 GitHub 路径信息
- 推送到仓库
个性化/访问
访问
你的 GitHub 用户名.github.io
就可以访问网站了。你也可以在 GitHub 对应仓库的设置(Settings)→ GitHub Pages 部分绑定自己的域名(别忘了域名解析,比如添加一个 cname 将域名解析到
你的用户名.github.io
)。再在 source 文件夹内新建一个名为 CNAME
(没有后缀)的文件,并写入你的域名。你也可以在 DNS 服务里添加 A 类解析,将域名解析到:
另外,GitHub Pages 可以直接开启 https 访问,别忘了开启(有时要等一会儿才给开),同时在上面的 CNAME 文件中将域名改成
https://域名
,实现强制跳转。
最后,欢迎来 Telegram 交流:https://t.me/daiseax
Enjoy!
本文采用 CC BY-NC-SA 4.0 许可协议,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者:Dukewill
来源:blog.daisea.com