devii
v0.5.0
2020年的開發人員博客入門者。
next.js
反應
打字稿
降價
語法突出顯示
SEO
RSS生成
如果您開心並且知道，請出演此倉庫
/md/blogMarkdown.tsx組件，並支持GitHub風格的語法突出顯示在https://colinhacks.com/blog/devii上閱讀有關動機 +設計的更多信息。
此存儲庫包含https://devii.dev的代碼。
Devii.dev既是Devii的文檔和工作演示。克隆/叉子之後，您可以查看代碼以了解Devii的工作原理。然後，您可以剝奪您不喜歡的所有內容，自定義其他所有內容，並在Devii提供的基礎上構建自己的工具和組件！
您的個人網站是您的在線表現。 Devii並沒有真正提供太多開箱即用。它為您的博客文章提供了一些不錯的中型默認樣式，以及一些用於加載/渲染標記的工具。但是，您必須從頭開始或多或少地實現自己的主頁。這就是重點！不要為某個主題而定。建立代表您的東西。
開始：
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev啟動開發服務器。這應該在http://localhost:3000上啟動服務器。 此存儲庫的核心是下一步。我們之所以選擇Next.js，是因為它是生成基於React網站的靜態版本的最簡單，最優雅的方法。文檔很棒；首先閱讀：Next.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目錄中為每個文件生成一個新的網頁。如果您想在博客中添加一個關於頁面的大約頁面，只需在pages內添加about.tsx並開始編寫頁面。
默認情況下，存儲庫僅包含兩個頁面：主頁（ /pages/index.tsx ）和一個博客頁面（ /pages/[blog].md blog] md）。
文件[blog].ts遵循Next.js約定，以使用方括號表示動態路線。
主頁有意最小。您可以將您想要的任何內容放在index.tsx中；我們設計Devii的目標之一是對開發人員沒有任何限制。利用您的想像力！您的網站是您的在線表現。您可以使用您喜歡的任何NPM軟件包或樣式庫。
Devii對造型沒有公開。由於您的DEVII網站是引擎蓋下的標準React應用程序，因此您可以使用npm中喜歡的庫進行造型。
DEVII默認情況下提供某些樣式，特別是在Markdown Renderer（ /components/Markdown.tsx ）中提供。這些樣式是使用Next的內置樣式styled-jsx實現的。不幸的是，有必要使這些樣式全球化，因為styled-jsx與第三方組件的玩法不佳（在這種情況下react-markdown ）。
如果您選擇使用單獨的樣式庫（情感非常光榮），請隨意重新安裝內置樣式，然後重新實現默認樣式
只需在md/blog/下添加一個Markdown文件即可創建新的博客文章：
/md/blog目錄中創建一個名為foo.md的新的markdown文件http://localhost:3000/blog/foo 。您應該看到新帖子。 每個標記文件都可以包含一個包含各種元數據的“前磨牙塊”。 Devii提供了一個加載降價文件的loadPost實用程序，解析其前型元數據，並返回一個結構化的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 ;
} ;例如，這是示例博客文章（ 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 Analyticsics ID（例如ua-9999999999-1'）添加到globals.ts和Devii將自動將合適的Google Analytics（分析）摘要添加到您的網站中。請訪問/pages/_app.ts查看其工作原理或自定義此行為。
Markdown Renderer（ Markdown.tsx ）提供了靈感來自介質的默認樣式。只需在Markdown.tsx中修改CSS即可自定義您喜歡的設計。
您可以使用Triple-backtick語法（就像GitHub一樣）輕鬆地將代碼塊放入博客文章中。不再嵌入codepen iframes！
用於所有編程語言的開箱即用。用“語言標籤”指定您的語言。所以這個：
``TS
//漂亮整潔吧？
const test =（arg：string）=> {
返回arg.length> 5;
};
````````變成
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ;查看/components/Code.tsx查看其工作方式或自定義此行為。
您不需要了解所有這些即可使用Devii。如果要自定義網站的結構，則將其視為“高級指南”。
下一步將加載降價帖子。 JS靜態構建步驟。查看數據獲取文檔以了解有關此的更多信息。
以下是簡短版本：如果從您的一個頁面組件中導出一個稱為getStaticProps的函數，則Next.js將執行該功能，獲取結果，並將props屬性（應該是另一個對象）作為Props作為Props。
您可以使用loadMarkdownFile loader.ts中實現的實用程序函數）動態加載和解析Markdown文件。這是一個異步函數，它返回包含上面列出的所有元數據密鑰的PostData打字對象：
有關此的示例，請查看HomePage的getStaticProps實現。該函數調用loadBlogPosts - 一個UTILTY函數，可加載/md/blog/ Directory中的每個博客文章，解析它們，然後返回PostData[] 。
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; DEVII使用的loader.ts中有一些實用程序功能。所有功能都是異步！所有功能都接受相對路徑，該路徑被預期對md/目錄具有。例如， loadPost('blog/test.md' ）將加載/md/blog/test.md 。
loadPost加載/解析Markdown文件並返回PostDataloadBlogPosts ：loads/pars在/md/blog/中的所有文件。返回PostData[] 。在index.tsx中用於加載/渲染所有已發表的博客文章的列表loadMarkdownFile ：加載Markdown文件，但沒有解析。返回字符串內容。如果您想在Markdown中實現頁面的某些部分以及React中的其他部分loadMarkdownFiles ：接受Glog模式並加載所有名稱與模式匹配的內部/md/中的所有文件。由loadBlogPosts內部使用您可以使用yarn build && yarn export生成網站的完全靜態版本。此步驟完全由Next.J。靜態站點已導出到out目錄。
生成後，使用您的靜態文件託管服務（Vercel，Netlify，Firebase Hosting，Amazon S3）來部署您的網站。
項目root中有一個globals.ts文件，其中包含有關您的網站的一些設置/配置元數據：
yourName ：您的名字，用於頁腳和RSS feed中的版權標籤，例如Alyssa P. HackersiteName ：您的博客標題，例如Alyssa's Cool Blog ；siteDescription ：一個簡短的描述，在meta描述標籤中使用，例如'我寫關於代碼'n stuff'的代碼'；siteCreationDate ：用於生成的RSS feed中。使用此格式：“ 2020年3月3日04:00：00 GMT';twitterHandle ：用於您或您的博客/公司的Twitter句柄，在Twitter Meta標籤中使用。包括 @符號，例如'@alyssaphacker';email ：您的電子郵件，用作生成的RSS feed的“網站管理員”和“管理器”字段，例如[email protected] ；url ：網站的基本URL，用於從相對路徑“計算”默認的規範鏈接，例如'https://alyssaphackacher.com';accentColor ：標題和頁腳背景顏色，例如#4fc2b4 ; 您的博客文章提要自動生成RSS提要。該提要是使用rss模塊（用於將JSON轉換為RSS格式的）和將Markdown文件轉換為RSS兼容HTML的showdown生成的。
為了使RSS生成工作，您所有的帖子都必須在其前磨牙元數據中包含datePublished時間戳。要檢查或自定義RSS生成，請在根目錄中查看rssUtil.ts文件。
每個博客文章頁面都會根據郵政元數據自動填充的元標記。這包括title標籤， meta標記， og:標籤，Twitter元數據和包含規範URL的link標籤。
規範URL的默認值是通過串聯url配置值（請參見上面的全局配置）和帖子的相對路徑來計算的。確認訪問您的實時網站時的規範URL是否完全等於瀏覽器中的URL，否則您的網站SEO可能會受到影響。
這裡沒有任何“引擎蓋下”。您可以查看並修改提供上面列出的功能的所有文件。 Devii僅提供項目腳手架，一些加載加載實用程序（在loader.ts中）以及一些明智的樣式默認設備（尤其是在Markdown.tsx中）。
要開始自定義，請查看index.tsx （主頁）， BlogPost.tsx （博客文章模板）的源代碼和Markdown.tsx （Markdown Renderer）。
前往Github存儲庫開始：https：//github.com/colinhacks/devii。如果您喜歡這個項目，請留下一個qustar️幫助更多的人找到Devii？
yarn dev啟動開發服務器。等效於next dev 。
yarn build創建您網站的優化構建。等效於next build 。
yarn export將您的網站導出到靜態文件。所有文件均寫入/out 。使用您的靜態文件託管服務（Firebase Hosting，Amazon S3，Vercel）來部署您的網站。等效於next export 。
