Setup/opensource

정적 웹사이트 생성시 Jekyll 설치 및 간단 사용법

goodsaem 2021. 7. 27. 23:32

정적 웹사이트 생성시 Jekyll 설치 및 간단 사용법

개요

Jekyll은 정적(static) 웹사이트 생성기 입니다. Markdown이란 문법으로 문서를 작성하고 이를 build를 시켜주면 정적 웹페이지(html) 를 생성해 줍니다. 그리고 php 같은 언어를 사용할때 header.php footer.php 같은걸 만들어 새로운 페이지를 만들때 위에 두파일을 include하는데 지킬또한 이런걸 지원해 줍니다. tistory가 많이 좋아져서 귀찮게 저런걸 써야 하는 생각도 있었지만 javascript 예제코드를 작성하고 실행할때 즉 웹어플리케이션 데모를 보여줄때는 필요할것 같아서 Jekyll 설치 방법에 대해서 정리하고 실제로 정적 웹사이트를 만들어 볼려고 합니다. 그리고 티스토리 같은경우에는 일일 발행할수 있는 글수가 15개로 제한되는데 지킬로 문서를 작성하고 github에 publish를 수행하면 이런 제한도 받지 않습니다. 사실 하루에 글 하나 적는것도 힘들긴 하지만 … 만약 글쓰고 싶은날 제한에 걸리면 한번쯤은 사용할수 있을것 같네요.

여담이지만 본 블로그를 jekyll로 구성할려고 자료를 정리했다가 hexo로 변경하여 설치하면서 정리했던 내용을 기록으로 남깁니다.

설치

jekyll을 사용하기 위해서는 루비를 설치해야 됩니다. 각각의 OS 별 루비 설치는 아래 링크를 확인하세요 전 mac을 사용 하므로 mac설치법을 보고 그대로 진행 하겠습니다. https://jekyllrb-ko.github.io/docs/installation/macos/
https://jekyllrb-ko.github.io/docs/installation/

 

맥OS 카탈리나 버전에서는 루비가 기본 탑재되어 있다고 하네요… 그래서 바로 지킬 설치를 진행하겠습니다.

$ gem install bundler jekyll

설치가 완료되고 나면 아래와 같은 결과를 확인할수 있습니다.

Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Done installing documentation for bundler after 2 seconds
Successfully installed jekyll-4.1.0
Parsing documentation for jekyll-4.1.0
Done installing documentation for jekyll after 0 seconds
2 gems installed

 

우선 설치까지만 하고 github 사이트에 내계정명과 동일한 repository를 만듭니다.
Github 계정생성하는 부분은 https://codingsarang.github.io/2020/07/08/opensource/githubCreate/ 링크를 클릭하여 확인 하세요

우측 상단의 + 버튼을 클릭하고 New repository 메뉴를 선택합니다.

Repository Name을 “계정명.github.io”라고 입력하고 Initialize this repository with a README 부분에 체크하고 Create repository 버튼을 클릭 합니다.

Create new file 버튼을 클릭합니다.

New file name 에는 index.html을 입력하고 edit new file에 아래와 같은 html을 작성한후 commit 로그를 작성하고 commit new file버튼을 클릭하여 index.html 을 생성합니다.

html 내용

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="liked">좋아요 눌렀음</div>
        <button v-else v-on:click="onClickButton">like</button>
    </div>    
</body>
<script>
    const app = new Vue({
        el: '#root',
        data: {
            liked : false,
        },
        methods: {
            onClickButton() {
                this.liked = true;
            }
        },
    });
</script>
</html>

아래처럼 https://계정명.github.io/index.html을 실행하면 아래와 같은 화면이 출력됩니다.(참고로 위 index.html vue.js 를 이용하여 만들었음)

 

처음부터 끝까지 블로그를 만드는건 비효율적이라 생각하여 나와 맞는 테마를 찾아서 github clone을 통하여 초기 셋업을 진행합니다.
아래 사이트를 그래로 복사해서 진행하겠습니다.

https://github.com/passbolt/passbolt_help

※ 해당 템플릿은 Passbolt help code is distributed under the Affero General Public License v3 Passbolt help text is distributed under Creative Common BY-SA-4.0 이런 라이선스 정책을 가지고 있어 사용해도 문제가 되지 않습니다.

Creative Common BY-SA-4.0 라이선스 정책

아래 명령어를 입력하여 복제를 진행 합니다.

git clone https://github.com/passbolt/passbolt_help.git

위에 명령어를 실행하면 아래와 같이 정상 복제 되었음을 확인할수 있습니다.

Cloning into 'passbolt_help'...
remote: Enumerating objects: 1015, done.
remote: Counting objects: 100% (1015/1015), done.
remote: Compressing objects: 100% (546/546), done.
remote: Total 10735 (delta 741), reused 665 (delta 443), pack-reused 9720
Receiving objects: 100% (10735/10735), 37.08 MiB | 9.08 MiB/s, done.
Resolving deltas: 100% (8301/8301), done.

복제된 디렉토리로 이동후 jekyll build 수행합니다.

cd passbolt_help
bundle exec jekyll build

실행결과

Configuration file: /Users/opensourcereporter/passbolt_help/_config.yml
            Source: /Users/opensourcereporter/passbolt_help
       Destination: docs
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 3.849 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

서버실행

bundle exec jekyll serve

실행결과

  Server running... press ctrl-c to stop.
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:19 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:20 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:18 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'

 

웹 브라우저에서 확인하면 아래와 같은 화면을 확인할수 있습니다.
http://127.0.0.1:4000/

 

이제 복제된 파일들을 내 github 계정에 올립니다.

Command 스페이스바를 눌러서 github desktop을 실행 합니다.

github desktop설치는 아래 post를 참고하세요

https://codingsarang.github.io/2020/07/10/opensource/githubDesktop/

아래 그림과 같이 추가된 파일들을 publish하기위해 아래 그림처럼 적당하게 commnet를 입력하고 commit to master 버튼을 클릭 합니다.

 

그리고 나서 우측에 Pull Origin버튼을 클릭 합니다.

Pull origin

아래 사이트 들어가면 로컬에서 생성된것과 동일한 github 페이지를 확인할수 있습니다.
https://계정명.github.io/index.html

저작자표시 (새창열림)