关于前端:用Gatby和Netlify创建个人网站

费了好大劲做出的一个toy project，应用Gatby和Netlify部署集体站点，能够做成集体博客或者在线简历。中文网页里对于Gatby和Netlify的信息不太多，心愿能够帮到有趣味尝试的同学。
我的项目代码在我的Git.

Gatsby 是一个基于 React 的收费、开源框架，用于帮忙 开发者构建运行速度极快的 网站 和 应用程序。Netlify 是一个提供动态资源托管的网络平台。

本教程应用gatsby官网提供的一页式网站模板，这里是原作者git链接 lekoarts/gatsby-theme-cara.

大家也能够去Gatsby Starter Library里找本人喜爱的其余模板，之后复制模板中的命令创立文件就能够。

筹备工作：

1. 在Gatsby和Netlify实现注册
2. 曾经装置git
3. 很多很多急躁，以及善用Google ????

???? 筹备开始

1. 创立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

1. 开始运行

进入你的文件夹，开始运行

cd 你的文件夹名字

用npm
npm install // 装置依赖 要等良久……

或者用yarn
yarn // 装置依赖 要等良久……

最初
gatsby develop

1. 创立结束

能够关上浏览器查看你的网页啦 http://localhost:8000
我用的模板长这样：

???? Netlify配置

1. 增加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官网教程