제킬에서 개츠비까지: 7가지 간단한 절차

6년 전, 내 대학의 마지막 해에 나는 개원 기술에 관한 과정에 참가했다.이 과정을 통해 두 가지 일을 해야 한다. 하나는 개원 프로젝트에 기여하고 블로그에 글을 발표하는 것이다.우습게도 내가 공개적으로 글을 쓰기 시작한 유일한 이유는 수업에 불합격할까 봐 두려웠기 때문이다.
나는 이 과정을 통과하여 블로그와 유사한 것을 구할 방법을 강구했다.그러나 저는 사이트 자체를 구축하는 데 많은 노력을 기울이지 않았습니다. 왜냐하면 저는 대부분의 노력을 내용을 작성하는 데 쏟아붓고 개원 분야에 천천히 들어가려고 했습니다.당시에 제킬은 한 시대를 풍미했고 나는 제킬을 주제로 한 선발Lanyon을 선택했다.
여러 해 동안 그것은 나에게 좋은 서비스를 제공했지만, 나는 그 업무 방식에 익숙하지 않아서 사이트의 구조에 대해 어떠한 실질적인 변경도 할 수 없었다.나는 마침내 나서서 내가 비교적 편안한 위치를 바꾸었다.

왜 개츠비야?

나는 Gatsby로 나의 블로그를 업데이트하고 싶다.나는 게이츠와 비교하기로 결정했다. 왜냐하면 그것은 더욱 전문적인 정적 사이트 생성이기 때문이다.

마이그레이션을 시작하겠습니다.

비계

개츠비 사이트에는 개츠비 프로젝트well-documented가 있다.가격 인하 파일에서 페이지를 생성하기 위한 강화 항목도 clearly explained.
다음은 블로그 설정 초기 항목에 따른 절차입니다.

플러그인을 사용하여 가격 인하 파일을 개츠비로 읽습니다.gatsby-source-filesystem의 plugins 키에 항목을 추가했습니다.

plugins: [{
   resolve: `gatsby-source-filesystem`,
   options: {
    name: `markdown-pages`,
    path: `${__dirname}/src/markdown-pages`
  }
}]

플러그인을 사용하여 태그 파일을 분석합니다. 이 플러그인은frontmatter를 데이터로 추출하고 내용을 HTML로 추출합니다.

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/src/markdown-pages`
    },
  },
  `gatsby-transformer-remark`
]

React를 사용하여 블로그 게시물 template 을 만들고 블로그 게시물의 데이터를 React 구성 요소로 표시합니다.

를 사용하여 모든 태그 파일에 페이지를 생성합니다.

링크 목록을 표시하는 모든 블로그 글을 작성합니다 gatsby.config.js Gatsby API.

색인 페이지 컨텐트 마이그레이션

나는 모든 가격 인하 파일을 나의 이전 사이트에서 gatsby-transformer-remark 설정 항목에 지정된 폴더로 복사했다. createPage.나는 지금 나의 모든 낡은 블로그가 색인 페이지에 열거되어 있는 것을 볼 수 있지만, 대부분의 게시물 자체가 보기에 매우 나쁘다.

모든 문제 해결

링크

링크를 끊는 것을 피하기 위해 나는 이전의 Jekyll 사이트에서 사용하던 slug 형식을 사용했다. gatsby-source-filesystem.내 예에서, slug는 파일 이름이frontmatter에서 파생된 것이 아니라, 특수한 처리가 필요하다.

파일 이름에 접근하기 위해 를 사용했습니다.

파일 이름에서slug와 날짜를 추출하여 노드 필드로 후속 페이지 조회에 전달합니다.

const result = extractMetadataFromFilename(filePath);
date = result.date;
slug = result.slug;
createNodeField({ node, name: `date`, value: date });

파일 경로 만들기 강조 표시

이전 Jekyll 사이트에서 코드 세그먼트의 구문을 강조 표시하기 위해 markdown-pages 를 사용했습니다. 이 구문을 사용하여 강조 표시를 만듭니다.

{% highlight C++ %}
{% raw %}
  void f(int x, int n)
  {
    Gadget * g = new Gadget{n}; // Look ! I’m a Java Programmer :)
    if(x < 100) throw std::runtime_error{"weird"}; //leak
    if(x < 200) return; //leak
    delete p;
  }
{% endraw %}
{% endhighlight %}

이것은 게이츠비에서 더 이상 유효하지 않기 때문에, 나는 모든 강조 표시를 세 개의 인용부호에 포함하는 것으로 바꾸었고, 이것은 YYYY/MM/DD/Title 표시로 바뀌었고, pygments 블로그를 포함했다.
나는 최종적으로 GIST를 나의 게시물에 직접 삽입하기를 희망하지만, 이것은 이후의 블로그 게시물에 있어서 개선된 것이다.

이미지

우선, 나는 낡은 사이트의 사진을 복사했다<pre>.개츠비가 내 그림이 어디에 있는지 알기 위해, 나는 <code> 플러그인에 다른 플러그인 항목을 추가했다.

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
}

그리고 src/images 플러그인 항목을 수정해서 gatsby-source-filesystem 플러그인을 추가했습니다.

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 800,
        },
      },
    ],
  },
}

이러한 구성을 통해 이미지에 익숙한 가격 인하 형식을 사용할 수 있습니다.

![Architecture](../images/NN.jpg)

gatsby-trasformer-remark 폴더의 상대 경로를 사용하는 것이 중요합니다.

- src
  - markdown-pages
  - images

위의 디렉터리 구조에 대해 gatsby-remark-images 는 파일에서 참조하는 이미지를 표시하는 경로가 됩니다.

Gifs 회사

images GIF를 처리할 수 없습니다.게츠비가 만났던 GIF를 정확하게 처리하기 위해 ../images/image.png 플러그인을 추가했습니다.

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 800,
        },
      },
      `gatsby-remark-copy-linked-files`
    ],
  },
}

Favicon 회사

나는 게이츠비의 강력한 플러그인 시스템을 다시 호출했고 gatsby-remark-images 에 다른 플러그인 항목을 추가했다.

{
  resolve: `gatsby-plugin-favicon`,
  options: {
    logo: `./src/favicon.ico`
  }
}

스타일링

나는 CSS를 작성하는 것을 피하기 위해 게으르게 복사했다 .우리는 남을 속이지 마라. 나는 정말 어떻게 사이트를 설계해야 할지 모른다.
전역 CSS 스타일이기 때문에 생성된 HTML 파일에 적용할 수 있도록 파일gatsby-remark-copy-linked-files을 가져와야 합니다.

import './src/styles/poole.css';
import './src/styles/lanyon.css';
import './src/styles/Calendas_Plus.otf';

풀 / 라니언 테마 배포 중

이 사이트를 테스트하고 이전 사이트와 비교하기 위해 이 사이트를 deployed 로 설정합니다.이것은 Netlify 사이트에 접근하는 것처럼 간단합니다. GitHub repo에 접근할 수 있는 권한을 부여하고 구축 명령을 제공합니다.
Netlify

테스트에서 링크가 끊어지지 않았습니다.

내 사이트를 Netlify에 배포한 후 이전 사이트의 모든 링크가 새 사이트에 존재하는지 확인하여 링크가 파괴되지 않는지 테스트했습니다.

links.forEach(link => {
  link = link.replace('deborah-digges.github.io', 'epic-mirzakhani-8e39a6.netlify.app');
  request(link, (err, res, body) => {
    if (err) { console.log('Page fetch failed', err); }
    console.log(link, res.statusCode);
  });
});

나는 모든 링크를 추출하기 위해 이전 블로그의 두 페이지에서 다음 스크립트를 실행했다.

let links = document.querySelectorAll('a');
let siteLinks = []
for (let i=0; i < links.length; i++) {
  let linkText = links[i].textContent;
  linkText = linkText.replace(/\s+/g, ' ').trim();
  const link = links[i].href;
  siteLinks.push([linkText, link]);
}

for(let i=0; i < siteLinks.length; i++) {
  console.log(siteLinks[i][1]);
}

물론 이건 좀 초보적이지만, 끽!그것은 성공했다.

전환

일단 내가 나의 Jekyll 사이트의 속박과 작별을 고하려고 한다면, 나는 새로운 Gatsby 사이트로 나의 Github 사용자 페이지 를 다시 썼다.저는 다음 블로그 글에서 개츠비 사이트를 GitHub 페이지에 배치하는 방법을 상세하게 소개할 것입니다!

저장소 다음

지금 나는 내가 더 잘 아는 시스템을 사용하고 있다. 나는 매우 빨리 생각한다.

페이지별 실행

페이지의 범주를 만들고 범주별로 블로그를 조회할 수 있습니다

제목에 gatsby-config.js,gatsby-browser.config.js,Content,Blogs로 확장된 네비게이션 요소를 만듭니다.

네비게이션 요소 생성Drawings

CSS와 디자인에 대한 이해가 충분하여 더 좋은 로그인 페이지를 만들 수 있습니다(디자이너를 초빙할 수 있습니다?)

더 자세히 보려면 원본 코드 를 찾을 수 있습니다.
나의 게이츠비 블로그를 다시 한 번 듣고 더 많은 멋진 업데이트를 알아보세요!