devii
v0.5.0
2020年の開発者ブログスターター。
next.js
反応します
タイプスクリプト
マークダウン
構文の強調表示
SEO
RSS生成
あなたが幸せでそれを知っているなら、このレポを主演してください
/md/blogに追加するだけMarkdown.tsxコンポーネントを提供しますhttps://colinhacks.com/blog/deviiのDeviiの背後にあるMotivation + Designの詳細については、詳細をご覧ください。
このレポは、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です。 next.jsを選択しました。これは、ReactベースのWebサイトの静的バージョンを生成する最も簡単で最もエレガントな方法だからです。ドキュメントは優れています。最初に読む：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ディレクトリ内の各ファイルの新しいWebページを生成します。ブログにaboutページを追加する場合は、 pages内にabout.tsxを追加して、ページの書き込みを開始します。
デフォルトでは、リポジトリには、ホームページ（ /pages/index.tsx ）とブログページ（ /pages/[blog].md .md）の2ページのみが含まれています。
ファイル[blog].tsは、角括弧を使用して動的なルートを示すというNext.jsコンベンションに従います。
ホームページは意図的に最小限です。必要なものをindex.tsxに置くことができます。 Deviiを設計する際の目標の1つは、開発者に制限を課さないことでした。あなたの想像力を使ってください！あなたのウェブサイトはあなたのオンライン症状です。好きなNPMパッケージやスタイリングライブラリを使用できます。
Deviiはスタイリングについては感染していません。 Deviiサイトはフードの下の標準的なReactアプリであるため、 npmのお気に入りのライブラリを使用してスタイリングを行うことができます。
Deviiは、特にMarkdown Renderer（ /components/Markdown.tsx ）で、デフォルトで特定のスタイルをデフォルトで提供します。これらのスタイルは、Nextの組み込みスタイリングソリューションstyled-jsxを使用して実装されています。残念ながら、 styled-jsxサードパーティのコンポーネント（この場合はreact-markdown ）でうまく機能しないため、これらのスタイルをグローバルにする必要がありました。
独立したスタイリングライブラリを使用することを選択した場合（感情はかなり輝かしい）、選択したライブラリでビルトインスタイルを自由に再免除してください。デフォルトのスタイルを再実装できます
md/blog/にマークダウンファイルを追加して、新しいブログ投稿を作成するだけです。
/md/blogディレクトリ内でfoo.mdという新しいマークダウンファイルを作成しますhttp://localhost:3000/blog/fooに移動します。新しい投稿が表示されます。 すべてのマークダウンファイルには、さまざまなメタデータを含む「FrontMatterブロック」を含めることができます。 deviiは、マークダウンファイルをロードし、フロントマッティングメタデータを解析し、構造化されたPostDataオブジェクトを返すloadPostユーティリティを提供します。
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 ）のFrontMatterブログは次のとおりです。
---
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 ID（ 'UA-999999999-1'など）をglobals.tsとDeviiに追加するだけで、適切なGoogle Analyticsスニペットをサイトに自動的に追加します。 /pages/_app.tsに移動して、これがどのように機能するか、またはこの動作をカスタマイズする方法を確認します。
Markdown Renderer（ Markdown.tsx ）は、Mediumに触発されたデフォルトスタイルを提供します。 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を使用するためにこれらすべてを理解する必要はありません。これを、サイトの構造をカスタマイズする場合に使用できる「高度なガイド」と考えてください。
マークダウンの投稿は、next.js静的ビルドステップ中にロードされます。これの詳細については、データフェッチのドキュメントをご覧ください。
短いバージョンは次のとおりです。ページコンポーネントのいずれかからgetStaticPropsという関数をエクスポートすると、next.jsはその関数を実行し、結果を取得し、 propsプロパティ（別のオブジェクト）をプロップとしてページに渡します。
loader.tsに実装されたユーティリティ関数であるloadMarkdownFileを使用して、MarkDownファイルを動的にロードして解析できます。これは、上記のすべてのメタデータキーを含むPostData TypeScriptオブジェクトを返す非同期関数です。
この例については、ホームページからのgetStaticProps実装をご覧ください。この関数は、 loadBlogPostsを呼び出します - /md/blog/ディレクトリのすべてのブログ投稿をロードし、それらを解析し、 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マークダウンファイルをロード/解析し、 PostDataを返しますloadBlogPosts ： /md/blog/のすべてのファイルをロード/解析します。 PostData[]を返します。 index.tsxで使用して、公開されているすべてのブログ投稿のリストをロード/レンダリングするloadMarkdownFile ：マークダウンファイルをロードしますが、解析しません。文字列コンテンツを返します。マークダウンにページの一部を実装したい場合に便利loadMarkdownFiles ：グローブパターンを受け入れ、 /md/内のすべてのファイルをパターンと一致させるすべてのファイルをロードします。 loadBlogPostsによって内部的に使用されますyarn build && yarn exportを使用して、完全に静的バージョンのサイトを生成できます。このステップは、next.jsによって完全に駆動されています。静的サイトはoutディレクトリにエクスポートされます。
生成後、選択した静的ファイルホスティングサービス（Vercel、Netlify、Firebase Hosting、Amazon S3）を使用して、サイトを展開します。
プロジェクトルートには、サイトに関するいくつかの設定/構成メタデータを含むglobals.tsファイルがあります。
yourName ：あなたの名前、フッターの著作権タグとRSSフィード、例えばAlyssa P. HackersiteName ：ブログのタイトル、 Alyssa's Cool Blogなど。siteDescription ： meta説明タグで使用される短い説明。siteCreationDate ：生成されたRSSフィードで使用されます。この形式を使用してください： '2020年3月3日04:00:00 GMT';twitterHandle ：Twitterメタタグで使用されるTwitterハンドルまたはブログ/会社のハンドル。 @シンボル、「@alyssaphacker」などを含めます。email ：あなたの電子メールは、生成[email protected]れたRSSフィードの「Webmaster」および「ManagingEditor」フィールドとして使用されています。url ：WebサイトのベースURLは、相対パスからデフォルトの標準リンクを「計算」するために使用されます。accentColor ：ヘッダーとフッターの背景色、例えば#4fc2b4 ; RSSフィードは、ブログ投稿フィードから自動生成されます。このフィードは、 rssモジュール（JSONをRSS形式に変換するため）とMarkdownファイルをRSS互換HTMLに変換するためのshowdownを使用して生成されます。
RSSの生成が機能するには、すべての投稿には、フロントマッテルメタデータにdatePublishedタイムスタンプが含まれている必要があります。 RSS生成を調べたりカスタマイズしたりするには、ルートディレクトリのrssUtil.tsファイルをご覧ください。
すべてのブログ投稿ページは、ポストメタデータに基づいてメタタグが自動的に入力されています。これには、 titleタグ、 meta 、 og:タグ、Twitterメタデータ、および標準URLを含むlinkタグが含まれます。
Canonical URLのデフォルト値は、 url構成の値（上記のグローバル構成を参照）と投稿の相対パスを連結することにより計算されます。ライブサイトにアクセスすると、標準URLがブラウザのURLとまったく同じであることを確認します。そうしないと、サイトのSEOが苦しむ可能性があります。
ここには「フードの下」は何もありません。上記の機能を提供するすべてのファイルを表示および変更できます。 Deviiは、プロジェクトの足場、いくつかのマークダウンロードロードユーティリティ（ loader.ts ）、およびいくつかの賢明なスタイリングのデフォルトを提供します（特にMarkdown.tsx ）。
カスタマイズを開始するには、 index.tsx （ホームページ）、 BlogPost.tsx （ブログ投稿テンプレート）、およびMarkdown.tsx （マークダウンレンダラー）のソースコードをご覧ください。
Github Repoにアクセスして、https：//github.com/colinhacks/deviiを開始します。このプロジェクトが気に入ったら、より多くの人々がdeviiを見つけるのを助けるために、§star️を残してください。
yarn dev開発サーバーを起動します。 next devに相当します。
yarn buildサイトの最適化されたビルドを作成します。 next buildに相当します。
yarn exportサイトを静的ファイルにエクスポートします。すべてのファイルは/outの書き込みです。 Static File Hosting Service of Choice（Firebase Hosting、Amazon S3、Vercel）を使用して、サイトを展開します。 next exportに相当します。
