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

教程

Hexo 是一个非常强大的静态网站系统。配合丰富多样的主题,可以非常方便的搭建博客或个人网站。借助 GitHub Pages,Cloudflare Wokersite/Pages 等提供的托管服务,我们无需任何服务器资源就能拥有展示和记录自己的一片空间。

本文默认您已懂得域名解析和简单的 GitHub 操作。

安装

安装本地环境

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

安装 Hexo

安装非常简单。

新建一个用于存放网站的文件夹,在文件夹中右击,选择在 git bash 中运行:

1
2
3
npm install hexo-cli -g #有 warn 也没事
npm install hexo --save
hexo -v #查看是否成功,成功的话会有版本号

当然你也可以通过系统自带命令行工具,如 Windows 系统在 CMD 中通过 cd C:\desktop\hexo 来到这个文件夹并运行以上命令。

初始化 Hexo

  1. 直接运行初始化命令:

    1
    hexo init
  2. 安装组件:

    1
    npm install
  3. 清除缓存:

    1
    hexo clean
  4. 生成网站:

    1
    hexo g
  5. 部署到本地服务器:

    1
    hexo s

在浏览器输入地址 localhost:4000 ,你应该可以看到范例网站了。

配置文件

注意,Hexo 5.0 的主题安装以及主题配置文件有所更新,但向下兼容,所以仍支持以下方法。感兴趣可以查看这篇文章:Hexo 5.0.0 正式发布

你可以到官方主题站找到喜欢的主题:Themes ,下载即可。

Hexo 网站有两个 _config.yml 配置文件。

  1. 一个在 Hexo 文件夹根目录,这是站点配置文件,用于配置网站名称,url 和部署网站等;

    https://cdn.jsdelivr.net/npm/dukewill@0.0.17/images/2.png

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

    https://cdn.jsdelivr.net/npm/dukewill@0.0.17/images/3.png

部署

配合主题文档,在配置文件内修改相关内容。在 source/_posts 文件夹内新建 .md 格式的 Markdown 文档并创作。

接着生成内容,预览。

确认好后即可部署到远程服务器。

这里以 GitHub Pages 为例。

你网站的全部内容都在 public 文件夹内,只需将这里的内容放在 GitHub 仓库,剩下的交给 GitHub 即可。

具体可以用:

  • GitHub 客户端(没记错网页一次只能上传 100 个文件),直接将生成的网站,即 public 文件夹的内容同步到 GitHub 仓库;
  • 也可以通过 Github Actions 实现自动部署(推荐),方法稍后补上;
  • 如果你是命令行大佬,也可以使用 git 命令:

    1. 在文件夹内右击,git bash 或其它命令行工具中运行如下命令,保存你的 GitHub 账户信息。

      1
      2
      git config --global user.name "GitHub 用户名"
      git config --global user.email "GitHub 邮箱"
    2. 在站点配置文件中的最后填写 GitHub 路径信息

      1
      2
      3
      4
      5
      6
      # Deployment
      ## Docs: https://hexo.io/docs/deployment.html
      deploy:
      type: git
      repo: https://github.com/my/hexo.git #填写你自己 GitHub 仓库的完整路径,末尾加.git
      branch: master #分支
    3. 推送到仓库

      1
      2
      npm install hexo-deployer-git --save
      hexo d

      这时会要求您输入密码等信息,您也可以通过生成密钥的方式省去每次输密码的麻烦。具体操作这里不再介绍。

个性化/访问

访问 你的 GitHub 用户名.github.io 就可以访问网站了。

你也可以在 GitHub 对应仓库的设置(Settings)→ GitHub Pages 部分绑定自己的域名(别忘了域名解析,比如添加一个 cname 将域名解析到 你的用户名.github.io )。再在 source 文件夹内新建一个名为 CNAME (没有后缀)的文件,并写入你的域名。

你也可以在 DNS 服务里添加 A 类解析,将域名解析到:

1
2
3
4
185.199.111.153
185.199.110.153
185.199.109.153
185.199.108.153

另外,GitHub Pages 可以直接开启 https 访问,别忘了开启(有时要等一会儿才给开),同时在上面的 CNAME 文件中将域名改成 https://域名,实现强制跳转。

https://cdn.jsdelivr.net/npm/dukewill@0.0.17/images/4.png

最后,欢迎来 Telegram 交流:https://t.me/daiseax

Enjoy!

快速安装 Hexo 静态网站并部署到 GitHub Pages
本文作者:
Dukewill
发布于
2020-12-18
许可协议
转载或引用本文时请遵守许可协议,注明出处,不得用于商业用途!

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。