用Github+Gatsbyjs+Nelify+NetlifyCMS搭建网站

iNote-

简介

Github

Github 是全球最大的代码管理仓库和同性社交网站,被微软收购后,愈发财大气粗,个人免费账户也可以获得无限免费空间和私密仓库,为大家储存项目资料提供了优质空间。利用Github page 也可以建立博客,但在国内访问速度一般。

Gatsbyjs

Gatsby是基于React的免费开源框架,可帮助开发人员构建快速的静态网站和应用。

Netlify

Netlify 是美国一家专注于提供静态网站托管服务的公司,通过自己的内容分发网络,将提前建立好的静态页面呈献给访客,节约了加载的时间。免费账户提供每月100G流量。国内访问速度很快。

Netlify CMS

Netlify CMS 是 Netlify 推出的用于管理静态网站的CMS系统。

得益于四者良好的开源生态理念,把他们结合使用,开发者可以在 5 分钟之内构建性能卓越、响应迅捷的静态网站。

如何部署

开发者可以利用Gatsby 自行构建静态网站后,发布到Github+Netlify,然后用Netlify CMS 进行内容管理。也可以在GatsbyjsNetlify CMSNetlify 或 Github 官网找到自己喜欢的项目主题 一键部署到Netlify。找到下图图标单击即可。

自定义

通用自定义

  1. 在 Netlify 部署成功后,在netlify 后台完成自定义域名和ssl 。
  2. 开启Identity
  3. 将用户注册Registration preferences 设置为仅邀请,否者Netlify 客户端是免费开发注册的。
  4. 启用 Git Gateway,以便自动部署Github 更改和利用Netlify Github 更改Github。
  5. 登录Github 可以在Repositories 中找到对应项目,根据项目性质将Repositories 改为私密或公开。
  6. 利用Git 或 Github Desktop 把项目 Clone 到本地。根据主题说明,对项目进行个性化设置,一般配置 Gatsby-config.jsconfig.jsglobal.js。配置完成后,将项目提交到 Github。

如果要自定义分享、评论、谷歌统计、站内搜索和谷歌 AdSense 等功能,可以调用Gatsby 对应插件。如果没有对应插件,也可以利用 Netlify 后台 Build & depoly 中的 Snippet injection 功能,实现功能管理。以国产极简评论系统 Valine 为例。

复制插入Snippet injection

在想要放置评论框的对应位置,插入代码,提交到Github,等待生效即可。

  1. 很多国外 Gatsby 主题多使用 Algolia 作为站内搜索应用,使用 uploadcare 作为图床。需要把 Algolia APP ID 、Search KeyAdmin Key 以环境变量的形式在Netlify Build & depoly 中的 Environment variables 中进行设置。

管理文章

  1. 可以登录Netlify CMS 后台 youre domain/admin 进行文章管理。
  2. 也可以根据主题文章模板,在本地用Markdown 编辑后, 推送到 Github。
  3. 两种方式提交文章,Netlify据可完成自动部署并发布到网络。
发表于2019-10-06, 更新于2024-05-20