使用 Github + Netlify 搭建 Hexo 博客程序

之前介绍过,如何用 Github 搭建 Hexo 博客程序,也用的一切正常,也教了如何搬到 Netlify 上;这次介绍用 Github + Netlify 结合干净的搭建 Hexo 博客程序教程。

Netlify 简介

简单来说: 它的功能之一就跟我们之前 Hexo 博客的静态托管平台 Github Page一样, 不过,Netlify可比 Github Page 功能多多了,而且速度也快。两者的对比在netlify官网有介绍

Netlify vs Github Page 对比:查看

  • 可以使用 CLI 上传代码
  • 支持自定义域名且自定义域名支持一键开启 https(证书来自 Let’s Encrype)
  • 支持强制让用户通过 https 访问网站(开启后此功能后,http 的访问一律会 301 跳转到 https
  • 支持自动构建
  • 支持重定向(Redirects)和重写(Rewrites)功能
  • 数据通过 HTTP2 协议传输
  • 提供 webhooks 与 API

准备工作

  • Github 账号 官网
  • Netlify 账号(可以使用 Github 进行绑定)
  • 本地 Node.js,npm(安装 Node 自带)环境 官网
  • 本地 Git 环境 官网
  • 自己的域名一个,例如:izpan.com

本教程是在 Mac 环境下完成的。Hexo 官方文档

安装

Github 操作

  • 到 Github 上新建项目,右上角 + 号 -> New Repository
  • Repository name 填写项目名,例如:hexo-netlify

15521439736278

本地操作

  • 下载安装 Hexo ,执行命令:
1
npm install hexo-cli -g
  • 为了后续发布到 Github 中,我们同时也安装:hexo-deployer-git
1
npm install hexo-deployer-git --save
  • 安装完了,可以 hexo -v 查看版本
  • 初始化安装 hexo , hexo-netlify 是文件夹名
1
hexo init hexo-netlify
  • 初始化完了以后,我们本地测试下是否搭建成功,运行后访问:http://localhost:4000
1
hexo s

15521442093252


初始化仓库

1
git init

该命令将创建一个名为 .git 的子目录,其中包含了你初始化的 Git 仓库中所需的文件,这些文件是 Git 仓库的核心。
通过git add 来实现对指定文件的跟踪,然后执行git commit提交:

1
2
git add .
git commit -m 'First commit'

回到之前我们创建 GitHub 仓库完成的页面,复制远程仓库链接,在终端输入,例如:https://github.com/paynezhuang/hexo-netlify.git

1
git remote add origin https://github.com/paynezhuang/hexo-netlify.git

你可以通过 git remote -v 来验证你的链接是否正确。
验证完毕,确认准确无误后,用以下指令推送本地仓库内容至GitHub

1
git push origin master

现在,你的源代码已被成功上传至 GitHub,接下来我们可以通过 Netlify 来发布网站。

发布网站 Netlify

  • 首先去 Netlify 官网 注册账号登录,这里我使用的是 Github 账号直接关联

15521319001813

  • 选择右上角的 New site from Git

15521319664701

  • 这里我选择 Github

15521459057642

  • 这里我们选择 Only select repositories,意思就是只选择一个库:hexo-netlify就行了,不用 All repositories

15521459906676

  • 选择刚刚添加进来的仓库

15521460339965

  • 直接 Deploy site 部署站点

15521461872785

  • 部署完成了,并且成功;如有失败,则看红框的地方;
  • 站点的二级域名:https://youthful-visvesvaraya-4a7453.netlify.com/

15521461872785

  • 是不是跟你刚刚在本地 hexo s 看到的内容一模一样呢
  • DONE
  • 安装部署到此就可以结束了,但是为了更多设置,我们还要做些事情
  • Getting started 就是我们接下来要做的步骤;

自定义域名

  1. 您的站点已部署;
  2. 设置安装自定义域名;
  3. 启用 Https 来保存您的网站;

15521464148793

  • 输入您的自定义域名:izpan.com,并且验证下域名

15521464450517

  • 是的,添加域名

15521467288495

  • 输入自定义域名后,我们肯定还要添加解析的,点击 Check DNS configuration 就可以看到我们要添加的解析记录

15521467597215

15521468094564

  • 第一条就是我们的 CNAME 记录
  • 第二条我看了 IP 是属于国外的,所以我解析了线路给海外默认

三条数据,请针对自己的域名进行解析记录

15521468364177

15521468848817

  • 设置完了以后,可以看到之前的警告 ⚠️ Check DNS configuration 已经没了

开启 Https

  • 往下拉,可以看到我们的 HPPTS 选项,这里开启站点的 Https

15521365903921

  • 我们要做的很简单,点击下 Verify DNS configuration
  • 它这里支持上传自定义的证书,也可以使用自动证书:Let’s Encrypt (90天)
  • 上传自定义证书,可以腾讯云、阿里云进行申请 Symantec (一年)证书(这里不做演示)

15521366648775

  • DNS verification was successful 成功,耐心稍等 Https 证书生效,最后结果

15521402659106

15521372525708

补充操作

  • 在自定义域名下方有个:How to redirect the default Netlify subdomain to your primary domain,意思就是如何将默认域名重定向为主域名,点击查看里面的内容就可以看到教你怎么做了。详细文档

15521470644576

15521476062986

  • 完成所有部署的截图,可以看到红框一的二级域名已经变成了自定义的域名,并且是 Https
  • 红框二是 Netlify 自动同步 Github 仓库的历史

常用命令

在建站過程中,你可能最常需要用到以下指令

1
2
3
hexo n #新增新內容
hexo g #生成静态文件
hexo d #部署 #可与hexo g合并一起使用 hexo d -g