깃허브페이지스(github pages), 지킬(jekyll) 이용해서 무료 블로그 만들기 #2-샘플사이트 만들기

jekyll 로 정적인 사이트 만들기

1단계에서 환경을 설정하고 jekyll 로 sample 사이트를 만든다

$ jekyll new myblog ~ $ cd myblog ~/myblog $ bundle exec jekyll serve

개발환경이 준비 된 후에 jekyll new 생성하는폴더명 을 실행하면 sample 사이트가 생성된다

해당 폴더로 들어가면 다음 같은 폴더 구조를 확인할 수 있다.

자세한 jekyll 폴더 구조는 http://jekyllrb-ko.github.io/docs/structure/ 에서 확인할 수 있다.

​

폴더

_posts : 작성하는 글이 등록되는 폴더

_site : jekyll 로 작성한 파일들이 html 로 변환되어 저장되는 폴더

​

파일

_config.yml : 환경설정 파일

Gemfile : 루비의 라이브러리(gem)를 등록하는 파일 => Gemfile.lock 를 생성하는 기준이 된다.

Gem 의 의존성 관리를 위해서 Bundler 를 사용한다.

$ gem install bundler <== 이렇게 bundler 를 설치한다. $ bundle install <== Gemfile 이 있는 곳에서 실행하면 Gemfile 에 명시된 젬을 사용할 수 있게 된다.

index.md : 첫 화면

about.md : about 으로 표시할 화면 (***.md 또는 ***.markdown 으로 작성하면 jekyll 이 html 로 변환시켜준다)

Jekyll 사이트 띄우기

위에서 생성해놓은 폴더에서 실행시킨다.

$ bundle exec jekyll serve

​

그럼 웹브라우저에서 http://127.0.0.1:4000/ 으로 확인할 수 있다.

내정보로 변환하기

기본적인 정보들은 _config.yml 파일에 등록해준다

​

기본적인 _config.yml 파일 내용을 내 정보에 맞게 변환시켜야 한다

itle: Your awesome title email: your-email@example.com description: >- # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. baseurl: "" # the subpath of your site, e.g. /blog url: "" # the base hostname & protocol for your site, e.g. http://example.com twitter_username: jekyllrb github_username: jekyll # Build settings markdown: kramdown theme: minima plugins: - jekyll-feed

​

글등록하기

글 (컨텐츠)을 등록하기 위해서는 _posts 폴더 에 markdown 문법형식의 파일을 만들면 됩니다

파일 네이밍 룰은 날짜-고유 URL.md 또는 .markdown 으로 작성하면 jekyll 이 html 로 자동 변환해줍니다.

글 등록을 하려면 신규파일을 2018-09-20-first-post.markdown 또는 2018-09-20-first-post.md 로 생성하고

--- layout: post title: "처음쓰는 POST 입니다" date: 2018-09-20 11:00:00 +0900 categories: jekyll update --- # 제목앞에는 #이 1개면 제목 타입 기본적인 문단은 그냥 작성하면 문단으로 인식합니다. ## 샵이 2개면 H2 작아지는 제목 기본적인 문단은 그냥 작성하면 문단으로 인식합니다. ### 샵이 3개면 H3 작아지는 제목 기본적인 문단은 그냥 작성하면 문단으로 인식합니다. 마크다운 문법은 [마크다운 문법확인하기][markdown-url] [markdown-url]: https://gist.github.com/ihoneymon/652be052a0727ad59601

작성하고 저장하면 jekyll 이 바로 html 로 전환해서 http://127.0.0.1:4000/ 에서 바로 확인할 수 가 있음

마크다운 문법을 활용하여 기본적인 컨텐츠를 작성할 수 있다

https://gist.github.com/ihoneymon/652be052a0727ad59601

이미지를 추가 할 때는 assets 라는 폴더를 만들고 이미지 파일을 images 에 올린 후에 그 경로를 사용하여 마크다운 문법에 따라서 표시해주면 된다

정적인 파일들을 위해서 assets 밑에 용도별 폴더를 만들어서 파일들을 올리면 관리하기 편하다

​