devii
v0.5.0
2020 년 개발자 블로그 스타터.
다음 .js
반응
TypeScript
가격 인하
구문 강조 표시
서
RSS 세대
당신이 행복하고 알고 있다면,이 저장소를 별표
/md/blog 기반 정적 사이트 생성기로 작동합니다.Markdown.tsx 구성 요소 제공https://colinhacks.com/blog/devii에서 Devii의 동기 부여 + 디자인에 대해 자세히 알아보십시오.
이 repo에는 https://devii.dev에 대한 코드가 포함되어 있습니다.
Devii.dev는 Devii의 문서와 작동하는 데모 역할을합니다. 복제/포크 후에는 코드를 살펴보고 Devii의 작동 방식을 배울 수 있습니다. 그런 다음 마음에 들지 않는 모든 것을 찢어 내고 다른 모든 것을 사용자 정의하며 Devii가 제공하는 Foundation 위에 자신의 도구와 구성 요소를 구축 할 수 있습니다!
귀하의 개인 웹 사이트는 온라인 표현입니다. Devii는 실제로 상자에서 많이 제공하지 않습니다. 블로그 게시물에 대한 멋진 중간 스타일의 기본 스타일과 Markdown을로드/렌더링하기위한 몇 가지 도구를 제공합니다. 그러나 자신의 홈페이지를 처음부터 어느 정도 구현해야합니다. 그리고 그게 요점입니다! 어떤 주제에 정착하지 마십시오. 당신을 나타내는 무언가를 구축하십시오.
시작하려면 :
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev 로 개발 서버를 시작하십시오. 이것은 http://localhost:3000 에서 서버를 시작해야합니다. 이 repo의 핵심은 다음입니다. 우리는 Next.js를 선택했습니다. 문서는 우수합니다. 먼저 읽으십시오 : 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 디렉토리에서 각 파일에 대한 새 웹 페이지를 생성합니다. 블로그에 About Page를 추가하려면 about.tsx 내부 pages 추가하고 페이지 작성을 시작하십시오.
기본적 으로이 repo에는 홈페이지 ( /pages/index.tsx )와 블로그 페이지 ( /pages/[blog].md .md)의 두 페이지 만 포함됩니다.
파일 [blog].ts 동적 경로를 나타 내기 위해 Square Bracket을 사용하는 Next.js 컨벤션을 따릅니다.
홈페이지는 의도적으로 최소화됩니다. 원하는 것을 index.tsx 에 넣을 수 있습니다. Devii를 설계하는 데있어 우리의 목표 중 하나는 개발자에게 제한을하지 않는 것이 었습니다. 당신의 상상력을 사용하십시오! 귀하의 웹 사이트는 온라인 표현입니다. 원하는 NPM 패키지 또는 원하는 스타일 라이브러리를 사용할 수 있습니다.
Devii는 스타일링에 대해 무시되지 않습니다. Devii 사이트는 후드 아래의 표준 React 앱이므로 npm 에서 좋아하는 라이브러리를 사용하여 스타일링 할 수 있습니다.
Devii는 기본적으로 Markdown 렌더러 ( /components/Markdown.tsx )에서 특정 스타일을 제공합니다. 이러한 스타일은 Next의 내장 스타일링 솔루션 styled-jsx 사용하여 구현됩니다. 불행히도 styled-jsx 타사 구성 요소 (이 경우 react-markdown )와 잘 어울리지 않기 때문에 이러한 스타일을 글로벌로 만들어야했습니다.
별도의 스타일링 라이브러리를 사용하기로 선택한 경우 (감정은 매우 영광 스럽다) 기본 스타일을 다시 구현할 수 있다면 선택 라이브러리와 내장 스타일을 선택하십시오.
md/blog/ 아래에서 Markdown 파일을 추가하여 새 블로그 게시물을 만듭니다.
/md/blog 디렉토리 내에서 foo.md 라는 새 마크 다운 파일 생성http://localhost:3000/blog/foo 로 이동하십시오. 새 게시물이 표시됩니다. 모든 Markdown 파일에는 다양한 메타 데이터가 포함 된 "프론트 매터 블록"이 포함될 수 있습니다. Devii는 Markdown 파일을로드하고 FrontMatter 메타 데이터를 구문 분석하고 구조화 된 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
---
이 작동 방식을보기 위해 /loader.ts .
globals.ts 및 Devii는 Google Analytics ID (예 : 'UA-9999999999-1')를 추가하여 적절한 Google Analytics 스 니펫을 사이트에 자동으로 추가합니다. /pages/_app.ts 로 이동 하여이 작동 방식을 확인 하거나이 동작을 사용자 정의하십시오.
Markdown 렌더러 ( Markdown.tsx )는 Medium에서 영감을 얻은 기본 스타일을 제공합니다. Markdown.tsx 에서 CSS를 수정하여 원하는 디자인을 사용자 정의하십시오.
Triple-Backtick 구문 (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 보고, 이것이 어떻게 작동하는지 또는이 동작을 사용자 정의하는 방법을 확인하십시오.
Devii를 사용하기 위해이 모든 것을 이해할 필요는 없습니다. 사이트의 구조를 사용자 정의하려면 사용할 수있는 "고급 가이드"를 고려하십시오.
Markdown 게시물은 Next.js 정적 빌드 단계에서로드됩니다. 이에 대한 자세한 내용은 데이터 가져 오기 문서를 확인하십시오.
짧은 버전은 다음과 같습니다. 페이지 구성 요소 중 하나에서 getStaticProps 라는 함수를 내보내는 경우 Next.js는 해당 함수를 실행하고 결과를 취하고 props 속성 (다른 객체)을 페이지로 전달합니다.
loader.ts 에서 구현 된 유틸리티 기능 인 loadMarkdownFile 사용하여 Markdown 파일을 동적으로로드하고 구문 분석 할 수 있습니다. 위에 나열된 모든 메타 데이터 키를 포함하는 PostData 결합 객체를 반환하는 비동기 함수입니다.
이 예를 들어, 홈페이지에서 getStaticProps 구현을 확인하십시오. 이 함수는 /md/blog/ directory에 모든 블로그 게시물을로드하고 구문 분석하고 PostData[] 반환하는 Utilty 함수 인 loadBlogPosts 호출합니다.
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; Devii가 사용하는 loader.ts 에는 몇 가지 유틸리티 기능이 있습니다. 모든 기능은 비동기 입니다! 모든 함수는 md/ 디렉토리에 _Relative가 될 것으로 예상되는 상대 경로를 수락합니다. 예를 들어 loadPost('blog/test.md' )는 /md/blog/test.md 를로드합니다.
loadPost 로드/마크 다운 파일을 구문 분석하고 PostData 반환합니다loadBlogPosts : /md/blog/ 의 모든 파일을로드/파싱합니다. PostData[] 반환합니다. index.tsx 에서 사용하여 게시 된 모든 블로그 게시물의 목록을로드/렌더링loadMarkdownFile : Markdown 파일을로드하지만 구문 분석하지 않습니다. 문자열 내용을 반환합니다. Markdown에서 한 페이지의 일부를 구현하려면 유용하고 React의 기타 부품loadMarkdownFiles : 글로벌 패턴을 허용하고 /md/ 내부의 모든 파일을 패턴과 일치시킵니다. loadBlogPosts 에서 내부적으로 사용됩니다 yarn build && yarn export 사용하여 사이트의 완전히 정적 버전을 생성 할 수 있습니다. 이 단계는 Next.js에 의해 완전히 구동됩니다. 정적 사이트는 out Directory로 내 보냅니다.
생성 된 후 정적 파일 호스팅 서비스 (Vercel, Netlify, Firebase Hosting, Amazon S3)를 사용하여 사이트를 배포하십시오.
프로젝트 루트에는 사이트에 대한 일부 설정/구성 메타 데이터가 포함 된 globals.ts 파일이 있습니다.
yourName : 바닥 글 및 RSS 피드의 저작권 태그에 사용되는 귀하의 이름, 예 : Alyssa P. HackersiteName : 블로그 제목, 예를 들어 Alyssa's Cool Blog ;siteDescription : meta 설명 태그에 사용 된 간단한 설명, 예를 들어 '코드'N에 대해 씁니다.siteCreationDate : 생성 된 RSS 피드에 사용됩니다. 이 형식을 사용하십시오 : '2020 년 3 월 3 일 04:00:00 GMT';twitterHandle : Twitter 메타 태그에 사용되는 귀하 또는 귀하의 블로그/회사를위한 Twitter 핸들. @ 기호 (예 : '@alyssaphacker');email : 귀하의 이메일, 생성 된 RSS 피드의 "웹 마스터"및 "관리자"필드 (예 : [email protected] );url : 웹 사이트의 기본 URL은 상대 경로에서 기본 정식 링크를 "계산"하는 데 사용됩니다.accentColor : 헤더 및 바닥 글러리, 예를 들어 #4fc2b4 ; RSS 피드는 블로그 게시물 피드에서 자동으로 생성됩니다. 이 피드는 rss 모듈 (JSON을 RSS 형식으로 변환)과 MarkDown 파일을 RSS 호환 HTML로 변환하기위한 showdown 사용하여 생성됩니다.
RSS Generation이 작동하려면 모든 게시물에 FrontMatter 메타 데이터에 datePublished 타임 스탬프가 포함되어야합니다. RSS 생성을 검사하거나 사용자 정의하려면 루트 디렉토리의 rssUtil.ts 파일을 확인하십시오.
모든 블로그 게시물 페이지는 포스트 메타 데이터를 기반으로 메타 태그를 자동으로 채워집니다. 여기에는 title 태그, meta 태그, og: 태그, 트위터 메타 데이터 및 표준 URL이 포함 된 link 태그가 포함됩니다.
표준 URL의 기본값은 url 구성의 값 (위의 전역 구성 참조)과 게시물의 상대 경로를 연결하여 계산됩니다. 실시간 사이트를 방문 할 때 정식 URL이 브라우저의 URL과 정확히 동일인지 확인하십시오. 그렇지 않으면 사이트의 SEO가 어려움을 겪을 수 있습니다.
여기에 "후드 아래"가 없습니다. 위에 나열된 기능을 제공하는 모든 파일을보고 수정할 수 있습니다. Devii는 프로젝트 스캐 폴드, 일부 마크 다운로드로드로드 유틸리티 ( loader.ts ) 및 일부 현명한 스타일 기본값 (특히 Markdown.tsx )을 제공합니다.
사용자 정의를 시작하려면 index.tsx (홈페이지), BlogPost.tsx (블로그 게시물 템플릿) 및 Markdown.tsx (Markdown 렌더러)의 소스 코드를 확인하십시오.
https://github.com/colinhacks/devii를 시작하려면 Github Repo로 가십시오. 이 프로젝트가 마음에 들면 더 많은 사람들이 Devii를 찾도록 돕기 위해 닐 스타나를 남겨 두십시오.
yarn dev 개발 서버를 시작합니다. next dev 와 동일합니다.
yarn build 사이트의 최적화 된 빌드를 만듭니다. next build 와 동일합니다.
yarn export 사이트를 정적 파일로 내 보냅니다. 모든 파일은 작성 /out 입니다. 정적 파일 호스팅 서비스 (Firebase Hosting, Amazon S3, Vercel)를 사용하여 사이트를 배포하십시오. next export 에 해당합니다.
