神代綺凛の随波逐流

[Hexo + GitHub Pages] 零成本的 HTTPS 建站大法

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »

本文比较适合初次尝试这样建站的萌新阅读,借助 GitHub Pages 平台,我们可以将自己的静态网站零成本托管到 GItHub,并且还可以使用自己的域名,甚至支持自动帮你申请 SSL 证书以开启 HTTPS 访问,可以说是非常造福射惠了~

Head Pic: 「そらたび」/「凪白みと」[pixiv]

GitHub Pages

2018年5月1日,GitHub 正式宣布 GitHub Pages (*.github.io) 支持自定义域名 HTTPS,可以自动帮你申请 Let's Encrypt 的 SSL 证书并自动部署、续期,这就非常劲爆了

这意味着你可以不用花钱去租赁主机,仅仅需要购买一个域名(如果你愿意使用 GitHub 给的 *.github.io 域名,那甚至连域名钱都不用花了),就可以享受到建站到 SSL 的全套服务,而且访问速度也不赖

当然,只限纯静态网站(仅 html + css + js),关于这个,我仅知道也只能推荐 Hexo,用的人也蛮多的

前言

本文属于启蒙型文章,因为我不用 Hexo,所以我没办法写出更深层次的教程。主要目的还是为了介绍 GitHub Pages 的 HTTPS 要点,Hexo 算是附赠的(什么鬼

我会推荐写得好的 Hexo 搭建教程文章,并补充一些关键点,以及说明 GitHub Pages 的建立。

GitHub Pages 的建立

如果你没有 GitHub 帐号那当然得注册,进入首页后点击右上角加号,“New repository”

接下来是很关键的一点,Name 必须填写成yourname.github.io的形式,将yourname替换成你的用户名,例如下图中我自己的账户的用户名是ykilin

接着,进入新建好的项目页面,点击右侧的“Setting”进入设置页面

往下拉找到“GitHub Pages”,将其开启,然后你就可以在“Custom domain”中填入你自己的域名了,记得点“Save”

以下是注意点:

  1. 设置好之后,请为你填写的那个自定义域名创建 CNAME 记录,指向yourname.github.io(将yourname替换成你的用户名)
  2. 勾选“Enforce HTTPS”即可以开启我在文章开头提到的“GitHub Pages 支持自定义域名 HTTPS”啦!
    不过如果你是刚设置好自定义域名,这个选项应该是灰色的,因为你的自定义域名的 CNAME 记录并没不会那么快生效
    你需要做的仅仅是等待,一般短则几十分钟长则几个小时,等 GitHub 认为你的解析生效了,这个勾就可以勾上了

然后你可以试着访问一下你的自定义域名,应该就有 HTTPS 并且会显示 GitHub Pages 默认页了

关于 Hexo

Hexo 是一个快速、简洁且高效的博客框架,使用 Markdown(或其他渲染引擎)解析文章

其基于 Node.js,使用上(例如新建文章)可依靠命令行快速完成

准备工作

*这些都是对于 Windows 的

Node.js

首先需要安装 Node.js,到官网 https://nodejs.org/ ,点击左侧的绿色按钮下载安装包并安装即可。

安装过程中“Custom Setup”有一个选项是要不要添加到系统环境变量(英文,注意一下有没有“Add to PATH”这个单词),一定要选

Git

直接去 Git 官网下载 https://git-scm.com/download/win

安装步骤及环境变量设置请参考 windows安装git和环境变量配置

Hexo 的使用

推荐以下几篇文章,请注意,你需要做的是参考、理解、根据你的实际需要效仿,而不是完全照搬步骤

  1. 手把手教你用 Hexo+Github 搭建属于自己的博客
  2. Hexo配合github搭建网站
  3. 通过Git将Hexo博客部署到服务器

自动化构建

部署 Hexo 等静态博客的过程其实都大体相同:
写 Markdown -> 构建 -> 推送至仓库

自从有了 GitHub Action 后,我们可以将构建这一重复性工作交给 GitHub 来进行,这样一来我们就只需要写好 Markdown 然后直接推送到仓库就行了

关于 GitHub Action 的介绍可以查看这篇文章

[post cid="2032" /]