'static site generator' 태그의 글 목록

파이썬하면 요즘 ML/DL, 데이터분석 등으로 엄청난 인기를 끌고 있는데요. 웹프로그래밍에서도 매우 많은 인기가 있습니다. 우리나라에서는 점유율이 많이 못미치지만, 해외에서 Django, FastAPI등은 매우 좋은 반응을 보이고 있습니다. 오늘 소개할 도구는 Django나 FastAPI와 같은 서버도구는 아닌, 파이썬으로 만들어진 정적사이트 생성기 펠리칸(Pelican)입니다.

1. 설치

우선 일반적인 파이썬 프로젝트 시작방법과 마찬가지로 가상환경을 만들어줍니다. (pycharm을 활용하면 쉽게 가상환경이 만들어집니다. VSCode로 진행하면 조금 까다로우니, 다른 포스팅을 참고하세요). 가상환경이 만들어지면 아래의 pip install ~ 로 pelican을 설치합니다.

pip install pelican

2. 추가 라이브러리 설치

github page 배포를 위한 라이브러리 및 마크다운 문서 표시를 위한 추가 라이브러리를 설치합니다.

pip install ghp-import markdown

3. 프로젝트 생성

본격적인 프로젝트를 생성합니다. 첫번째 물음에서 [.]으로 되어있으면 현재 사이트에 생성한다는 의미입니다.

pelican-quickstart

생성이 완료되면 아래와 같이 프로젝트 구성이 보입니다.

4. 샘플 페이지 작성

content 폴더에 Hello.md파일을 작성합니다.

# hello.md #
Title: Are ‘you’ just inside your skin or is your smartphone part of you?
Date: 2018-02-26
Category: Psychology
Slug: are-you-just-inside-your-skin-or-is-your-smartphone-part-of-you

In November 2017, a gunman entered a church in Sutherland Springs in Texas, where he killed 26 people and wounded 20 others. He escaped in his car, with police and residents in hot pursuit, before losing control of [...]

5. 빌드

pelican content

6. 실행

특이하게도 실행은 output폴더로 이동해서 수행해야합니다. 이점은 다른 SSG(Static Site Generator)에 비해 조금 불편하네요. 그리고 일반적인 파이썬 프로젝트와 달리 main.py에서 실행하는게 아니고 pelican.server로 실행해야 합니다. 스크립트를 만들면 되긴 할텐데, 파이썬 공부한지가 오래되어 잘 기억이 안나네요.

cd output
python -m pelican.server

<결과>

드디어 결과가 나왔습니다. 기본 구성 치고는 여러 요소들을 포함하고 있어 보이는데, 이뻐보이진 않습니다. 손대야 할 부분이 많아보이네요.

오늘은 간단히 파이썬 정적사이트 생성기인 펠리칸(pelican)에 대해 간단히 알아봤습니다. 파이썬을 좋아하시는 분들이라면 한번 시도해보셔도 좋을 것 같습니다.

저작자표시 비영리 변경금지 (새창열림)

'Programming > Python_Web' 카테고리의 다른 글

Django - Gitlab - Heroku CD/CI 배포 와 Freenorm DNS연결 (0)	2022.10.09
Python - Django 시작하기 4 - oracle DB ORM Join (0)	2021.11.18
Python Open API(XML) 활용하기 - 부동산 매매가격 (0)	2021.11.08
Python - Django 시작하기 3 - blog app 추가하기 (0)	2021.10.13
Python - Django 시작하기 2 - start bootstrap template 적용 (0)	2021.10.13

이번 포스팅에서는 지난 포스팅에 이어 11ty를 좀더 활용해서 layout을 구성하고, CSS를 적용하는 방법을 알아보도록 하겠습니다.

1. .eleventy.js파일 생성

프로젝트 루트에 .eleventy.js 파일을 생성합니다. 여기서 Input / Output 폴더와 CSS 파일의 경로를 지정해줍니다.

module.exports = function(eleventyConfig) {  
  eleventyConfig.addPassthroughCopy("./src/style.css");

  return {
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
  };
};

2. 폴더 구성

폴더구성은 아래와 같이 /src/폴더 하위에 작업중인 파일들을 넣습니다. 주의할 것은 /_includes/ 폴더도 /src/ 하위에 위치해야합니다. 이제 아래의 구성에 따라 layout.njk, index.md, style.css 및 포스트 파일들을 작성하도록 하겠습니다.

3. /src/_includes/layout.njk

여러 포맷을 지원하지만 예제에서는 nunjucks(njk)파일을 사용합니다. 아래와 같이 프로젝트 전체에서 활용할 layout을 만들어줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header>
    <h1>{{ title }}</h1>
  </header>
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

4. src/index.md

메인 페이지에서 사용하는 레이아웃도 위에서 만든 layout.njk입니다. 그러나 내부에 보여줄 컨텐츠가 각 포스트들의 타이틀과 컨텐츠의 목록입니다.

---
layout: "layout.njk"
title: The Best Eleventy Demo
---

{% for post in collections.post %}
<h2><a href="{{ post.url }}">{{ post.data.title}}</a></h2>
<p>{{ post.content }}</p>
{% endfor %}

5. src/style.css

CSS파일도 적당히 구성하여 /src폴더에 넣어줍니다.

*{
  font-family:Georgia, 'Times New Roman', Times, serif;
}

header {  
  position: relative;      
  text-align: center;
  font-size: x-large;
}

main {
  position: relative;    
  margin-top: 50px;
  font-size:15px;
  text-align: center;
}
a {
  text-decoration: none;
}

6. src/posts/

# post1.md (아래의 형식으로 몇개 더 만들어놓습니다.)

---
title: Post Title
---
asdfxvzxcv

# posts.json

posts폴더 내부의 파일들이 사용할 레이아웃과, 각 파일들의 태그 정보를 설정해줍니다. 여기서는 "tags"값으로 "post"를 지정하였습니다. 이 값은 collections라는 변수로 사용할 수 있습니다. 위의 index.md에서 보시듯이 {{ collections.post }}와 같이 값을 불러와 사용합니다.

{
  "layout": "layout.njk",
  "tags": "post"
}

<결과>

아직 여러가지 plugin (검색창, 댓글 등)을 확인해보지는 않았지만, 비교적 단순하게 구축이 가능한 정적사이트 생성기로 보입니다.

저작자표시 비영리 변경금지 (새창열림)

'Programming > Javascript' 카테고리의 다른 글

Fetch 함수로 파일 다운로드 받기 (4)	2024.11.12
자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기 (2)	2023.07.23
정적 사이트 생성기 (SSG, Static Site Generator) 로 나만의 블로그를 만들어보자 (0)	2023.07.20
자바스크립트 slice, splice ,split의 활용과 차이점 (0)	2023.06.29
Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 (0)	2023.06.23

[ 목차 ]

오늘은 정적사이트 생성기 (SSG, Static Site Generator)에 대해 알아보겠습니다.

1. 정적사이트(SSG) 생성기란?

정적사이트 생성기는 말 그대로 정적 사이트를 생성하는 도구를 말하는데요, 정적 사이트란 항상 동일한 내용을 보여주는 사전에 빌드된 HTML, Javascript 및 CSS 코드로 구성된 사이트를 일컫는 말입니다. 이러한 웹페이지는 이미 서버 측에서 미리 렌더링된 후 브라우저에 제공되기 때문에 페이지를 더 빠르게 로드할 수 있습니다. 그래서 개인 블로그 등 컨텐츠 변화가 자주 일어나지 않는 소규모 웹사이트 제작시 많이 이용되고 있습니다. 대표적인 도구로는 Jekyll, Gatsby, Hugo 등이 있습니다.

이것만 알면 뭔가 부족한거 같아서 몇가지 개념을 좀 더 알아보겠습니다. 정적 사이트 생성기가 있으면 동적 사이트 생성기도 있을까요? 비슷한 의미로 쓰이는 SSR이라는 개념이 있습니다. SSR은 Server Side Rendering의 약자인데 말 그대로 클라이언트로부터 요청이 들어오면(들어올 때마다) 실시간으로 서버에서 웹페이지를 만들어내는 기술입니다. 대표적으로는 React 기반의 Next.js와 Vue.js 기반의 Nuxt.js, 그리고 Svelte 기반의 SvelteKit이 있습니다. React, Vue.js, Svelte는 SPA라고 합니다. SPA는 Single Page Application의 약자로 우리말로 하면 단일페이지 어플리케이션이 되겠습니다. 웹사이트의 전체 페이지를 하나의 페이지에 담아 클라이언트측에 내려주고, 클라이언트의 반응에 따라 동적으로 화면(데이터)을 변경하는 기술을 말합니다. SSR과는 달리 페이지를 클라이언트측에서 모두 처리하죠.

2. 정적 사이트 생성기의 종류

정적 사이트 생성기는 아래 그림에서 보이듯이 매우 다양합니다. Next.js와 .Nuxt.js는 SSR기술이라고 설명드렸는데, 주 용도는 SSR이지만 SSG로 사용할 수도 있는 옵션(방법)을 제공합니다.

- React 기반: Next.js, Gatsby, Docusaurus

- Vue.js 기반: Nuxt.js, Vuepress, Gridsome

- Javascript 기반: Hexo, Docsify, Eleventy

- Go 기반 : Hugo

- Ruby on Rails 기반 : Jekyll

- Python 기반 : pelican

[ 정적사이트 생성기 Github Star Ranking ]

저도 SSG를 React, Vue.js 등을 공부하며 알게된 터라 Gatsby 그리고 오래전부터 쓰인 Jekyll정도 알고 있었는데, 정말 다양한 SSG가 존재하네요. 그리고 Go언어로 작성된 Hugo의 인기가 굉장한 것 같아요. 속도 하면 역시 Go언어를 따라올 만한게 별로 없을 것 같네요.

3. 정적 사이트 생성기 (SSG) 테마

정적사이트 생성기는 다양한 테마를 적용가능한 장점도 있습니다. 이 테마를 이용한 Starter Kit을 통째로 설치해서 쉽게 시작할 수 있죠. 다양한 SSG의 테마를 한곳에서 확인할 수 있는 사이트에 대해 알려드리려고 합니다.

Jamstack Themes

Over 1000 themes and starters for Jamstack and static site generators.

jamstackthemes.dev

위 사이트에서는 각종 정적사이트 생성기(SSG, Static Site Generator)에서 사용 가능한 테마를 보여줍니다. 해당 사이트로 이동하여 상단에 All Themes를 클릭하세요. 전체 테마 리스트를 보여줍니다.

테마의 수로는 Jekyll > Hugo > Gatsby > Next.. 순입니다. Github Start 랭킹과도 통하는게 있네요. 오래전부터 쓰이던 Jekyll이 테마가 제일 많고, Go언어의 Hugo가 역시 엄청난 인기에 힘입어 테마도 많다고 판단해야겠죠? 뒤이어 Gatsby가 나오네요. 제가 좋아하는 vue관련된 SSG (Vuepress, Gridsome)의 테마는 거의 없다고 봐도 무방하겠네요^^;; (바꿔야되나..) 다양한 테마의 github 레포지토리를 여러분의 레포지토리에 복사 (또는 Netlify에 배포하면서 동시 복사)해서 사용해보시기 바랍니다.

분이라면 어떤게 좋을 것 같나요? 이쁜 테마를 골라서 Netlify나 Github 등에 배포하고 나만의 멋진 블로그를 만들어보세요.^^

그럼 이만~~

저작자표시 비영리 변경금지 (새창열림)

'Programming > Javascript' 카테고리의 다른 글

자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기2 (0)	2023.07.24
자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기 (2)	2023.07.23
자바스크립트 slice, splice ,split의 활용과 차이점 (0)	2023.06.29
Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 (0)	2023.06.23
자바스크립트 전개 연산자 (...) (0)	2023.06.22

Wilkyway