Creating personal websites with Gatby and Netlify

A toy project made with great effort can be made into a personal blog or online resume by deploying a personal site with Gatby and Netlify. There is not much information about Gatby and Netlify in the Chinese Web page. I hope it can help students who are interested in trying.
Project code in my Git.

Gatsby is a free and open source framework based on React, which is used to help developers build websites and applications that run very fast. Netlify is a network platform that provides static resource hosting.

This tutorial uses the one page website template provided by gatsby official website. Here is the git link of the original author lekoarts/gatsby-theme-cara.

You can also go Gatsby Starter Library Find other templates you like, and then copy the commands in the template to create files.

preparation:

Complete registration at Gatsby and Netlify
git is already installed
A lot of patience and good use of Google 😂

🚀 Ready to start

Create Gatsby site

Please register on the official website of Gatsby first, and then install Gatsby globally

npm install -g gatsby-cli

Then create a new site with Gatsby CLI

gatsby new (Your folder name) https://github.com/LekoArts/gatsby-starter-portfolio-cara

ps. in the step of creating a new site, I choose Gatsby starter portfolio Cara in the example. You can change it to your favorite starter

Start running

Enter your folder and start running

cd Your folder name

use npm
npm install // Installation dependency takes a long time

Or use yarn
yarn // Installation dependency takes a long time

last
gatsby develop

Creation complete

You can open the browser to view your web page http://localhost:8000
The template I use looks like this:

🚀 Netlify configuration

Add Netlify CMS

Installation dependency:

npm install --save netlify-cms-app gatsby-plugin-netlify-cms

to configure

We need to deploy from github warehouse to Netlify, so we need to do some basic configuration.

Create a new config. In the static/admin folder YML file. The directory structure is as follows:

├── static
│   ├── admin
│   │   ├── config.yml

Paste the following code into config In 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' }

In Gatsby config JS, add a plug-in < br / >

plugins: [`gatsby-plugin-netlify-cms`]

Upload local files to git warehouse

Create a new warehouse in your Github and finish uploading

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 deployment

5. Deploy to Netlify

·Open Identity and Git Gateway

After opening, your website master account can manage the background from Netlify without repeated modification from git.

In Netlify's site dashboard:

Click Settings > identity and select Enable Identity service
In Registration preferences, select Open or Invite only
Services > git gateway on the left, select Enable Git Gateway