wodle

워들

Wodle 은 최신 웹 개발을 위한 새로운 프레임워크와 도구를 사용하는 정적 사이트 생성기입니다. Next.js와 Tachyons를 기반으로 구축되었습니다. 그리고 생성된 정적 사이트를 완전히 동적 웹사이트로 쉽게 전환할 수 있습니다.

왜?

NextJS와 기능성 CSS를 사용하면 블로그나 정적 페이지를 매우 쉽게 시작할 수 있으므로 해당 기술을 배우고 싶어하는 블로거와 개발자에게 좋은 출발점이 됩니다.

설치

npm을 통해 Wodle을 설치할 수 있습니다.

 npm install -g wodle

시작하기

Wodle이 설치되면 wodle 명령을 사용할 수 있습니다. 새 사이트를 구축하려면 다음을 실행할 수 있습니다.

 wodle myBlog

그러면 명령을 실행한 동일한 디렉터리에 myBlog 라는 새 사이트가 생성됩니다.

새 사이트를 시작하려면 해당 사이트에 CD를 넣은 다음 종속성을 설치하면 됩니다.

 cd myBlog
yarn

모든 종속성을 가져오며, 준비가 되면 서버 실행을 시작할 수 있습니다.

 yarn dev

그리고 localhost:3000/ 으로 이동하면 다음과 같은 사이트가 표시됩니다.

해당 서버는 앱의 변경 사항을 수신하고 브라우저를 다시 로드합니다.

핫 리로딩 없이 사이트를 실행하려면 다음을 실행하세요.

 yarn start

사이트 구축

사이트를 구축하려면 다음을 실행할 수 있습니다.

 yarn build

그러면 정적 사이트를 게시할 준비가 된 out/ 폴더가 생성됩니다.

어떻게 작동하나요?

귀하의 사이트에는 다양한 폴더가 있습니다:

페이지 폴더

이 폴더에는 페이지 파일이 포함되어 있으며 해당 이름은 해당 경로와 일치하므로 /new-page 에 새 페이지를 추가하려면 이 폴더에 new-page.js 라는 새 구성 요소를 추가해야 합니다. 고급 라우팅을 확인하려면 여기를 클릭하세요.

스캐폴드는 components 폴더에 미리 빌드된 일부 페이지 구성 요소와 함께 제공됩니다.

구성 요소 폴더

이 폴더에는 사이트에 사전 구축된 모든 구성 요소가 있으며, 이 스캐폴드 앱의 핵심 구성 요소는 다음과 같습니다.

• 사이드바

항목을 가져오고 해당 NavItem을 사용하여 Nav를 렌더링하는 사이드바 구성 요소입니다. 이 구성 요소의 콘텐츠는 content/sideBarOptions.js 에 있습니다.

• 기본

이 구성 요소는 기본 섹션(사이트 중앙)에 표시하려는 모든 항목을 래핑합니다.

• 주요기사

이 구성 요소는 색인 및 각 특정 기사에서 볼 수 있듯이 기본 기사를 렌더링합니다. 이 구성요소로 처리할 수 있는 콘텐츠의 데모는 content/mainArticle 에 있습니다.

• 기사목록

이 구성 요소는 사이드바 메뉴의 각 개별 페이지에 표시되는 기사 목록을 렌더링합니다. <something>Articles.js 파일의 content/ 에서 목록을 볼 수 있습니다.

무엇보다도

스타일 폴더

귀하의 스타일 폴더는 모든 CSS를 위한 것입니다(현재 기능적인 CSS 및 Tachyons 덕분에 거의 비어 있습니다).

사이트 확장

계속해서 페이지를 삭제하고( pages 폴더에서 파일을 제거하고) 비계의 패턴에 따라 더 많은 페이지, 기사, 옵션을 추가하거나 원하는 대로 모든 것을 변경할 수 있습니다! 멋진 웹사이트나 블로그를 만들기 위해 Next.js 사이트와 Tachyons에서 훌륭한 가이드를 읽어보세요!

이전 기술 chibicode.com 및 jspg를 기반으로 함