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 。
