devii

devii

ผู้พัฒนาบล็อกผู้พัฒนาในปี 2020
next.js
ตอบโต้
ตัวพิมพ์ใหญ่
การทำเครื่องหมาย
การไฮไลต์ไวยากรณ์
SEO
รุ่น RSS

หากคุณมีความสุขและคุณก็รู้ว่าจะได้รับการซื้อคืนนี้

ผู้เริ่มต้นบล็อก Dev สำหรับปี 2020

• ทำงานเป็นเครื่องกำเนิดไฟฟ้าแบบสแตติก-ไซต์ออกจากกล่อง: เพียงเพิ่มโพสต์บล็อกใหม่ลงใน /md/blog
• รองรับการส่งออกไปยังสินทรัพย์คงที่อย่างสมบูรณ์ (ขับเคลื่อนโดย next.js)
• โหลดร้อน (ขับเคลื่อนโดย next.js)
• ทำให้ง่ายต่อการเขียนหน้า/รหัสที่กำหนดเองใน React + typescript
• จัดเตรียมส่วนประกอบ Markdown.tsx พร้อมการสนับสนุนสำหรับการไฮไลต์ไวยากรณ์สไตล์ GitHub
• การสร้างฟีด RSS อัตโนมัติ
• แนวทางปฏิบัติที่ดีที่สุดของ SEO (แท็กชื่อ, Meta Tags, URL ที่เป็นที่ยอมรับ)

อ่านเพิ่มเติมเกี่ยวกับแรงจูงใจ + การออกแบบเบื้องหลัง DevII ที่ https://colinhacks.com/blog/devii

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

repo นี้มีรหัสสำหรับ https://devii.dev

devii.dev ทำหน้าที่เป็นทั้งเอกสารและการสาธิตการทำงานของ devii หลังจากที่คุณโคลน/ส้อมคุณสามารถดูรหัสเพื่อเรียนรู้วิธีการทำงานของ devii จากนั้นคุณสามารถฉีกทุกสิ่งที่คุณไม่ชอบปรับแต่งทุกอย่างอื่นและสร้างเครื่องมือและส่วนประกอบของคุณเองที่ด้านบนของ Foundation DevII ให้!

เว็บไซต์ส่วนตัวของคุณคือการรวมตัวกันทางออนไลน์ของคุณ Devii ไม่ได้ให้ออกนอกกรอบมากนัก มันมีสไตล์เริ่มต้นสไตล์กลางที่ดีสำหรับโพสต์บล็อกของคุณและเครื่องมือบางอย่างสำหรับการโหลด/การแสดงผล markdown แต่คุณจะต้องใช้โฮมเพจของคุณเองไม่มากก็น้อยตั้งแต่เริ่มต้น และนั่นคือประเด็น! อย่าชำระธีมบางอย่าง สร้างสิ่งที่แสดงถึงคุณ

เพื่อเริ่มต้น:

1. ส้อม repo นี้

2.  git clone [email protected]:yourusername/devii.git my-blog
   cd my-blog
   yarn
   

3. เริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วย yarn dev สิ่งนี้ควรเริ่มต้นเซิร์ฟเวอร์บน http://localhost:3000

ขับเคลื่อนโดย next.js

แกนกลางของ repo นี้คือถัดไป Js. เราเลือก next.js เพราะมันเป็นวิธีที่ง่ายที่สุดและสง่างามที่สุดในการสร้างเว็บไซต์ที่ใช้แบบคงที่ เอกสารนั้นยอดเยี่ยม อ่านก่อน: เอกสารถัดไป JS

โครงสร้างโครงการ

นี่คือโครงสร้างโครงการแบบย่อ ไฟล์กำหนดค่าบางไฟล์ ( next.config.js , next-end.d.ts , .gitignore ) ถูกลบออกเพื่อความเรียบง่าย

 .
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
|   ├── index.tsx // the home page (which has access to the list of all blog posts)
|   ├── blog
|       ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
|   ├── blog
|       ├── devii.md // this page!
        ├── whatever.md // every MD file in this directory becomes a blog post
├── components
|   ├── BlogPost.tsx
|   ├── Code.tsx
|   ├── Footer.tsx
|   ├── Header.tsx
|   ├── Markdown.tsx
|   ├── Meta.tsx
|   ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json

next.js สร้างหน้าเว็บใหม่สำหรับแต่ละไฟล์ในไดเรกทอรี pages หากคุณต้องการเพิ่มหน้าเกี่ยวกับบล็อกของคุณเพียงเพิ่มเกี่ยว about.tsx ภายใน pages และเริ่มเขียนหน้า

โดยค่าเริ่มต้น repo มีเพียงสองหน้า: โฮมเพจ ( /pages/index.tsx ) และหน้าบล็อก (/pages /pages/[blog].md )

ไฟล์ [blog].ts ติดตามอนุสัญญาถัดไปของการใช้วงเล็บเหลี่ยมเพื่อระบุเส้นทางไดนามิก

โฮมเพจ

โฮมเพจมีความตั้งใจน้อยที่สุด คุณสามารถใส่สิ่งที่คุณต้องการใน index.tsx ; หนึ่งในเป้าหมายของเราในการออกแบบ DevII คือการไม่มีข้อ จำกัด เกี่ยวกับนักพัฒนา ใช้จินตนาการของคุณ! เว็บไซต์ของคุณเป็นสำแดงออนไลน์ของคุณ คุณสามารถใช้แพ็คเกจ NPM หรือไลบรารีสไตล์ที่คุณต้องการ

การจัดแต่งทรงผม

DevII ไม่ได้รับการแนะนำเกี่ยวกับสไตล์ เนื่องจากไซต์ devii ของคุณเป็นแอพ React มาตรฐานภายใต้ฮูดคุณสามารถใช้ห้องสมุดที่คุณชื่นชอบจาก npm เพื่อจัดแต่งทรงผม

DevII จัดเตรียมรูปแบบบางอย่างโดยค่าเริ่มต้นโดยเฉพาะอย่างยิ่งในตัวแสดงผล Markdown ( /components/Markdown.tsx ) รูปแบบเหล่านั้นถูกนำมาใช้โดยใช้โซลูชันสไตล์ในตัวของ Next styled-jsx น่าเสียดายที่มันจำเป็นที่จะต้องทำให้สไตล์เหล่านั้นทั่วโลกเนื่องจาก styled-jsx ไม่ได้เล่นได้ดีกับส่วนประกอบของบุคคลที่สาม (ในกรณีนี้ react-markdown )

อย่าลังเลที่จะปรับปรุงสไตล์ในตัวด้วยห้องสมุดที่คุณเลือกหากคุณเลือกที่จะใช้ไลบรารีสไตล์แยกต่างหาก

การเพิ่มโพสต์บล็อกใหม่

เพียงเพิ่มไฟล์ Markdown ภายใต้ md/blog/ เพื่อสร้างโพสต์บล็อกใหม่:

1. สร้างไฟล์ markdown ใหม่ที่เรียกว่า foo.md ภายในไดเรกทอรี /md/blog
2. เพิ่มเนื้อหา markdown พื้นฐานบางอย่าง
3. จากนั้นไปที่ http://localhost:3000/blog/foo คุณควรเห็นโพสต์ใหม่

การสนับสนุนด้านหน้า

ทุกไฟล์ Markdown สามารถรวม "Frontmatter Block" ที่มีข้อมูลเมตาต่างๆ DEVII จัดเตรียมยูทิลิตี้ loadPost ที่โหลดไฟล์ markdown แยกวิเคราะห์ข้อมูลเมตาของ frontmatter และส่งคืนวัตถุ PostData ที่มีโครงสร้าง:

 type PostData = {
  path : string ;
  title ?: string ;
  subtitle ?: string ;
  description ?: string ; // used for SEO
  canonicalUrl ?: string ; // used for SEO
  datePublished ?: number ; // Unix timestamp
  author ?: string ;
  authorPhoto ?: string ;
  authorHandle ?: string ; // twitter handle
  tags ?: string [ ] ;
  bannerPhoto ?: string ;
  thumbnailPhoto ?: string ;
} ;

ตัวอย่างเช่นนี่คือบล็อก Frontmatter จากโพสต์บล็อกตัวอย่าง ( md/blog/the-ultimate-tech-stack.md ):

 ---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
  - Devii
  - Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---

View /loader.ts เพื่อดูวิธีการทำงาน

Google Analytics

เพียงเพิ่มรหัส Google Analytics ของคุณ (เช่น 'UA-999999999-1') ลงใน globals.ts และ devii จะเพิ่มตัวอย่าง Google Analytics ที่เหมาะสมลงในเว็บไซต์ของคุณโดยอัตโนมัติ ไปที่ /pages/_app.ts เพื่อดูวิธีการทำงานหรือปรับแต่งพฤติกรรมนี้

การออกแบบที่ได้รับแรงบันดาลใจจากสื่อกลาง

markdown renderer ( Markdown.tsx ) ให้สไตล์เริ่มต้นที่ได้รับแรงบันดาลใจจากสื่อ เพียงปรับเปลี่ยน CSS ใน Markdown.tsx เพื่อปรับแต่งการออกแบบตามความชอบของคุณ

บล็อกรหัสสไตล์ GitHub

คุณสามารถวางบล็อกโค้ดลงในโพสต์บล็อกของคุณได้อย่างง่ายดายโดยใช้ไวยากรณ์สามแบ็คแท็ก (เช่น GitHub) ไม่มีการฝัง codepen iframes อีกต่อไป!

ทำงานนอกกรอบสำหรับภาษาการเขียนโปรแกรมทั้งหมด ระบุภาษาของคุณด้วย "แท็กภาษา" ดังนั้น:

 `` `ts
  // สวยเรียบร้อยเหรอ?
  const test = (arg: string) => {
    return arg.length> 5;
  -
  -

เปลี่ยนเป็น

 // pretty neat huh?
const test = ( arg : string ) => {
  return arg . length > 5 ;
} ;

ดู /components/Code.tsx เพื่อดูวิธีการทำงานหรือปรับแต่งพฤติกรรมนี้

การโหลด Markdown

คุณไม่จำเป็นต้องเข้าใจทั้งหมดนี้เพื่อใช้ devii พิจารณาสิ่งนี้ "คู่มือขั้นสูง" ที่คุณสามารถใช้หากคุณต้องการปรับแต่งโครงสร้างของเว็บไซต์

โพสต์ Markdown จะถูกโหลดในระหว่างขั้นตอนการสร้างแบบคงที่ JS ตรวจสอบเอกสารการดึงข้อมูลเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้

นี่คือเวอร์ชันสั้น ๆ : หากส่งออกฟังก์ชั่นที่เรียกว่า getStaticProps จากส่วนประกอบหน้าเว็บของคุณ Next.js จะดำเนินการฟังก์ชั่นนั้นใช้ผลลัพธ์และผ่านคุณสมบัติ props (ซึ่งควรเป็นวัตถุอื่น) ลงในหน้าเว็บของคุณเป็นอุปกรณ์ประกอบฉาก

คุณสามารถโหลดและแยกวิเคราะห์ไฟล์ Markdown ได้โดยใช้ loadMarkdownFile ซึ่งเป็นฟังก์ชันยูทิลิตี้ที่ใช้ใน loader.ts มันเป็นฟังก์ชั่น async ที่ส่งคืนวัตถุ PostData typescript ที่มีคีย์ข้อมูลเมตาทั้งหมดที่ระบุไว้ข้างต้น:

สำหรับตัวอย่างนี้ให้ตรวจสอบการใช้งาน getStaticProps จากหน้าแรก ฟังก์ชั่นเรียกใช้ loadBlogPosts - ฟังก์ชั่นประโยชน์ที่โหลด ทุก บล็อกโพสต์ใน /md/blog/ directory วิเคราะห์พวกเขาและส่งคืน PostData[]

 export const getStaticProps = async ( ) => {
  const posts = await loadBlogPosts ( ) ;
  return { props : { posts } } ;
} ;

มีฟังก์ชั่นยูทิลิตี้เล็กน้อยใน loader.ts ที่ devii ใช้ ฟังก์ชั่นทั้งหมดเป็น Async ! ฟังก์ชั่นทั้งหมดยอมรับเส้นทาง สัมพัทธ์ ซึ่งคาดว่าจะเป็น _Relative กับ md/ Directory ตัวอย่างเช่น loadPost('blog/test.md' ) จะโหลด /md/blog/test.md

• loadPost loads/parses ไฟล์ markdown และส่งคืน PostData
• loadBlogPosts : โหลด/แยกวิเคราะห์ไฟล์ทั้งหมดใน /md/blog/ ส่งคืน PostData[] ใช้ใน index.tsx เพื่อโหลด/แสดงรายการโพสต์บล็อกที่เผยแพร่ทั้งหมด
• loadMarkdownFile : โหลดไฟล์ markdown แต่ไม่ได้แยกวิเคราะห์ ส่งคืนเนื้อหาสตริง มีประโยชน์หากคุณต้องการใช้บางส่วนของหน้าใน Markdown และส่วนอื่น ๆ ใน React
• loadMarkdownFiles : ยอมรับรูปแบบ GLOB และโหลดไฟล์ทั้งหมดภายใน /md/ ซึ่งชื่อตรงกับรูปแบบ ใช้ภายในโดย loadBlogPosts

รุ่นคงที่

คุณสามารถสร้างเว็บไซต์ของคุณแบบคงที่อย่างสมบูรณ์โดยใช้ yarn build && yarn export ขั้นตอนนี้ขับเคลื่อนโดย Next.js ไซต์คงที่จะถูกส่งออกไปยังไดเรกทอรี out

หลังจากสร้างขึ้นแล้วให้ใช้บริการโฮสต์ไฟล์แบบคงที่ของคุณ (vercel, netlify, Firebase Hosting, Amazon S3) เพื่อปรับใช้เว็บไซต์ของคุณ

การกำหนดค่าทั่วโลก

มีไฟล์ globals.ts ในรูทโครงการที่มีการตั้งค่า/การกำหนดค่าข้อมูลเมตาเกี่ยวกับเว็บไซต์ของคุณ:

• yourName : ชื่อของคุณใช้สำหรับแท็กลิขสิทธิ์ในส่วนท้ายและฟีด RSS เช่น Alyssa P. Hacker
• siteName : ชื่อบล็อกของคุณเช่น Alyssa's Cool Blog ;
• siteDescription : คำอธิบายสั้น ๆ ที่ใช้ในแท็กคำอธิบาย meta เช่น 'ฉันเขียนเกี่ยวกับรหัส' n สิ่ง ';
• siteCreationDate : ใช้ในฟีด RSS ที่สร้างขึ้น ใช้รูปแบบนี้: '3 มีนาคม 2020 04:00:00 GMT';
• twitterHandle : Twitter จัดการกับคุณหรือบล็อก/บริษัท ของคุณที่ใช้ในแท็ก Meta Twitter รวมสัญลักษณ์ @ เช่น '@alyssaphacker';
• email : อีเมลของคุณใช้เป็นฟิลด์ "เว็บมาสเตอร์" และ "ManagingEditor" ของฟีด RSS ที่สร้างขึ้นเช่น [email protected] ;
• url : URL พื้นฐานของเว็บไซต์ของคุณที่ใช้ในการ "คำนวณ" ลิงก์เริ่มต้นที่เป็นมาตรฐานจากเส้นทางสัมพัทธ์เช่น https://alyssaphacker.com ';
• accentColor : สีพื้นหลังส่วนหัวและส่วนท้ายเช่น #4fc2b4 ;

การสร้างฟีด RSS

ฟีด RSS ถูกสร้างขึ้นโดยอัตโนมัติจากฟีดโพสต์บล็อกของคุณ ฟีดนี้ถูกสร้างขึ้นโดยใช้โมดูล rss (สำหรับการแปลงรูปแบบ JSON เป็น RSS) และ showdown สำหรับการแปลงไฟล์ Markdown เป็น HTML ที่เข้ากันได้กับ RSS

เพื่อให้ RSS Generation ทำงานได้โพสต์ทั้งหมดของคุณจะต้องมีการประทับเวลาที่ datePublished ในข้อมูลเมตาของพวกเขา ในการตรวจสอบหรือปรับแต่งการสร้าง RSS ให้ตรวจสอบไฟล์ rssUtil.ts ในไดเรกทอรีรูท

SEO

หน้าโพสต์บล็อกทุกแท็กที่มีการเติมข้อมูลเมตาโดยอัตโนมัติตามข้อมูลเมตาโพสต์ ซึ่งรวมถึงแท็ก title , meta Tags, og: Tags, Twitter Metadata และแท็ก link ที่มี URL ที่เป็นที่ยอมรับ

ค่าเริ่มต้นของ URL ที่เป็นที่ยอมรับนั้นคำนวณโดยการเชื่อมต่อค่าของการกำหนดค่า url ของคุณ (ดูการกำหนดค่าส่วนกลางด้านบน) และเส้นทางสัมพัทธ์ของโพสต์ของคุณ ตรวจสอบว่า URL ที่เป็นที่ยอมรับนั้นเทียบเท่ากับ URL ในเบราว์เซอร์เมื่อเยี่ยมชมเว็บไซต์สดของคุณมิฉะนั้น SEO ของเว็บไซต์ของคุณอาจประสบ

ปรับแต่งได้อย่างไม่น่าเชื่อ

ไม่มีอะไร "ใต้ประทุน" ที่นี่ คุณสามารถดูและแก้ไขไฟล์ทั้งหมดที่ให้ฟังก์ชั่นที่ระบุไว้ข้างต้น DevII เพียงแค่จัดทำโครงร่างโครงการยูทิลิตี้โหลด markdown-loading บางอย่าง (ใน loader.ts ) และค่าเริ่มต้นสไตล์ที่เหมาะสม (โดยเฉพาะใน Markdown.tsx )

ในการเริ่มต้นการปรับแต่งให้ตรวจสอบซอร์สโค้ดของ index.tsx (โฮมเพจ), BlogPost.tsx (เทมเพลตโพสต์บล็อก) และ Markdown.tsx (ตัวแสดงการทำเครื่องหมาย)

มุ่งหน้าไปที่ GitHub Repo เพื่อเริ่มต้น: https://github.com/colinhacks/devii ถ้าคุณชอบโครงการนี้ให้ออกจาก️starเพื่อช่วยให้ผู้คนพบ devii มากขึ้น?

CLI

yarn dev

เริ่มต้นเซิร์ฟเวอร์การพัฒนา เทียบเท่ากับ next dev

yarn build

สร้างงานสร้างที่ดีที่สุดของเว็บไซต์ของคุณ เทียบเท่ากับ next build

yarn export

ส่งออกไซต์ของคุณไปยังไฟล์คงที่ ไฟล์ทั้งหมดถูกเขียนถึง /out ใช้บริการโฮสต์ไฟล์แบบคงที่ของคุณ (Firebase Hosting, Amazon S3, Vercel) เพื่อปรับใช้เว็บไซต์ของคุณ เทียบเท่ากับ next export