Hello Netlify

本来博客一直是部署在 GitHub Pages 的,但是经常抽风,前两天偶然知道 Netlify 同样可以部署静态页面、持续集成、CDN,而且速度比 github 要快。在网上搜索了一下评价不错,便决定尝试一下。网上对 Netlify 的介绍很多,这里就不再赘述,和 GitHub Pages 的对比可以在 这里 查看。还有一个原因就是不知道为啥 GitHub 屏蔽了百度的爬虫,所以就不能被百度索引(害得我折腾了很久,至于为什么屏蔽,咱也不敢问)。

说明

  1. 博客原仓库名username.github.io建议更改为blog等名字,毕竟咱已经要换到 Netlify 了,占着那个二级域名也没啥用对不对。
    友情提醒:换之后其他项目使用的 GitHub Pages 链接有可能也需要替换,酌情处理。
  2. 我的博客写作是在hexo分支下完成,部署到master分支,这些就不改动了,网上有些教程是选择source或者public文件夹,建议使用我这种两个分支的方式来完成。

部署到 Netlify

注册

Netlify 官网注册一个账户,随便选择一种方式就好了。

授权

点击 New site from Git

点击 New site from Git

选择站点托管在什么程序,这里选择 GitHub

选择站点托管在什么程序,这里选择 GitHub

然后弹出授权页面,建议选择第二个选项也就是选择能查看什么 repo,如果以后想要更改可以去 GitHub 的设置中 更改。(因为我已经授权过了,所以没有截图)

部署

接下来就讲一下部署的三种方式:

Netlify 会自动检测 repo 配置,如果检测到 hexo 就只需要改一下 build command。推荐使用这种方式。

Create a new site

以前我们使用hexo-deployer-git工具将博客部署到 GitHub 上,部署到 Netlify 同样选择以前部署的分支,在本地运行hexo d部署到 git 后 Netlify 会自动部署。
选择分支名字不要在意,我这里是master分支,只要是以前 GitHub Pages 的分支就对了。

Create a new site

这种方式只是在本地部署到 repo/public 文件夹下然后 push,部署时选择这个文件夹就可以了。(这种方式不推荐)

Create a new site

Netlify 提供了netlify.toml来定义如何构建和部署站点,上面的配置也可以在这个文件中定义。想要了解的可以看看 官方介绍。(后面会讲到利用这个文件重定向)

过一会儿就部署成功啦,如果有错误也会提醒的,对着改改就好啦。

deployed

修改前缀

Netlify 默认是给一个随机的二级域名,如果想自定义的话可以去 Site settings,修改二级域名的前缀。

自定义域名

填写域名

点击自定义域名然后填写域名就好啦。

填写域名

解析

点击 Check DNS configuration 然后根据提示提示去域名供应商那里添加两条别名记录就可以啦。

@ CNAME xxxx.netlify.com
www CNAME xxxx.netlify.com

建议使用 ANAME 解析域名,嫌麻烦的话可以使用 Netlify DNS。

不建议使用使用 A 记录!使用后就用不了全站 CDN 了。

等待一会儿刷新没有 Check DNS configuration 就说明成功啦

success

证书

点击 Verify DNS configuration 就可以使用自动生成的证书啦,也可以选择上传自己的证书。等待一会儿就 OK 啦

重定向

redirects

虽然官方在域名管理中给出了域名重定向的教程,但是我实测是没有用的。按照官方教程将_redirects文件放到 hexo 分支source/文件夹下发现并不会自动生成到public/文件夹下,在_config.yml中设置skip_render也没有用,官方只提到使用 jekyll 需要注意额外设置以避免跳过_开头的文件。既然如此,就使用netlify.toml好了,用 toml 还强大一点。ntlify.toml详细教程可以去 官网 查看。重定向实现过程如下:

首先在 hexo 分支source/下新建netlify.toml文件,然后写入以下内容(需将域名替换为自己的):

source/netlify.toml
[[redirects]]
from = "https://sitename.netlify.com/*"
to = "https://abc.com/:splat"
status = 301
force = true

写入后部署到 Netlify,然后就发现使用 sitename.netlify.com 访问就会自动重定向到自定义域名了。

结束,撒花!

  • 本文作者: 月洒清辉映海棠
  • 本文链接: https://moonbegonia.xyz/Hello-Netlify/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!