Svelte, Sapper 및 Markdown으로 블로그 구축.

Originally Published on my blog

이번 포스팅에서는 svelte, sapper를 이용하여 블로그가 있는 웹사이트를 구축해 보겠습니다.

Svelte는 무엇입니까?

Svelte는 새로운 자바스크립트 프레임워크입니다.
Svelte는 가상 DOM과 같은 추가 기술을 사용하지 않고 DOM을 조작할 수 있도록 도와주는 철학을 가지고 있습니다.
Svelte는 빌드 시간에 코드를 컴파일하고 반응성을 사용하여 앱을 쉽게 업데이트할 수 있습니다.

새퍼란?

Sapper는 Svelte 위에 있는 서버 측 프레임워크로 우수한 SEO 및 파일 시스템 기반 라우팅으로 PWA 앱을 만들 수 있도록 도와줍니다.

프로젝트를 초기화하는 방법은 무엇입니까?

우리는 Sapper 팀에서 제공하는 스타터 템플릿을 사용할 것입니다.
좋아하는 터미널을 열고 다음 명령을 작성하십시오.

  npx degit "sveltejs/sapper-template#rollup" cool-blog
  cd /cool-blog
  npm install

종속 항목을 설치한 후 서버를 시작해도 좋습니다.

  npm run dev

Voila, 🎉 이제 애플리케이션이 실행 중입니다.



좋아하는 편집기에서 프로젝트를 열겠습니다. blog 폴더로 이동합니다.
내부 src/routes .

거기에 여러 파일이 있습니다.

  | src
    | routes
      | blog
        - index.svelte,
        - index.json.js
        - [slug].svelte
        - [slug].json.js
        - _posts.js

Sapper에서 라우팅은 어떻게 작동합니까?

페이지와 서버 경로의 두 가지 유형이 있습니다.

페이지

파일 이름은 경로를 결정합니다. 예: src/routes/blog/index.svelte 경로/blog를 참조하십시오.

Dynamin 라우팅용. 우리는 [slug]를 사용할 것입니다. 예ser/routes/blog/[slug].svelte는 경로/blog/the-whatever-blog-name를 참조하십시오.

섬기는 사람

서버 경로는 HTTP 기능을 내보내는 .js 파일로 작성된 모듈입니다.
예를 들어 get 엔드포인트는 블로그 세부 정보를 검색합니다.

  // [slug].json.js

  import posts from './_posts.js';
  const lookup = new Map();

  posts.forEach(post => {
    lookup.set(post.slug, JSON.stringify(post));
  });

  export function get(req, res, next) {
    // the `slug` parameter is available because
    // this file is called [slug].json.js
    const { slug } = req.params;

    if (lookup.has(slug)) {
      res.writeHead(200, {
        'Content-Type': 'application/json',
      });

      res.end(lookup.get(slug));
    } else {
      res.writeHead(404, {
        'Content-Type': 'application/json',
      });

      res.end(
        JSON.stringify({
          message: `Not found`,
        })
      );
    }
  }

프로젝트의 루트에 content 디렉토리를 생성합니다.
이 디렉토리 안에 sample-post.md 파일이라는 파일을 만들 것입니다.

// sample-post.md

---
slug: 'sample-blog'
title: 'Sample blog.'
---

# Sample title

this is a sample blog post.

``javascript
  console.log("test code highlight")
``

slug는 파일명과 동일해야 슬러그로 쉽게 파일을 읽을 수 있습니다.title 및 slug 이상을 추가할 수 있습니다. 예를 들어 날짜, 키워드 또는 추가해야 하는 항목은 무엇이든 추가할 수 있습니다.
/blog의 모든 블로그를 나열하려면 열려 있는 경로src/routes/blog/index.json.js

  // src/routes/blog/index.json.js

  import fs from "fs";
  import path from "path";
  import grayMatter from "gray-matter";

  const getAllPosts = () =>
    fs.readdirSync("content").map(fileName => {
      const post = fs.readFileSync(path.resolve("content", fileName), "utf-8");
      return grayMatter(post).data;
    });

  export function get(req, res) {
    res.writeHead(200, {
      "Content-Type": "application/json"
    });
    const posts = getAllPosts();
    res.end(JSON.stringify(posts));
  }

머리말 데이터gray-matter 및 title를 구문 분석하는 데 도움이 되는 slug라는 추가 패키지를 설치해야 합니다.
마크다운.

  npm install gray-matter

/blog 경로로 이동하면 다음과 유사한 페이지가 있어야 합니다.



이제 포스트 경로를 처리해야 합니다. 오픈src/routes/blog/[slug].json.js

  // src/routes/blog/[slug].json.js

  import path from "path";
  import fs from "fs";
  import grayMatter from "gray-matter";
  import marked from "marked";
  import hljs from "highlight.js";

  const getPost = fileName =>
    fs.readFileSync(path.resolve("content", `${fileName}.md`), "utf-8");

  export function get(req, res, next) {
    const { slug } = req.params;

    // get the markdown text
    const post = getPost(slug);

    // function that expose helpful callbacks
    // to manipulate the data before convert it into html
    const renderer = new marked.Renderer();

    // use hljs to highlight our blocks codes
    renderer.code = (source, lang) => {
      const { value: highlighted } = hljs.highlight(lang, source);
      return `<pre class='language-javascriptreact'><code>${highlighted}</code></pre>`;
    };

    // parse the md to get front matter
    // and the content without escaping characters
    const { data, content } = grayMatter(post);

    const html = marked(content, { renderer });

    if (html) {
      res.writeHead(200, {
        "Content-Type": "application/json"
      });

      res.end(JSON.stringify({ html, ...data }));
    } else {
      res.writeHead(404, {
        "Content-Type": "application/json"
      });

      res.end(
        JSON.stringify({
          message: `Not found`
        })
      );
    }
  }

설치해야 하는 두 개의 새로운 패키지

표시됨: 마크다운 파일을 HTML로 변환하는 데 도움이 됩니다.

highlight.js: 코드 블록에 하이라이트를 추가합니다.

  npm install highlight.js marked

src/client.js에서는 highlight.js용 Github 스타일을 가져옵니다.

  // src/client.js
  // ...
  import "highlight.js/styles/github.css";
  // ...

결론

이제 웹 사이트에 더 많은 스타일을 추가하고 블로그 요소 스타일을 사용자 지정할 준비가 되었습니다.
Netlify , Github Page 또는 기타 서비스를 사용하여 라이브로 전환합니다.