gatsby starter gcn

gatsby-starter-gcn

เทมเพลตเริ่มต้นสำหรับสร้างเว็บไซต์คงที่ที่น่าทึ่งด้วย Gatsby, Contentful และ Netlify แรงบันดาลใจจาก gatsby-contentful-starter

คุณสมบัติ

• การผสานรวมเนื้อหากับเนื้อหาตัวยึดตำแหน่งที่พร้อมใช้งาน
• การบูรณาการ Netlify รวมถึงแบบฟอร์มการติดต่อที่สร้างไว้ล่วงหน้า
• การออกแบบที่ตอบสนองน้อยที่สุด - สร้างมาเพื่อปรับแต่งหรือแยกออกจากกัน
• ตรรกะการแบ่งหน้า
• ธีม UI
• องค์ประกอบที่เป็นมิตรกับ SEO
  • รองรับการแชร์ OpenGraph
  • การสร้างแผนผังเว็บไซต์
• Google Analytics
• แอปพลิเคชันเว็บแบบก้าวหน้า
• การสนับสนุนออฟไลน์
• โมดูล Gatsby Standard สำหรับ Linting Javascript ด้วย StandardJS
• รองรับ Stylelint สำหรับ Styled Components เพื่อ Lint CSS ใน JS

สาธิต

https://gcn.netlify.app/

เริ่มต้นใช้งาน

ติดตั้ง

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

หรือผ่านทาง Gatsby CLI

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

ตั้งค่าความพึงพอใจ

1. ลงทะเบียนเพื่อรับ Contentful และสร้างพื้นที่ว่างใหม่

2. yarn run setup

3. ป้อนข้อมูลที่ร้องขอสำหรับ Contentful Space ของคุณที่นี่: app.contentful.com → การตั้งค่าอวกาศ → คีย์ API คุณจะต้องระบุทั้งคีย์ API มาตรฐาน (แท็บแรก) และคีย์การจัดการ (แท็บที่สอง)

การปรับแต่ง

ข้อมูลเว็บไซต์

แก้ไขข้อมูล siteMeta ใน /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
  }

หมายเหตุ: หากคุณไม่เห็นการเปลี่ยนแปลงของคุณที่สะท้อนให้เห็นเมื่อพัฒนาในเครื่อง คุณอาจต้องรัน yarn clean ตามด้วยการรีสตาร์ทเซิร์ฟเวอร์ผ่าน yarn develop

ธีม UI

แก้ไข /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' ,
  } ,
}

ใช้มาตรฐาน Gatsby

1. ตรวจสอบโค้ดของคุณอย่างรวดเร็วเพื่อหาข้อผิดพลาดด้วยสคริปต์ yarn test
2. คุณสามารถดู Gatsby Standard README เพื่อดูรายละเอียดเกี่ยวกับวิธีรวมโมดูล Gatsby Standard, Stylelint และ Prettier ที่รวมอยู่ในโปรเจ็กต์นี้เข้ากับโปรแกรมแก้ไขข้อความของคุณ

เนื้อหาและ SEO

1. คุณสามารถแทนที่ไฟล์ share.jpg และ favicon.png ในไดเร็กทอรี static/images
2. คำอธิบายเมตาถูกกำหนดไว้ในเนื้อหา หากคุณเลือกที่จะปล่อยฟิลด์นี้ว่างไว้สำหรับโพสต์ใหม่ ข้อความที่ตัดตอนมาจากโพสต์/เพจความยาว 320 ตัวอักษรจะถูกนำมาใช้แทน

การปรับใช้

การปรับใช้ Netlify ด้วยตนเอง

1. เรียกใช้ gatsby build

2. ลากและวางโฟลเดอร์ /public/ ลงใน Netlify

การปรับใช้ Netlify จาก Git (แนะนำ)

1. เว็บไซต์ Netlify ใหม่จาก Git

2. เชื่อมต่อกับ GitHub และเลือก repo ของคุณ

3. ไปที่ Netlify: การตั้งค่า → สร้าง & ปรับใช้ → สร้างตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้โดยใช้ Space ID และ Content Delivery API - โทเค็นการเข้าถึงจาก Contentful นอกจากนี้ หากต้องการ คุณสามารถป้อนรหัส Google Analytics ได้ ตัวแปรต้องตั้งชื่ออย่างนี้ทุกประการเพื่อให้ทำงานได้อย่างถูกต้อง

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. นำทางไปยัง Netlify: ปรับใช้ . คลิก Trigger deploy เพื่อทริกเกอร์การปรับใช้ด้วยตนเองเพื่อยืนยันว่าเว็บไซต์กำลังสร้างสำเร็จโดยใช้ตัวแปรสภาพแวดล้อมบิลด์ของคุณ ณ จุดนี้ โปรดทราบว่าทุกครั้งที่คุณกดเพื่อ master การใช้งานจะเริ่มต้นโดยอัตโนมัติและเผยแพร่ไปยังการใช้งานจริง

การตั้งค่าเพิ่มเติม

Webhook ที่มีเนื้อหาครบถ้วน (ไม่บังคับ)

1. ไปที่ Netlify: การตั้งค่า → สร้าง & ปรับใช้ → สร้าง hooks สร้าง hook บิลด์ใหม่

2. ไปที่ Contentful: app.contentful.com → การตั้งค่าพื้นที่ → Webhooks สร้างเว็บฮุคโดยใช้ URL บิลด์ Netlify ที่คุณเพิ่งสร้างและกำหนดค่าเหตุการณ์ที่ควรทริกเกอร์บิลด์ในการผลิต ตัวอย่างต่อไปนี้จะสร้างเว็บไซต์ที่ใช้งานจริงขึ้นใหม่ทุกครั้งที่มีการเผยแพร่ โพสต์หรือเพจ ยกเลิกการเผยแพร่ หรือลบ:

การแจ้งเตือนแบบฟอร์ม Netlify (ไม่บังคับ)

1. ไปที่ Netlify: แบบฟอร์ม → การแจ้งเตือน

2. คลิกเมนูแบบเลื่อนลงเพิ่มการแจ้งเตือน และเลือกวิธีการแจ้งเตือนที่คุณต้องการ

เคล็ดลับที่เป็นประโยชน์

• หากคุณทำการแก้ไขในพื้นที่ Contentful ของคุณในขณะที่รัน yarn develop คุณจะต้องหยุดมันและรันคำสั่งอีกครั้งเพื่อดูการเปลี่ยนแปลงที่สะท้อนให้เห็น ตัวอย่างเช่น โพสต์หรือเพจใหม่จะไม่แสดงโดยอัตโนมัติจนกว่าเว็บไซต์จะถูกสร้างขึ้นใหม่
• อย่า เก็บโทเค็นการเข้าถึงเนื้อหาหรือรหัสพื้นที่ไว้ที่ใดก็ได้ใน GitHub ปฏิบัติต่อพวกเขาเหมือนเป็นรหัสผ่าน