-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js
2 lines (2 loc) · 41.7 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js
1
2
"use strict";(self.webpackChunkkyoungah_dev_blog=self.webpackChunkkyoungah_dev_blog||[]).push([[207],{3003:function(n,a,s){s.r(a),s.d(a,{default:function(){return y}});var t=s(6540),e=s(8453);function p(n){const a=Object.assign({p:"p",a:"a",h2:"h2",span:"span",h3:"h3",blockquote:"blockquote",ul:"ul",li:"li"},(0,e.R)(),n.components);return t.createElement(t.Fragment,null,t.createElement(a.p,null,"이번 주 내내 Hexo로 만든 블로그를 Gatsby로 마이그레이션 하는 작업을 했다. Hexo도 나름 편했지만 테마를 원하는 대로 새로 만들거나 커스터마이징 하기 좀 어렵다는 단점이 있었다. 그러다가 ",t.createElement(a.a,{href:"/etc/gdg-frontend-endgame"},"6월 말에 갔던 컨퍼런스"),"에서 몇몇 연사자 분들이 Gatsby.js를 언급하셔서 관심이 생겨 한번 찾아보았다. React.js, GraphQL 등을 사용하여 만들어진 정적 HTML 생성기 였는데 이걸 사용하면 테마는 물론 블로그 자체를 원하는대로 커스터마이징 하기 쉬울 것 같아 Gatsby.js로 블로그 마이그레이션을 결심했다."),"\n",t.createElement(a.h2,null,"Gatsby 프로젝트 생성"),"\n",t.createElement(a.p,null,t.createElement(a.a,{href:"https://www.gatsbyjs.org/docs/quick-start/"},"gatsby-cli"),"를 사용하면 아주 편리하게 gatsby 프로젝트를 생성할 수 있다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="markdown"><pre class="language-markdown"><code class="language-markdown">// 전역으로 gatsby-cli 설치\nnpm install -g gatsby-cli\n\n// gatsby 프로젝트 생성\ngatsby new gatsby-site\n\ncd gatsby-site\n\n// gatsby 개발 서버 실행\ngatsby develop</code></pre></div>'}}),"\n",t.createElement(a.p,null,"나는 내 입맛에 맞는 테마를 만들고 싶어 기본 starter를 이용했는데 원하는 starter를 선택한 후 프로젝트를 생성할 수 도 있다. 컨퍼런스에서 Gatsby를 제일 먼저 소개해주셨던 연사자분도 ",t.createElement(a.a,{href:"https://github.com/JaeYeopHan/gatsby-starter-bee"},"gatsby-starter-bee"),"라는 starter를 만드셨다."),"\n",t.createElement(a.h2,null,"TypeScript 환경 구축하기"),"\n",t.createElement(a.p,null,"요즘 대세인 TypeScript을 Gatsby 프로젝트에도 적용하기로 했다. 평소 js 프로젝트에 TypeScript 환경을 설정하는 것과 비슷하다. gatsby-config.js 파일에 gatsby-plugin-typescript 플러그인만 추가해주면 된다."),"\n",t.createElement(a.p,null,"TypeScript 환경을 구축하고 나니 functional Component가 제대로 작동 안하는 이슈가 있었는데 ",t.createElement(a.a,{href:"https://github.com/gatsbyjs/gatsby/issues/15423"},"gatsby를 2.13.8 버전으로 업데이트"),"하고 나니 정상 작동 되었다."),"\n",t.createElement(a.h3,null,"Install"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">yarn add typescript @types/react @types/react-dom gatsby-plugin-typescript @types/react-helmet</code></pre></div>'}}),"\n",t.createElement(a.h3,null,"tsconfig.json"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"target"</span><span class="token operator">:</span> <span class="token string">"es5"</span><span class="token punctuation">,</span>\n <span class="token property">"module"</span><span class="token operator">:</span> <span class="token string">"commonjs"</span><span class="token punctuation">,</span>\n <span class="token property">"allowJs"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token property">"jsx"</span><span class="token operator">:</span> <span class="token string">"react"</span><span class="token punctuation">,</span>\n <span class="token property">"strict"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 엄격한 타입 검사 옵션을 활성화 한다.</span>\n <span class="token property">"esModuleInterop"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// import * as React 처럼 import 하는 것을 import React 이런 식으로 import 할 수 있도록 도와준다.</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-config.js"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 생략...</span>\n\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// 생략...</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-plugin-typescript</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"styled-components 설정하기"),"\n",t.createElement(a.p,null,t.createElement(a.a,{href:"https://www.gatsbyjs.org/docs/styled-components/"},"styled-component"),"가 너무 편해서 블로그에서도 사용할 수 있도록 설정했다. 글로벌 css 역시 styled-components의 createGlobalStyle 함수를 사용하여 적용하였다."),"\n",t.createElement(a.h3,null,"Install"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components</code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-config.js"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 생략...</span>\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// 생략...</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-plugin-styled-components</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"markdown 설정하기"),"\n",t.createElement(a.p,null,"Gatsby는 데이터 소스라는 곳에서 GraphQL을 이용하여 데이터를 가지고 온다. 이 데이터 소스는 Wordpress같은 CMS 도구가 될 수도 있고 다른 정적 사이트 생성기처럼 Markdown 파일이 될 수도 있고 API 등을 통해서 다른 곳에서 가져올 수도 있다. 플러그인 시스템이 잘 되어 있어서 다양한 데이터소스에서 데이터를 가져올 수 있다.\n나는 데이터 소스가 markdown 파일이 되도록 설정 했다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="markdown"><pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>\n<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Hexo 에서 Gatsby로 블로그 마이그레이션 하기\n<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2019-07-04</span>\n<span class="token key atrule">description</span><span class="token punctuation">:</span> Hexo에서 Gatsby로 블로그 마이그레이션 하는 과정을 정리하였습니다.</span>\n<span class="token punctuation">---</span></span></code></pre></div>'}}),"\n",t.createElement(a.h3,null,"Install"),"\n",t.createElement(a.p,null,"markdown 파일을 읽기 위해서는 gatsby-source-filesystem 플러그인이 필요하고 markdown 파일을 해석하기 위해서는 gatsby-transformer-remark 플러그인이 필요하다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">yarn add gatsby-source-filesystem gatsby-transformer-remark\n</code></pre></div>'}}),"\n",t.createElement(a.h3,null,"blogTeplate.tsx"),"\n",t.createElement(a.p,null,"markdown 파일에서 가져온 정보를 뿌려주기 위한 템플릿을 만들어주자."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// 생략...</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Template</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n data<span class="token punctuation">,</span> <span class="token comment">// this prop will be injected by the GraphQL query below.</span>\n<span class="token punctuation">}</span><span class="token operator">:</span> any<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> markdownRemark <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">;</span> <span class="token comment">// data.markdownRemark holds our post data</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> frontmatter<span class="token punctuation">,</span> html <span class="token punctuation">}</span> <span class="token operator">=</span> markdownRemark<span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span><span class="token operator">></span>\n <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"blog-post-container"</span><span class="token operator">></span>\n <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"blog-post"</span><span class="token operator">></span>\n <span class="token operator"><</span>h1<span class="token operator">></span><span class="token punctuation">{</span>frontmatter<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>\n <span class="token operator"><</span>h2<span class="token operator">></span><span class="token punctuation">{</span>frontmatter<span class="token punctuation">.</span>date<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>\n <span class="token operator"><</span>div\n className<span class="token operator">=</span><span class="token string">"blog-post-content"</span>\n dangerouslySetInnerHTML<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">__html</span><span class="token operator">:</span> html <span class="token punctuation">}</span><span class="token punctuation">}</span>\n <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">// grapthql을 이용하여 markdown에서 데이터를 가지고 온다.</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> pageQuery <span class="token operator">=</span> graphql<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\n query ($path: String!) {\n markdownRemark(frontmatter: { path: { eq: $path } }) {\n html\n frontmatter {\n date(formatString: "YYYY년 MM월 DD일")\n path\n title\n }\n }\n }\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-config.js"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 생략...</span>\n\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-source-filesystem</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">posts</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/src/마크다운 파일이 있는 폴더명</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-transformer-remark</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-node.js"),"\n",t.createElement(a.p,null,"gatsby는 Node API를 사용하여 정적페이지를 생성한다. 이 API를 사용하기 위해서는 gatsby-node.js 파일에서 설정이 필요하다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">path</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> createFilePath <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gatsby-source-filesystem"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nexports<span class="token punctuation">.</span><span class="token function-variable function">createPages</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> actions<span class="token punctuation">,</span> graphql <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token operator">=</span> actions<span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> blogPostTemplate <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">src/templates/blogTemplate.tsx</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token function">graphql</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\n {\n allMarkdownRemark(\n sort: { order: DESC, fields: [frontmatter___date] }\n limit: 1000\n ) {\n edges {\n node {\n frontmatter {\n path\n }\n }\n }\n }\n }\n </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>allMarkdownRemark<span class="token punctuation">.</span>edges<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> node <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> node<span class="token punctuation">.</span>fields<span class="token punctuation">.</span>slug<span class="token punctuation">,</span>\n <span class="token literal-property property">component</span><span class="token operator">:</span> blogPostTemplate<span class="token punctuation">,</span>\n <span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">slug</span><span class="token operator">:</span> node<span class="token punctuation">.</span>fields<span class="token punctuation">.</span>slug<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// additional data can be passed via context</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 페이지 slug를 만들기 위한 함수.</span>\nexports<span class="token punctuation">.</span><span class="token function-variable function">onCreateNode</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> node<span class="token punctuation">,</span> actions<span class="token punctuation">,</span> getNode <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> createNodeField <span class="token punctuation">}</span> <span class="token operator">=</span> actions<span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>internal<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">MarkdownRemark</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">createFilePath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> node<span class="token punctuation">,</span> getNode <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">createNodeField</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">slug</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n node<span class="token punctuation">,</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"code highlight 설정하기"),"\n",t.createElement(a.p,null,"code highlight에는 prismjs를 사용했다. 원래는 highlight.js를 사용했는데 gatsby 플러그인을 찾을 때 prismjs가 별이 좀 더 많아서 끌렸다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">yarn add gatsby-remark-prismjs prismjs\n</code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-config.js"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 생략...</span>\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-transformer-remark</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gatsby-remark-prismjs</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">classPrefix</span><span class="token operator">:</span> <span class="token string">"language-"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">inlineCodeMarker</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>\n <span class="token literal-property property">aliases</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">showLineNumbers</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">noInlineHighlight</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 생략...</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h3,null,"gatsby-browser.js"),"\n",t.createElement(a.p,null,"원하는 highlight 테마가 있으면 gatsby-browser 파일에다가 import 해주면된다."),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">/**\n * Implement Gatsby\'s Browser APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/browser-apis/\n */</span>\n\n<span class="token comment">// You can delete this file if you\'re not using it</span>\n<span class="token comment">// gatsby-browser.js</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./src/styles/prism-atom-one-dark.css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"SEO"),"\n",t.createElement(a.p,null,"gatsby-cli로 생성된 프로젝트를 보면 SEO 컴포넌트가 있다. markdown 파일에서 필요한 속성들을 가지고와서 SEO 컴포넌트에 뿌려주는 식으로 작업하였다. 이 SEO 컴포넌트를 위에서 만든 blogTemplate 컴포넌트에 import 해주면된다."),"\n",t.createElement(a.h3,null,"SEO.tsx"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// 생략...</span>\n\n<span class="token keyword">const</span> <span class="token constant">SEO</span><span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token constant">SFC</span><span class="token operator"><</span>SEOProps<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> description<span class="token punctuation">,</span> title<span class="token punctuation">,</span> url <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>Helmet title<span class="token operator">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width,initial-scale=1"</span> <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"description"</span> content<span class="token operator">=</span><span class="token punctuation">{</span>description<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span>meta property<span class="token operator">=</span><span class="token string">"og:title"</span> title<span class="token operator">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span>meta property<span class="token operator">=</span><span class="token string">"og:description"</span> content<span class="token operator">=</span><span class="token punctuation">{</span>description<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span>meta property<span class="token operator">=</span><span class="token string">"og:url"</span> content<span class="token operator">=</span><span class="token punctuation">{</span>url<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>Helmet<span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 생략...</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"배포"),"\n",t.createElement(a.p,null,"netlify를 사용하면 자동배포를 할 수 있다고 하는데 마이너한 이슈인것 같아서 일단 제일 마지막 작업으로 미뤘다. 일단은 아래의 명령어로 github 페이지에 배포하고 있다."),"\n",t.createElement(a.h3,null,"package.json"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token comment">// 생략...</span>\n <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"deploy"</span><span class="token operator">:</span> <span class="token string">"gatsby build && gh-pages -d public -b master -r https://github.com/partyKyoung/partyKyoung.github.io"</span>\n <span class="token punctuation">}</span>\n <span class="token comment">// 생략...</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",t.createElement(a.h2,null,"마무리"),"\n",t.createElement(a.p,null,"혹시 나중에 또 참고할 일이 있을까봐 이렇게 마이그레이션 과정을 정리해놓기는 했는데 gatsby 공식문서가 진짜 잘되어 있는데다 왠만한 플러그인은 다 있기 때문에 좀 막히는게 있다 싶으면 그냥 gatsby 공식 문서를 확인하는게 제일 좋은 것 같다. 개인적으로 gatsby로 블로그 마이그레이션을 하고 엄청 만족하고 있다. 익숙한 React로 되어 있어서 커스터마이징 하기가 제일 쉽다는게 한 80%는 먹고 가는 것 같다.\n아직 미완성이지만 빨리 마무리까지 끝낸 후 나처럼 Gatsby로 블로그를 시작하는 분들께 조금이나마 도움이 되고 싶다."),"\n",t.createElement(a.h2,null,"Reference"),"\n",t.createElement(a.blockquote,null,"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://www.gatsbyjs.org/plugins/"},"gatsbyjs plugins")),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://blog.outsider.ne.kr/1426"},"정적 사이트 생성기 Gatsby")),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://medium.com/maxime-heckel/getting-started-with-typescript-on-gatsby-8544b47c1d27"},"Getting started with Typescript on Gatsby")),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://github.com/heejongahn/blog"},"heejongahn/blog")),"\n"),"\n"))}var o=function(n){void 0===n&&(n={});const{wrapper:a}=Object.assign({},(0,e.R)(),n.components);return a?t.createElement(a,n,t.createElement(p,n)):p(n)},c=s(2877),l=s(7736),r=s(407),u=s(7735),i=s(685),k=s(2248),g=s(8066),m=s(4848);function d(n){var a,s;let{data:t,children:p}=n;const{date:o,tags:d,title:y}=null!==(a=null==t||null===(s=t.mdx)||void 0===s?void 0:s.frontmatter)&&void 0!==a?a:{};return(0,m.jsx)(l.i,{children:(0,m.jsxs)(c.m,{className:g.q,children:[(0,m.jsx)(k.l,{className:g.V,title:y}),(0,m.jsx)(u.l,{date:o}),(0,m.jsx)(i.I,{tags:d}),(0,m.jsx)(r.E,{children:(0,m.jsx)(e.x,{children:p})})]})})}function y(n){return t.createElement(d,n,t.createElement(o,n))}},407:function(n,a,s){s.d(a,{E:function(){return o}});var t=s(4164),e="post-layout-content-module--post-layout-content-root--01754",p=s(4848);function o(n){let{children:a,className:s,...o}=n;return(0,p.jsx)("div",{className:(0,t.$)(e,s),...o,children:a})}},7735:function(n,a,s){s.d(a,{l:function(){return o}});var t=s(4164),e="post-layout-date-module--post-layout-date-root--f34d1",p=s(4848);function o(n){let{className:a,date:s,...o}=n;return(0,p.jsx)("span",{className:(0,t.$)(e,a),...o,children:s})}},685:function(n,a,s){s.d(a,{I:function(){return c}});var t=s(9143),e=s(4194),p="post-layout-module--post-layout-tags--837df",o=s(4848);function c(n){let{tags:a}=n;return(0,o.jsx)(t.Y,{className:p,children:a.map((n=>(0,o.jsx)(e.Link,{to:"/tags/"+n,children:(0,o.jsx)(t.Y.Tag,{tag:n})},n)))})}},2248:function(n,a,s){s.d(a,{l:function(){return o}});var t=s(4164),e="post-layout-title-module--post-layout-title-root--88374",p=s(4848);function o(n){let{className:a,title:s,...o}=n;return(0,p.jsx)("h1",{className:(0,t.$)(e,a),...o,children:s})}},9143:function(n,a,s){s.d(a,{Y:function(){return p}});var t=s(4164),e=s(4848);const p=Object.assign((function(n){let{children:a,className:s,...p}=n;return(0,e.jsx)("div",{className:(0,t.$)("tags-module--tags-root--e3461",s),...p,children:a})}),{Tag:function(n){let{className:a,tag:s,...p}=n;return(0,e.jsx)("span",{className:(0,t.$)("tag-module--tag-root--aae01",a),...p,children:s})}})},2877:function(n,a,s){s.d(a,{m:function(){return o}});var t=s(4164),e="container-module--container-root--3b208",p=s(4848);function o(n){let{children:a,className:s,...o}=n;return(0,p.jsx)("div",{className:(0,t.$)(e,s),...o,children:a})}},2629:function(n,a,s){s.d(a,{$:function(){return o}});var t=s(4164),e="basic-layout-module--basic-layout-root--a11e0",p=s(4848);function o(n){let{children:a,className:s,...o}=n;return(0,p.jsx)("div",{className:(0,t.$)(e,s),...o,children:a})}},7736:function(n,a,s){s.d(a,{i:function(){return b}});var t=s(4194),e=s(4164),p="header-module--about--32ac9",o="header-module--header-logo--5bbdc",c="header-module--header-navigation--24bcb",l="header-module--header-navigation-item--ba248",r="header-module--header-navigation-item-link--d6da9",u="header-module--header-navigation-list--3815c",i="header-module--header-root--01ceb",k="header-module--tags--eb332",g=s(4848);function m(){return(0,g.jsxs)("header",{className:i,children:[(0,g.jsx)(t.Link,{to:"/",children:(0,g.jsx)("img",{src:"/images/logo.png",srcSet:"/images/logo-small.png 200w, /images/logo.png 300w",sizes:"(max-width: 360px) 200px, 300px",alt:"dev.kyoungah.me",className:o})}),(0,g.jsx)("nav",{className:c,children:(0,g.jsxs)("ul",{className:u,children:[(0,g.jsx)("li",{className:l,children:(0,g.jsx)(t.Link,{to:"/tags",children:(0,g.jsx)("span",{"aria-label":"tags",className:(0,e.$)(r,k)})})}),(0,g.jsx)("li",{className:l,children:(0,g.jsx)("a",{href:"/about",rel:"noopener",target:"_blank",children:(0,g.jsx)("span",{"aria-label":"about",className:(0,e.$)(r,p)})})})]})})]})}var d="footer-module--footer-root--795ff";function y(){return(0,g.jsxs)("footer",{className:d,children:[(0,g.jsx)("span",{children:"Powered by Gatsby, Hosted by GitHub Pages."}),(0,g.jsxs)("span",{children:["©",(0,g.jsx)("a",{href:"https://github.com/partykyoung",rel:"noreferrer",target:"_blank",children:"KyoungAh"}),", All rights reserved."]})]})}var h=s(2629);function b(n){let{children:a}=n;return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(m,{}),(0,g.jsx)(h.$,{children:a}),(0,g.jsx)(y,{})]})}},8066:function(n,a,s){s.d(a,{V:function(){return e},q:function(){return t}});var t="post-layout-module--post-layout-container--f40b5",e="post-layout-module--post-layout-title--1c575"},8453:function(n,a,s){s.d(a,{R:function(){return o},x:function(){return c}});var t=s(6540);const e={},p=t.createContext(e);function o(n){const a=t.useContext(p);return t.useMemo((function(){return"function"==typeof n?n(a):{...a,...n}}),[a,n])}function c(n){let a;return a=n.disableParentContext?"function"==typeof n.components?n.components(e):n.components||e:o(n.components),t.createElement(p.Provider,{value:a},n.children)}},4164:function(n,a,s){function t(n){var a,s,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var p=n.length;for(a=0;a<p;a++)n[a]&&(s=t(n[a]))&&(e&&(e+=" "),e+=s)}else for(s in n)n[s]&&(e&&(e+=" "),e+=s);return e}function e(){for(var n,a,s=0,e="",p=arguments.length;s<p;s++)(n=arguments[s])&&(a=t(n))&&(e&&(e+=" "),e+=a);return e}s.d(a,{$:function(){return e}})}}]);
//# sourceMappingURL=component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js.map