DaiseaX
DaiseaX
快速安装 Hexo 静态网站并部署到 GitHub Pages

快速安装 Hexo 静态网站并部署到 GitHub Pages

Tags
Hexo
GitHub Pages
GitHub Actions
域名解析
Published
Published December 18, 2020
Author
Dukewill
Hexo 是一个非常强大的静态网站系统。配合丰富多样的主题，可以非常方便的搭建博客或个人网站。借助 GitHub Pages，Cloudflare Wokersite/Pages 等提供的托管服务，我们无需任何服务器资源就能拥有展示和记录自己的一片空间。
本文默认您已懂得域名解析和简单的 GitHub 操作。

安装

安装本地环境

  1. 下载安装 Node.js；
  1. 下载安装 gitshell；

安装 Hexo

安装非常简单。
新建一个用于存放网站的文件夹，在文件夹中右击，选择在 git bash 中运行：
npm install hexo-cli -g #有 warn 也没事
npm install hexo --save
hexo -v #查看是否成功，成功的话会有版本号
当然你也可以通过系统自带命令行工具，如 Windows 系统在 CMD 中通过 cd C:\desktop\hexo 来到这个文件夹并运行以上命令。

初始化 Hexo

  1. 直接运行初始化命令：
      2. hexo init
  1. 安装组件：
      2. npm install
  1. 清除缓存：
      2. hexo clean
  1. 生成网站：
      2. hexo g
  1. 部署到本地服务器：
      2. hexo s
在浏览器输入地址 localhost:4000 ，你应该可以看到范例网站了。

配置文件

注意，Hexo 5.0 的主题安装以及主题配置文件有所更新，但向下兼容，所以仍支持以下方法。感兴趣可以查看这篇文章：Hexo 5.0.0 正式发布
你可以到官方主题站找到喜欢的主题：Themes ，下载即可。
Hexo 网站有两个 _config.yml 配置文件。
  1. 一个在 Hexo 文件夹根目录，这是站点配置文件，用于配置网站名称，url 和部署网站等；
      2. notion image
  1. 另一个在 themes 主题文件夹的每个主题内，你找到的主题放在这个 themes 文件夹即可（同时在上述 _config.yml 配置文件的 theme: 字段填写主题文件夹名）。这个配置文件包含目录结构，评论和访问统计等具体细节内容。
      2. notion image

部署

配合主题文档，在配置文件内修改相关内容。在 source/_posts 文件夹内新建 .md 格式的 Markdown 文档并创作。
接着生成内容，预览。
确认好后即可部署到远程服务器。

这里以 GitHub Pages 为例。

你网站的全部内容都在 public 文件夹内，只需将这里的内容放在 GitHub 仓库，剩下的交给 GitHub 即可。
具体可以用：
  • GitHub 客户端（没记错网页一次只能上传 100 个文件），直接将生成的网站，即 public 文件夹的内容同步到 GitHub 仓库；
  • 也可以通过 Github Actions 实现自动部署（推荐），方法稍后补上；
  • 如果你是命令行大佬，也可以使用 git 命令： 这时会要求您输入密码等信息，您也可以通过生成密钥的方式省去每次输密码的麻烦。具体操作这里不再介绍。
      1. 在文件夹内右击，git bash 或其它命令行工具中运行如下命令，保存你的 GitHub 账户信息。
          2. git config --global user.name "GitHub 用户名"git config --global user.email "GitHub 邮箱"
      1. 在站点配置文件中的最后填写 GitHub 路径信息
          2. # Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo: https://github.com/my/hexo.git #填写你自己 GitHub 仓库的完整路径，末尾加.gitbranch: master #分支
      1. 推送到仓库
          2. npm install hexo-deployer-git --savehexo d

个性化/访问

访问 你的 GitHub 用户名.github.io 就可以访问网站了。
你也可以在 GitHub 对应仓库的设置（Settings）→ GitHub Pages 部分绑定自己的域名（别忘了域名解析，比如添加一个 cname 将域名解析到 你的用户名.github.io ）。再在 source 文件夹内新建一个名为 CNAME （没有后缀）的文件，并写入你的域名。
你也可以在 DNS 服务里添加 A 类解析，将域名解析到：
185.199.111.153
185.199.110.153
185.199.109.153
185.199.108.153
另外，GitHub Pages 可以直接开启 https 访问，别忘了开启（有时要等一会儿才给开），同时在上面的 CNAME 文件中将域名改成 https://域名，实现强制跳转。
notion image
最后，欢迎来 Telegram 交流：https://t.me/daiseax
Enjoy!
 
💡
本文采用 CC BY-NC-SA 4.0 许可协议，著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者：Dukewill 来源：blog.daisea.com