Rust제 SSG의 졸라로 블로그 구축

6037 단어 SSGJamstacktech
이 글은 Jamstack Advent Calendar 2020 19일째 글이다.
저는 평소에 프런트엔드 엔지니어로서 주로 Nuxt입니다.js를 사용하여 개발한 것으로 개인적으로는 Next라고 생각합니다.js와 Gatsby.js 등으로 개발 중입니다.이번에는 그동안 신경 썼던 졸라라는 Rust가 만든 정적 사이트인 Generater를 실제로 사용해 간이 블로그를 만들어 봤다.
제작물Netlify에게 프러포즈.
창고는여기.입니다.

전제 조건


Zola는 Rust로 제작된 SSG다.Jekyll과 Go의 Hugo처럼Rust 제조라고 하지만 실제로는 Rust를 건드리지 않고 템플릿 엔진Tera을 사용해 개발했다.php와 유사한 트위터 파일.

특징.


졸라 홈페이지에 기재된 것처럼
  • 의존 관계 없음
  • 건축물 고속
  • CLI 지원, 개발 라이센스
  • 이 점은 열거할 수 있다.상술한 점은 뒤에 서술할 것이다.

    Zola 가져오기


    나는 맥 환경이기 때문에 Homebrew로 설치했다.
    brew install zola
    
    다른 OS에 대해서는 여기.를 확인하십시오.
    대화 형식을 기반으로 한 URL, SCSS의 컴파일링과 문법이 하이라이트가 있느냐는 질문에 각자 설정한 것이다.

    개발 서버


    Zola를 설치한 후zola 명령을 사용할 수 있으므로 다음 명령을 실행합니다.
    zola serve
    

    디렉토리 구조


    구성은 매우 간단하다.
    기본적으로 templates 폴더의 index.페이지에 대한 프로파일을 >에 기재합니다.

    기본 HTML


    이번에 제작된 판본은 다음과 같다.
    ├── config.toml ## zolaの設定ファイル
    ├── public ## ビルドされたファイル
    ├── content ## htmlと紐づくMarkdownファイルなど
    ├── sass ## scssファイル
    ├── static ## ファビコンなどの静的なコンテンツの置き場
    ├── templates ## ページを構成するhtml置き場
    └── themes ## 提供されているサイトのテーマなどを格納する場所
    
    이것은 전제하에 기재된 테라라는 템플릿 엔진이다.전방 엔지니어의 입장에서 보면 마치 이전의ejs와 같다.맨 위에base.html를 계승하고main 라벨 내용blogs.html을 표시한 제품을 도입했습니다.

    블로그 구성 부분

    content 폴더에 등급_index.md을 준비하고 이 이름으로 Mardown을 준비합니다._index.md는 졸라 내 비헤이비어를 설정할 수 있는 파일입니다.Markdown 내에서 TOML 형식의 구문을 사용할 수 있습니다.
    내용 바로 아래에 있는 파일은 이런 느낌입니다.
    {% extends "base.html" %}
    {% import "blogs.html" as blogs %}
    
    {% block title %}
        <title>Exsample Zola Blog</title>
        <meta name="description" content="Exsample Zola Blog">
    {% endblock title %}
    
    {% block content %}
        {% for page in paginator.pages %}
            {{ blogs::article(page=page) }}
        {% endfor %}
    {% endblock content %}
    
    블로그를 표시할 때의 정렬 키는 날짜가 10편을 넘으면 페이지 번호를 추가할 수 있다.
    실제 블로그를 기재한 Mardown은 일반index.md을 만들어 기술할 수 있다.상술한 창고를 보면 관계를 알 수 있겠지.

    추가 페이지 만들기


    이번에 리스트와 어바웃의 페이지를 만들었다.) 방금 content 폴더에 같은 레벨_index.md을 만든 것을 표시할 수 없습니다.
    +++
    sort_by = "date"
    transparent = true
    paginate_by = 10
    +++
    
    template에 표시하고 싶은 것을 기입하면 표시할 수 있습니다.

    프로그램 설계


    Netlify는 Zola 구축을 지원합니다.여기.에 적힌 바와 같이 설정 파일을 준비하고 네트워크 측면의 설정에 파치를 진행하며main 지점에 표시된 시간에 자동으로 디자인할 수 있습니다.

    사용한 소감.


    node_modules가 없어서 포장 관리가 필요 없어요!


    당연한 일이지만 관계와 버전 관리에 의존할 필요가 전혀 없고 블로그를 쉽게 완성할 수 있다는 것은 상당히 수월하다.평소 자바스크립트를 접하는 사람으로서 패키지.나는 제이슨의 dependenciesdevDependencies의 아름다운 기분을 유지하며 일하고 싶지만, 그런 일은 대처하기 매우 어렵다.

    CLI 가 있으므로 구축 환경이 필요 없음


    이것도 장점이다.두 가지 지령을 내리면 바로 개발할 수 있어 개발자들에게 고맙다.

    빌딩이 정말 빨리 간다


    실제로 Netlify에 지어졌고main 지점에 표시를 했습니다. 바로 Netlify의 관리 화면에서 컨트롤러를 보면 빌딩은 이미 끝났습니다!!
    평소 자신의 블로그는 Gatsby였다.js를 사용했지만 그에 비해 압도적인 속도로 무서웠다.Netlify 가격보면 무료 프로그램이고 빌딩 시간은 월 300분이기 때문에 건축 시간을 의식하는 사람에게 추천할 수 있습니다.(개인이 사용하는 Gatsby.js 블로그도 300분을 넘지 않았다.)

    테라 문법을 배우는 데 비용이 많이 든다


    이게 제일 매워요.
    처음 접하는 문법인 만큼 문서를 보면서 쓸 만한 것을 찾고, 이미 조나에 블로그를 쓴 사람들의 소스 코드를 보면서 개발한다.다행히 문서가 비교적 읽기 쉬워서 나는 이것을 배우는 비용이 매우 높다고 생각한다.

    끝말


    프런트엔드 엔지니어 중 속도를 중시한다는 점을 고려하면 평소 넥스트를 활용한다.js/Nuxt.js 등 개발로 압도적으로 효율적입니다.테라의 문법만 익히면 졸라의 구성이 간단해지고 무엇보다 속도가 빨라진다는 점만으로도 해볼 만하다고 생각한다.

    좋은 웹페이지 즐겨찾기