[Jekyll X BLOG] 나만의 블로그 설정 준비하기(feat. Jekyll)

2 분 소요

<h2 id="목차">목차</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" /><strong>Jekyll로 블로그 설정 준비하기</strong></li>
  <li class="task-list-item">(2) 원하는 Jekyll 테마 찾아보기</li>
  <li class="task-list-item">(3) Markdown 기본 문법</li>
  <li class="task-list-item">(4) Git을 이용해서 실제 배포해보기</li>
  <li class="task-list-item">(5) 내 블로그 검색되게 해주세요(Google-Search/Naver-Advisor)</li>
</ul>

<h2 id="개요">개요</h2>
<p>나만의 블로그를 제작하는 방법은 여러가지가 있습니다.<br />
예를 들자면, 네이버 블로그나 티스토리가 있죠<br />
하지만 뭔가 심심한 느낌이 있고 내가 스스로 이것저것 만들고 바꿔보고 싶다면</p>

<p>개발자가 아니더라도 따라하면 쉽게 가능하니 이제 시작하는 문서를 참고부탁드립니다.<br />
예로부터 시작이 반이라고 했고 초기 설정만 제대로 한다면 솔직히 반 이상을 한거나 다름이 없다고 생각합니다.</p>

<p>본 블로그는 Windows 환경에서 제작되었습니다.</p>

<h3 id="ruby">Ruby?</h3>
<blockquote>
  <p>Jekyll은 Ruby로 만들어졌기에 기본적으로 설치를 하셔야 사용이 가능합니다</p>
</blockquote>

<p>프로그램 언어 중 하나이자 스크립트 언어의 일종, Python과는 라이벌 관계.
초보자들이 다루기 쉬운 언어라고 합니다. 응용해서 Ruby on rails라는 웹 프레임워크를 사용할 수 있지만<br />
단순히 Jekyll을 사용할 것이므로 간단히 설치해주고 넘어갈게요</p>

<p>참고로 Ruby 언어가 매력적으로 느껴지신다면,<br />
<a href="https://www.codecademy.com/catalog/language/ruby">코드카데미 강좌[영문]</a><br />
<a href="https://www.railsguidebook.com/">초보자를 위한 레일스 가이드북</a><br />
해당 사이트에서 더 깊은 공부를 하실 수 있습니다.</p>

<p><a href="https://rubyinstaller.org/">루비 공식 홈페이지</a>에서 다운로드페이지로 넘어갑니다</p>

<p>원하는 버전에 유의하시어 각자 환경에 맞는 인스톨러를 설치합니다.<br />
처음 설치하시는 분들은 추천버전(Devkit 포함) 다운받는 것을 권장합니다.</p>

<p>MYS32 development toolchain : 루비로 개발 시 필요하므로 체크하고 넘어갑니다</p>

<p>설치가 완료되면 CMD창이 나오는데 여기서 필요하에 (저의 경우) 1, 2, 3 순서대로 완료하시고</p>

<p>끝으로 CMD창을 열어</p>

<p>을 입력하시면</p>

<h3 id="gem">Gem</h3>
<blockquote>
  <p>젬은 루비 프로젝트에 포함시킬 수 있는 코드입니다. 기능들을 패키지화해서 다른 사람들이나 프로젝트에 공유할 수 있게 해줍니다.</p>
</blockquote>

<p>간단하게 필요한 기능이 있을 때, 이 때 Gem을 통해 루비 어플리케이션이나 라이브러리를 설치 및 패키징 관리하는 역할을 합니다.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem install '패키지명' (설치)  
gem update '패키지명' (갱신)  
gem uninstall '패키지명' (삭제)  
</code></pre></div></div>

<h3 id="bundler">Bundler?</h3>

<blockquote>
  <p>Bundler 는 Gemfile 에 있는 젬들을 설치합니다.</p>
</blockquote>

<p>앞서 Gem들을 하나하나 설치하기 힘드므로 이를 한번에 묶음으로 처리해주기 위해 Bundler라는 프로그램을 사용합니다.</p>

<p>먼저 Bundler를 설치하기 위해서</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">gem install bundler</span>
</code></pre></div></div>
<p>Gem의 사용방식과 유사합니다.</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">bundle install</span>
<span class="s">bundle update</span>
</code></pre></div></div>
<h3 id="gemfile">GemFile?</h3>

<p>Gemfile 은 사이트에 필요한 젬들의 목록입니다. 단순한 Jekyll 사이트를 예로 들면 이렇게 생겼습니다:</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">source "https://rubygems.org"</span>

<span class="s">gem "jekyll"</span>

<span class="s">group :jekyll_plugins do</span>
  <span class="s">gem "jekyll-feed"</span>
  <span class="s">gem "jekyll-seo-tag"</span>
<span class="s">end</span>
</code></pre></div></div>
<p>이 문서에 필요프로그램을 작성하면 위 bundler가 한꺼번에 처리해주는 역할을 합니다.</p>

<p>일단 이 문서에서는 GemFile을 사용하지 않고 단순하게 Jekyll을 통해 로컬 서버에 적용하는 예제를 다루겠습니다.</p>

<h2 id="jekyll">Jekyll?</h2>
<blockquote>
  <p>Jekyll 은 정적 사이트 생성기입니다.<br />
당신이 즐겨 사용하는 마크업 언어로 작성된 텍스트를 Jekyll 에 넘겨주면 레이아웃을 사용해 정적 웹사이트를 생성합니다.<br />
사이트 URL 의 형식이나 어떤 데이터를 사이트에 표시할 것인지 등, 여러 동작을 조정할 수 있습니다.</p>
</blockquote>

<p>Jekyll 은 평범한 루비 젬이며, 거의 모든 시스템에 설치할 수 있습니다.</p>

<p>Jekyll을 설치하기 위해서 위와 같은 코드로<br />
gem을 설치하고</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="s">gem install jekyll</span>
</code></pre></div></div>
<p><img src="/assets/images/jekyll/gem-install-jekyll.png" alt="" /></p>

<p>하지만 설치도중 다음과 같은 에러가 발생했습니다.
<img src="/assets/images/jekyll/jekyll-install-error.png" alt="" /></p>

<p>추가로 Gem을 업데이트 시켜줍니다.<br />
(저는 이전 버전을 쓰기때문에 발생하지 않았을까 생각이 드네요)</p>

<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s">gem update --system</span>
</code></pre></div></div>
<p><img src="/assets/images/jekyll/jekyll-install-error-solve.png" alt="" /></p>

<h2 id="로컬서버에-적용하기">로컬서버에 적용하기</h2>
<p>새 jekyll 사이트를 생성</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll new blog
</code></pre></div></div>
<p><img src="/assets/images/jekyll/jekyll-create-(1).png" alt="" /></p>

<p>생성된 디렉토리로 이동 후</p>

<p>새 파일을 생성해 index.html이라 저장합니다.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!doctype html></span>
<span class="nt"><html></span>
  <span class="nt"><head></span>
    <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
    <span class="nt"><title></span>NEW BLOG<span class="nt"></title></span>
  <span class="nt"></head></span>
  <span class="nt"><body></span>
    <span class="nt"><h1></span>Hello! World!<span class="nt"></h1></span>
  <span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>

<p>사이트를 빌드하고 로컬 서버에 적용</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle exec jekyll serve
</code></pre></div></div>
<p><img src="/assets/images/jekyll/jekyll-serve.png" alt="" /></p>

<p>http://localhost:4000 접속 확인</p>

<p>위와 같은 화면이 표시된다면 성공!
로컬 서버를 종료시 <code class="language-plaintext highlighter-rouge">Ctrl + C</code>를 입력해주세요.</p>

<p>다음 시간엔 Jekyll에서 사용할 수 있는 테마와 구조에 대해 알아보도록 하겠습니다.</p>

<h2 id="참고사이트">참고사이트</h2>
<p><a href="http://jekyllrb-ko.github.io/docs/installation/">http://jekyllrb-ko.github.io/docs/installation/</a></p>

<p class="notice--warning">수정이 필요하거나, 개선사항이 있을시 답글을 남겨주시면 빠른 시일안에 해당 항목을 수정하겠습니다.</p>

개요

나만의 블로그를 제작하는 방법은 여러가지가 있습니다.
예를 들자면, 네이버 블로그나 티스토리가 있죠
하지만 뭔가 심심한 느낌이 있고 내가 스스로 이것저것 만들고 바꿔보고 싶다면

개발자가 아니더라도 따라하면 쉽게 가능하니 이제 시작하는 문서를 참고부탁드립니다.
예로부터 시작이 반이라고 했고 초기 설정만 제대로 한다면 솔직히 반 이상을 한거나 다름이 없다고 생각합니다.

본 블로그는 Windows 환경에서 제작되었습니다.

환경 설정하기

Ruby?

Jekyll은 Ruby로 만들어졌기에 기본적으로 설치를 하셔야 사용이 가능합니다

프로그램 언어 중 하나이자 스크립트 언어의 일종, Python과는 라이벌 관계. 초보자들이 다루기 쉬운 언어라고 합니다. 응용해서 Ruby on rails라는 웹 프레임워크를 사용할 수 있지만
단순히 Jekyll을 사용할 것이므로 간단히 설치해주고 넘어갈게요

참고로 Ruby 언어가 매력적으로 느껴지신다면,
코드카데미 강좌[영문]
초보자를 위한 레일스 가이드북
해당 사이트에서 더 깊은 공부를 하실 수 있습니다.

루비 공식 홈페이지에서 다운로드페이지로 넘어갑니다

원하는 버전에 유의하시어 각자 환경에 맞는 인스톨러를 설치합니다.
처음 설치하시는 분들은 추천버전(Devkit 포함) 다운받는 것을 권장합니다.

MYS32 development toolchain : 루비로 개발 시 필요하므로 체크하고 넘어갑니다

설치가 완료되면 CMD창이 나오는데 여기서 필요하에 (저의 경우) 1, 2, 3 순서대로 완료하시고

끝으로 CMD창을 열어

  ruby -v

을 입력하시면

다음과 같이 버전 정보가 나오면 성공!

Gem

젬은 루비 프로젝트에 포함시킬 수 있는 코드입니다. 기능들을 패키지화해서 다른 사람들이나 프로젝트에 공유할 수 있게 해줍니다.

간단하게 필요한 기능이 있을 때, 이 때 Gem을 통해 루비 어플리케이션이나 라이브러리를 설치 및 패키징 관리하는 역할을 합니다.

gem install '패키지명' (설치)  
gem update '패키지명' (갱신)  
gem uninstall '패키지명' (삭제)  

Bundler?

Bundler 는 Gemfile 에 있는 젬들을 설치합니다.

앞서 Gem들을 하나하나 설치하기 힘드므로 이를 한번에 묶음으로 처리해주기 위해 Bundler라는 프로그램을 사용합니다.

먼저 Bundler를 설치하기 위해서

gem install bundler

Gem의 사용방식과 유사합니다.

bundle install
bundle update

GemFile?

Gemfile 은 사이트에 필요한 젬들의 목록입니다. 단순한 Jekyll 사이트를 예로 들면 이렇게 생겼습니다:

source "https://rubygems.org"

gem "jekyll"

group :jekyll_plugins do
  gem "jekyll-feed"
  gem "jekyll-seo-tag"
end

이 문서에 필요프로그램을 작성하면 위 bundler가 한꺼번에 처리해주는 역할을 합니다.

일단 이 문서에서는 GemFile을 사용하지 않고 단순하게 Jekyll을 통해 로컬 서버에 적용하는 예제를 다루겠습니다.

Jekyll?

Jekyll 은 정적 사이트 생성기입니다.
당신이 즐겨 사용하는 마크업 언어로 작성된 텍스트를 Jekyll 에 넘겨주면 레이아웃을 사용해 정적 웹사이트를 생성합니다.
사이트 URL 의 형식이나 어떤 데이터를 사이트에 표시할 것인지 등, 여러 동작을 조정할 수 있습니다.

Jekyll 은 평범한 루비 젬이며, 거의 모든 시스템에 설치할 수 있습니다.

Jekyll을 설치하기 위해서 위와 같은 코드로
gem을 설치하고

 gem install jekyll

하지만 설치도중 다음과 같은 에러가 발생했습니다.

추가로 Gem을 업데이트 시켜줍니다.
(저는 이전 버전을 쓰기때문에 발생하지 않았을까 생각이 드네요)

gem update --system

로컬서버에 적용하기

새 jekyll 사이트를 생성

jekyll new blog

생성된 디렉토리로 이동 후

새 파일을 생성해 index.html이라 저장합니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NEW BLOG</title>
  </head>
  <body>
    <h1>Hello! World!</h1>
  </body>
</html>

다시 Cmd로 돌아와서

cd blog

사이트를 빌드하고 로컬 서버에 적용

bundle exec jekyll serve

http://localhost:4000 접속 확인

위와 같은 화면이 표시된다면 성공! 로컬 서버를 종료시 Ctrl + C를 입력해주세요.

다음 시간엔 Jekyll에서 사용할 수 있는 테마와 구조에 대해 알아보도록 하겠습니다.

참고사이트

http://jekyllrb-ko.github.io/docs/installation/

수정이 필요하거나, 개선사항이 있을시 답글을 남겨주시면 빠른 시일안에 해당 항목을 수정하겠습니다.

Twitter Facebook LinkedIn

SG Yoo.

[Jekyll X BLOG] 나만의 블로그 설정 준비하기(feat. Jekyll)

목차

개요

환경 설정하기

Ruby?

Gem

Bundler?

GemFile?

Jekyll?

로컬서버에 적용하기

참고사이트

공유하기

댓글남기기

참고

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(6/11)

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(6/4)

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(5/28)

[정보보안기사/네트워크] 스푸핑(Spoofing) / 원격접속 공격