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

生活 Mar 09, 2020
1

简介

Github

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

Gatsbyjs

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

Netlify

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

Netlify CMS

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

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

如何部署

开发者可以利用Gatsby 自行构建静态网站后,发布到Github+Netlify,然后用Netlify CMS 进行内容管理。也可以在GatsbyjsNetlify CMSNetlifyGithub 官网找到自己喜欢的项目主题 一键部署到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据可完成自动部署并发布到网络。

席一舟

四野八荒,苦茶清禅。渔樵江渚,浊酒西风。 螽斯蓝寿,稀禾芡菱。嬉笑怒骂,行藏自由。 策马悬崖,雕弓满月。惊涛拍岸,毕力遐方。 银鞍白马,一剑寒霜。此生谁料,咸是妙明。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.