乐趣区

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

jiezi

费了好大劲做出的一个 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 官网教程

退出移动版