共计 1935 个字符,预计需要花费 5 分钟才能阅读完成。
费了好大劲做出的一个 toy project,应用 Gatby 和 Netlify 部署集体站点,能够做成集体博客或者在线简历。中文网页里对于 Gatby 和 Netlify 的信息不太多,心愿能够帮到有趣味尝试的同学。
我的项目代码在我的 Git.
Gatsby 是一个基于 React 的收费、开源框架,用于帮忙 开发者构建运行速度极快的 网站 和 应用程序。Netlify 是一个提供动态资源托管的网络平台。
本教程应用 gatsby 官网提供的一页式网站模板,这里是原作者 git 链接 lekoarts/gatsby-theme-cara.
大家也能够去 Gatsby Starter Library 里找本人喜爱的其余模板,之后复制模板中的命令创立文件就能够。
筹备工作:
- 在 Gatsby 和 Netlify 实现注册
- 曾经装置 git
- 很多很多急躁,以及善用 Google ????
???? 筹备开始
- 创立 Gatsby 站点
请先去 Gatsby 官网实现注册,之后全局装置 Gatsby
npm install -g gatsby-cli
而后用 Gatsby CLI 创立新站点
gatsby new (你的文件夹名字) https://github.com/LekoArts/gatsby-starter-portfolio-cara
ps. 创立新站点这一步,示例中我选用的是 gatsby-starter-portfolio-cara,大家能够换成本人喜爱的 starter
- 开始运行
进入你的文件夹,开始运行
cd 你的文件夹名字
用 npm
npm install // 装置依赖 要等良久……
或者用 yarn
yarn // 装置依赖 要等良久……
最初
gatsby develop
- 创立结束
能够关上浏览器查看你的网页啦 http://localhost:8000
我用的模板长这样:
???? Netlify 配置
- 增加 Netlify CMS
装置依赖:
npm install --save netlify-cms-app gatsby-plugin-netlify-cms
配置
咱们须要从 github 仓库部署到 Netlify,因而要做一些根本配置。
在 static/admin 文件夹里新建 config.yml 文件。目录构造如下:
├── static
│ ├── admin
│ │ ├── config.yml
把以下代码粘贴到 config.yml 中:
backend:
name: git-gateway
branch: main
media_folder: static/img
public_folder: /img
collections:
- name: 'blog'
label: 'Blog'
folder: 'content/blog'
create: true
slug: 'index'
media_folder: ''public_folder:''
path: '{{title}}/index'
editor:
preview: false
fields:
- {label: 'Title', name: 'title', widget: 'string'}
- {label: 'Publish Date', name: 'date', widget: 'datetime'}
- {label: 'Description', name: 'description', widget: 'string'}
- {label: 'Body', name: 'body', widget: 'markdown'}
在 gatsby-config.js
中,增加插件 <br/>
plugins: [`gatsby-plugin-netlify-cms`]
本地文件上传到 git 仓库
在你的 Github 新建一个仓库,而后实现上传
git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main
???? Netlify 部署
5. 部署到 Netlify
登录 Netlify 点击 ‘New Site from Git’.
· 开启 Identity 和 Git Gateway
开启后,你的网站主账户能够从 Netlify 治理后盾,不须要重复从 git 进行批改。
在 Netlify 的 site dashboard 中:
点击 Settings > Identity, 抉择 Enable Identity service.
在 Registration preferences, 抉择 Open 或者 Invite only.
左侧Services > Git Gateway, 抉择 Enable Git Gateway.
· 更新你的网站
登录你的网址 /admin/ 点击 New Blog 公布新文章
我创立的 demo 在这里
参考资料:
Netlify 官网指南
Gasby 官网教程