gatsby starter gcn

gatsby-starter-gcn

Templat pemula untuk membangun situs web statis yang menakjubkan dengan Gatsby, Contentful, dan Netlify. Terinspirasi oleh gatsby-contentful-starter.

Fitur

• Integrasi konten dengan konten placeholder siap pakai
• Integrasi Netlify termasuk formulir kontak yang dibuat sebelumnya
• Desain responsif minimal - dibuat untuk disesuaikan atau dibongkar
• Logika paginasi
• UI Tema
• Komponen Ramah SEO
  • Dukungan berbagi OpenGraph
  • Pembuatan Peta Situs
• Google Analitik
• Aplikasi Web Progresif
• Dukungan Luring
• Modul Gatsby Standard untuk menghubungkan Javascript dengan StandardJS
• Dukungan Stylelint untuk Komponen Bergaya untuk menghubungkan CSS di JS

Demo

https://gcn.netlify.app/

Memulai

Memasang

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

Atau melalui Gatsby CLI

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

Pengaturan Berisi

1. Daftar ke Contentful dan buat ruang kosong baru

2. yarn run setup

3. Masukkan informasi yang diminta untuk ruang Contentful Anda yang ditemukan di sini: app.contentful.com → Pengaturan Ruang → Kunci API . Anda harus menyediakan kunci API standar (tab pertama) dan kunci manajemen (tab kedua).

Kustomisasi

Data Situs Web

Edit data siteMeta di /src/gatsby-config.js

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

Catatan: Jika Anda tidak melihat perubahan terlihat saat mengembangkan secara lokal, Anda mungkin perlu menjalankan yarn clean diikuti dengan memulai ulang server melalui yarn develop .

UI Tema

Sunting /src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

Menggunakan Standar Gatsby

1. Periksa kesalahan kode Anda dengan cepat menggunakan skrip yarn test
2. Anda dapat melihat README Standar Gatsby untuk detail tentang cara mengintegrasikan modul Gatsby Standard, Stylelint, dan Prettier yang disertakan dalam proyek ini ke dalam editor teks Anda

Konten dan SEO

1. Anda dapat mengganti file share.jpg dan favicon.png di direktori static/images .
2. Deskripsi meta didefinisikan dalam Contentful. Jika Anda memilih untuk membiarkan kolom ini kosong pada postingan baru, kutipan 320 karakter dari postingan/halaman akan digunakan.

Penyebaran

Penerapan Netlify secara manual

1. Jalankan gatsby build

2. Tarik dan letakkan folder /public/ ke Netlify

Penerapan Netlify Dari Git (Disarankan)

1. Situs web Netlify baru dari Git

2. Terhubung dengan GitHub dan pilih repo Anda

3. Navigasikan ke Netlify: Pengaturan → Bangun & Terapkan → Bangun Variabel Lingkungan . Tambahkan variabel lingkungan berikut menggunakan Space ID dan Content Delivery API - token akses dari Contentful. Selain itu jika diinginkan Anda dapat memasukkan ID Google Analytics. Variabel harus diberi nama persis seperti ini agar dapat berfungsi dengan baik.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. Navigasi ke Netlify: Menyebarkan . Klik Trigger deploy untuk memicu penerapan secara manual guna mengonfirmasi bahwa situs web berhasil dibuat menggunakan variabel lingkungan build Anda. Pada titik ini perlu diketahui bahwa setiap kali Anda mendorong untuk master penerapan akan secara otomatis dimulai dan dipublikasikan ke produksi.

Pengaturan Tambahan

Webhook yang Berisi (Opsional)

1. Navigasikan ke Netlify: Pengaturan → Bangun & Terapkan → Bangun kait . Buat kait bangunan baru.

2. Navigasikan ke Contentful: app.contentful.com → Pengaturan Ruang → Webhook . Buat webhook menggunakan URL build Netlify yang baru saja Anda buat dan konfigurasikan peristiwa mana yang harus memicu build pada produksi. Misalnya yang berikut ini akan membangun kembali situs web produksi setiap kali postingan atau halaman dipublikasikan, tidak dipublikasikan, atau dihapus:

Pemberitahuan Formulir Netlify (Opsional)

1. Arahkan ke Netlify: Formulir → Pemberitahuan

2. Klik dropdown tambahkan notifikasi dan pilih metode notifikasi yang Anda inginkan.

Tip Berguna

• Jika Anda mengedit ruang Contentful saat menjalankan yarn develop Anda harus menghentikannya dan menjalankan kembali perintah untuk melihat perubahannya terlihat. Misalnya postingan atau halaman baru tidak akan otomatis muncul sampai website telah dibangun kembali.
• JANGAN simpan token akses Contentful atau id ruang Anda di mana pun di GitHub. Perlakukan mereka seperti kata sandi.