LogoNavigate back to the homepage

Gatsby Site upgrades and changes Novela Theme, integrates with Netlify and Netlify CMS

Yish
April 26th, 2020 · 1 min read

Novela theme

Netlify CMS

I have been having gatsbyJS site from starter, I used gatsby-starter-minimal-blog: Gatsby Starter | GatsbyJS, it’s beautiful, I love it but I think I want to change it sometimes, so I choose GitHub - narative/gatsby-theme-novela: Welcome to Novela, the simplest way to start publishing with Gatsby., here is a demo: Novela by Narative, here is how do I do for its steps.

Upgrade Gatsby and remove minimal blog theme

It’s simple to take it.

1"dependencies": {
2- "@lekoarts/gatsby-theme-minimal-blog": "^2.2.9",
3+ "@narative/gatsby-theme-novela": "^0.14.2",

Next, you need to update gatsby-config.js

1require(`dotenv`).config({
2 path: `.env`,
3})
4
5module.exports = {
6 siteMetadata: {
7 title: `Yish`,
8 name: `Yish`,
9 siteUrl: `https://yish.dev`,
10 description: `A dive into interesting things, communications, and technologies.`,
11 hero: {
12 heading: `A dive into interesting things, communications, and technologies.`,
13 maxWidth: 652,
14 },
15 social: [
16 {
17 name: `twitter`,
18 url: `https://twitter.com/yishlai`,
19 },
20 {
21 name: `github`,
22 url: `https://github.com/Mombuyish`,
23 },
24 ],
25 },
26 plugins: [
27 {
28 resolve: "@narative/gatsby-theme-novela",
29 options: {
30 contentPosts: "content/posts",
31 contentAuthors: "content/authors",
32 basePath: "/",
33 sources: {
34 local: true,
35 contentful: false
36 },
37 authorsPage: true
38 },
39 },
40 {
41 resolve: `gatsby-plugin-manifest`,
42 options: {
43 name: `Yish`,
44 short_name: `Yish`,
45 start_url: `/`,
46 background_color: `#fff`,
47 theme_color: `#fff`,
48 display: `standalone`,
49 icon: `src/assets/favicon.png`,
50 },
51 },
52 {
53 resolve: `gatsby-plugin-google-analytics`,
54 options: {
55 trackingId: process.env.GOOGLE_ANALYTICS_ID,
56 },
57 },
58 `gatsby-plugin-netlify-cms`
59 ],
60};

And here is a point, the novela theme needs adding author.yml file, so we’re doing for, but we need to be compatible Netlify CMS, so here is a wired hierarchy content/authors/authors/yish.yml Update starter to support Netlify CMS out of the box by bharrisau · Pull Request #9 · narative/gatsby-starter-novela · GitHub

1name: Yish
2bio: |
3 Yish, The Minimalist & Tech/Team Lead, Engineer.
4avatar: ./avatars/eoYUN3Ca_400x400.jpg
5social:
6 - url: https://github.com/Mombuyish
7 - url: https://twitter.com/yishlai
8featured: true

Netlify CMS settings and GitHub OAuth

There are several settings for it

  1. Create Github OAuth Apps, Settings>Developer settings>New OAuth App
  2. Use OAuth provider tokens on your site | Netlify Docs, Authorization callback URL is https://api.netlify.com/auth/done
  3. Create /static/admin/config.yml to set admin configurations.
1backend: # Set up your backend
2 name: github
3 branch: master
4 repo: YourVendor/YourRepo
5 site_domain: YourCustomDomain
6 base_url: https://api.netlify.com
7 auth_endpoint: auth
8
9local_backend: true # Optional if you want to use the local proxy mode
10
11publish_mode: editorial_workflow
12media_folder: media # I'm not using these default media directories at the moment.
13public_folder: /media
14
15collections:
16 - name: "posts"
17 label: "Posts"
18 folder: "content/posts"
19 create: true
20 delete: true
21 path: "{{slug}}/index"
22 slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
23 media_folder: "images"
24 public_folder: "./images"
25 fields:
26 - { label: "Title", name: "title", widget: "string" }
27 - { label: "Author", name: "author", widget: "relation", collection: "authors", valueField: "name", searchFields: ["name"] }
28 - { label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD", dateFormat: "YYYY-MM-DD", timeFormat: false }
29 - { label: "Excerpt", name: "excerpt", widget: "string", required: false }
30 - { label: "Hero", name: "hero", widget: "image" }
31 - { label: "Body", name: "body", widget: "markdown" }
32 - name: "authors"
33 label: "Authors"
34 folder: "content/authors/authors"
35 create: true
36 delete: true
37 format: "yml"
38 identifier_field: "name"
39 media_folder: "avatars"
40 public_folder: "./avatars"
41 editor:
42 preview: false
43 fields:
44 - { label: Name, name: name, widget: string }
45 - { label: Bio, name: bio, widget: string }
46 - { label: Featured, name: featured, widget: boolean, default: false }
47 - { label: Avatar, name: avatar, widget: image }
48 - { label: Social, name: social, widget: list, collapsed: false, field: { label: URL, name: url, widget: string } }
  1. Navigate to Netlify, configure settings.

    cleanshot 2020 04 26 at 18 44 03

    Pass your Github OAuth ClientID and secret.

  2. And allow access Netlify CMS to GitHub, so we need to enable the gateway

    cleanshot 2020 04 26 at 18 46 15

All done, give it a try, it’s simple and easy to use, modern.

More articles from Yish

One-Click app builds WordPress and Ghost, binding the customize domain in DigitalOcean

In this article, I will show you how do I install Ghost and WordPress in Digitalocean via marketplace one-click apps, it’s pretty simple and ease to use, but we still do a few things to configure about customize domain.

April 24th, 2020 · 1 min read

How does config:cache work in Laravel?

We all know if you want to accelerate performance in laravel, you can do a lot of things, one of the things is cache what you think, likely route, config, view, etc, but how does it work in laravel?

February 23rd, 2020 · 1 min read
© 2019–2020 Yish
Link to $https://twitter.com/yishlaiLink to $https://github.com/Mombuyish