ryosuke gatsby blog

ผลงานส่วนตัวและบล็อกของ Ryosuke

พอร์ตโฟลิโอและบล็อกส่วนบุคคลที่สร้างขึ้นด้วยกรอบ Gatsbyjs เพื่อสร้างเว็บไซต์ที่ใช้พลังงานแบบคงที่ มันเป็นสายฟ้าเร็ว SEO และ PWA เป็นมิตรและนำไปใช้โดยตรงกับ CDN เช่นหน้า gitHub หรือ netlify

นี่เป็นทางเลือก JavaScript สำหรับโซลูชันตัวสร้างไซต์แบบคงที่ที่เขียนใน GO หรือ Ruby นอกจากนี้ยังมีเนื้อมากกว่าบล็อก Starter Gatsby ที่มีคุณสมบัติเช่นคลังเก็บบล็อกการจัดการรูปภาพการเพิ่มประสิทธิภาพ SEO และอีกไม่กี่

โครงสร้าง

• บ้าน
• โครงการ
• • คลังเก็บหน้า
• บล็อก
• • คลังเก็บหน้า
• แท็ก
• • Tag Archives
• เกี่ยวกับ

โพสต์รูปแบบ / ฟิลด์

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• ส่วนอาจเป็น blog หรือ project
• แท็กต้องเป็นอาร์เรย์
• เนื้อหาของร่างกายอาจรวมถึง Markdown หรือ HTML

ปลั๊กอิน

codepen

ในการฝังโมดูล codepen เพียงคัดลอกรหัสฝังและลบสคริปต์ JS ที่ได้รับนำเข้า

Twitter

ฝังทวีตลงในโพสต์อย่างราบรื่นโดยการคัดลอกส่วน blockquote ของรหัสฝังลงในไฟล์ markdown ของคุณ อย่าคัดลอกไฟล์ JS ที่เชื่อมโยงปลั๊กอินจะจัดการโดยอัตโนมัติ

ประจักษ์

กำหนดค่าใน gatsby-config.js

ฟีด RSS

กำหนดค่าใน gatsby-config.js

การพัฒนา

ทำงานบน Gatsbyjs ซึ่งเป็น SSG ที่สร้างแอพ React แบบคงที่

1. npm install
2. npm run develop

การปรับใช้

หน้า GitHub

เราสร้างไฟล์ในพื้นที่จากนั้นปรับใช้โดยใช้สคริปต์ NPM ที่อัปเดตสาขา GIT repo เฉพาะที่เรียกว่า gh-pages

ในการเปิดใช้งานสิ่งนี้เพียงแค่เริ่มต้นการซื้อคืน GIT ในโครงการกระทำการเปลี่ยนแปลงของคุณและเพิ่ม gitHub repo ของคุณเป็น repo ระยะไกล ตรวจสอบให้แน่ใจว่าได้ติดฉลากรีโมทเป็น origin มิฉะนั้นการปรับใช้ Gatsby จะไม่ทราบว่าจะ repo ใดที่จะผลักดันไป

ปรับใช้ไซต์เพื่อ origin Remote Repo:

npm run deploy

การสร้างหรือแก้ไขเนื้อหา

1. git pull จากต้นกำเนิดระยะไกลเพื่อให้แน่ใจว่าคุณมีโพสต์ล่าสุดและรวมความขัดแย้งใด ๆ
2. เพิ่มโฟลเดอร์ใหม่ให้กับ src/content/projects หรือ src/content/blog ที่ตั้งชื่อตามโพสต์ของคุณ สิ่งนี้จะถูกแปลงเป็นกระสุนของบทความ-คุณไม่จำเป็นต้อง 'เคบับ-กรณี' ชื่อของคุณ แต่จำรูปแบบไว้ในใจ
3. สร้างไฟล์ Markdown ในโฟลเดอร์ ตรวจสอบให้แน่ใจว่าใช้ไฟล์ก่อนหน้าเป็นเทมเพลตเพื่อรวมฟิลด์ที่เหมาะสมทั้งหมด (แสดงไว้ด้านบน)
4. กรอกโพสต์ตรวจสอบให้แน่ใจว่าได้รวมภาพหน้าปก (ดูขั้นตอนถัดไปสำหรับการจัดการรูปภาพ)
5. สำหรับภาพใด ๆ ให้รวมไว้ในโฟลเดอร์เดียวกันกับการทำเครื่องหมายและลิงก์ของโพสต์โดยใช้ <img src="./my-image.jpg" />
6. เรียกใช้ npm run deploy ในรูทโครงการเพื่อปรับใช้กับหน้า GitHub

ทำให้เป็นตะลึง

ไซต์นี้ยังสามารถปรับใช้กับ NetLify ได้ เพียงลงชื่อเข้าใช้เพื่อสร้างแอพใหม่และชี้ไปที่ที่เก็บนี้ ทำตามขั้นตอนตรวจสอบให้แน่ใจว่า Netlify กำลังเรียกใช้ gatsby build และชี้ไปที่ /public นอกจากนี้ยังช่วยให้คุณใช้ Netlify CMS เนื่องจากต้องใช้เซิร์ฟเวอร์สำหรับการสนับสนุน OAuth2 และโฮสต์บน Netlify ช่วยให้คุณสร้างใหม่ในการแก้ไขแต่ละครั้ง (แทนที่จะสร้างจากเครื่องส่วนตัวของคุณและการปรับใช้จากที่นั่น)

การให้เครดิต

• Gatsbyjs
• reactjs
• ไอคอนโดย Davide Pacilio