선인장을 사용하여 정적 블로그를 만드는 방법 [OS X]

최신 정보: 선인장 응용 프로그램이 중단되었습니다..

CMS가 필요하지 않고 정적 사이트 또는 블로그를 선호하는 경우 지킬 (Jekyll)은 좋은 기회입니다. 그러나 명령 줄 도구로 작업하는 대신 GUI가있는 도구를 선호한다면 체크 아웃 할 수 있습니다 선인장.

선인장은 무료입니다 정적 사이트 생성기 당신을 도울 수있는 강력한 도구를 갖추고 있습니다. 로컬 웹 사이트 구축, 현대 웹 기술로 더 빠르고 쉽습니다. 사전 설계 된 4 개의 템플릿으로 프로젝트의 출발점을 제공하므로 현장에서 성공할 수 있습니다..

프로젝트를 진행하는 동안 Cactus는 프로젝트의 모든 변경 사항을 모니터링하십시오. 과 브라우저를 자동으로 새로 고침 Mac 또는 모바일 장치에서 즉시 변경 사항을 볼 수 있습니다. 또한 SASS / SCSS 및 Coffescript를 즉시 지원하므로이 파일의 모든 변경 사항이 자동으로 생성됩니다..

시작하다

우선, 홈페이지에서 Cactus를 다운로드하고 설치를 실행해야합니다. 완료되면 열기, 만들기, 배포, 편집 및 미리보기 단추의 네 가지 단추가 표시됩니다..

새 프로젝트를 만들려면 몹시 떠들어 대다. 거기에서 네 가지 템플릿을 볼 수 있습니다. 이 자습서에서는 Blog 템플릿을 사용합니다. 딸깍 하는 소리 몹시 떠들어 대다.

프로젝트 이름을 지정하고 프로젝트가있는 위치를 선택하라는 메시지가 나타납니다. 여기에 나는 이름을 알려준다. “내 굉장한 블로그” 프로젝트를 위해. 그 후, 이미 선인장에 프로젝트가 보입니다..

파일 수정하기

블로그 템플릿을 사용하여 생성 된 프로젝트가 이제 Finder에 존재합니다. 이제 블로그를 구축하는 데 필요한 요소를 살펴 보겠습니다. 파일이 보관 된 디렉토리로 이동하십시오. 우리가 사용할 기본 디렉토리는 다음과 같습니다. 템플릿, 페이지, 과 공전 예배 규칙서. 다른 사람들은 지금 건너 뛰자..

일들을 간결하게 유지하기 위해 각 디렉토리의 목적은 다음과 같습니다.

템플릿: 템플릿으로 동작하는 HTML 파일을 포함하며, 빌드 할 페이지의 HTML 파일에서 사용됩니다..
페이지: 동일한 경로를 가진 페이지가 될 모든 HTML 파일을 포함합니다. 예 : hello.html은 http://yoursite.com/hello.html이됩니다.
공전: CSS, Javascript 및 이미지와 같은 모든 정적 리소스를 포함합니다..

이제 우리는 디렉토리에서 3 개의 메인 파일을 편집 할 것입니다 : base.html 과 post.html 템플릿 디렉토리에서 index.html Pages 디렉토리.

선인장 사용 장고 템플릿 엔진 템플릿 언어 용. 이를 통해 다른 HTML 파일의 HTML 요소를 포함 할 수 있으므로 코드를 복제 할 필요가 없습니다. 가장 많이 사용되는 기능은 다음과 같습니다. 템플릿 상속 과 변하기 쉬운.

작동 원리를 보려면 먼저 base.html 템플릿 디렉토리.

       % block title % 블로그 % endblock %      % 차단 콘텐츠 % 주요 콘텐츠 % 종료 블록 콘텐츠 % ---

base.html 우리가 '해골'템플릿으로 사용하는 간단한 html 파일입니다. 여기에는 사이트의 공통 요소가 포함되어 있습니다. 너는 몇몇을 볼 수있다. “블록들” 거기에; 자식 템플릿을 사용하여 이러한 블록을 재정의합니다..

이제 post.html 같은 디렉토리에있다. base.html.

 % extends "base.html"% % 블록 제목 % title | 선인장 % endblock title % % 차단 콘텐츠 % ---  title
  표제  
 
  % block body % 게시물 내용이있는 곳입니다. % endblock body % 
 --- % 종료 블록 콘텐츠 %

그만큼 post.html 블로그 항목 페이지의 마크 업을 포함합니다. 첫 번째 줄에서는 post.html 연장하다 base.html. 이것은 우리가 블록을 base.html 여기에 블록들이있다..

여기서도 변수를 찾을 수 있습니다. title 과 표제 . 나중에 블로그 항목에 이러한 변수 값을 정의 할 것입니다..

자, % block body % 블록. 이것은 우리 블로그의 게시물 항목을 포함하는 하위 템플릿에 의해 무시 될 것입니다.

디렉토리로 이동 페이지 / 게시물. 나머지 게시물 항목은 다음과 같습니다..

 제목 : 내 게시물 항목 제목 : 내 게시물 제목 작성자 : 날짜 : 15-01-2015 % extends "post.html"% % block body % % filter markdown % Lorem ipsum dolor sitet, consectetur adipisicing 엘리트. 귀족, 집회는 집안일과 집회를 할 때, 집회를 할 때, 집회를 할 때, 집회가 끝날 때까지 할애하라. --- % endfilter % % endblock body %

게시물 항목에서 제목, 제목, 작성자 및 날짜와 같은 변수에 가치를 부여합니다. 이 값은 부모 템플릿에서 변수 이름을 호출 할 때 전달됩니다. 그런 다음 Markdown을 사용하여 블로그의 내용을 작성합니다..

이제 블로그의 색인 페이지로 이동하여 index.html ~ 안에 페이지들 예배 규칙서. 블로그 항목 목록과 각 항목에 대한 링크가 포함되어 있습니다. 주 코드는 다음과 같습니다.

 % extends "base.html"% % 차단 콘텐츠 % --  게시물 %의 게시물 %  post.date | date : "M j" post.title 게시물의 제목 
 % endfor % 
 -- % 종료 블록 콘텐츠 %

이 시점에서 우리는 두 개의 메인 페이지가있는 간단한 블로그를 가지고 있습니다. 색인 페이지 블로그 항목을 포함하는 블로그 항목 페이지 그 자체.

선인장 창으로 가서 미리보기 버튼을 클릭하여 서버를 시작하십시오. 자동으로 브라우저가 열리고 웹 사이트가 열립니다..

SCSS를 사용하여 블로그 스타일 지정하기

Cactus의 가장 큰 특징 중 하나는 바로 SASS / SCSS와 함께 작동한다는 것입니다. 다만 .sass 또는 .scss 파일을 삭제하십시오. 로 공전 디렉토리에 저장하고 파일을 편집하고 저장할 때마다 Cactus는 자동으로 CSS를 생성합니다.

여기에서는 부트 스트랩을 사용하여 블로그를 스타일링하는 예제를 제공합니다. 당신이 bower를 사용하고 있고, 터미널을 열고, 공전 우리 프로젝트의 디렉토리 CD 명령. 그런 다음이 명령을 사용하여 bootstrap-sass를 설치하십시오.

$ bower 설치 부트 스트랩 - 새 스 - 공식

다운로드가 완료되면 bower_components 정적 디렉토리 안에있는 디렉토리 부트 스트랩 - 새 스 - 공식.

이제 다음 디렉토리로 이동하십시오. 정적 / CSS. scss 파일을 만들고 이름을 지정하십시오. syle-bs.scss 이 코드를 삽입하십시오..

 @import "... / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap";

코드가하는 일은 bootstrap-sass에서 모든 것을 가져 오는 것입니다. style-bs.scss를 저장하면 부트 스트랩의 모든 스타일을 포함하는 동일한 디렉토리에 bs.css 스타일이 생성됩니다..

프로젝트 배포

마지막으로 프로젝트 준비가 완료되면 프로젝트를 실시간 버전에 쉽게 배포 할 수 있습니다. Amazon S3 사용.