• 4 min read

GHOST starter 테마에 tailwindcss 설치

블로그
GHOST starter 테마에 tailwindcss 설치

서론

ghost를 블로그 호스팅용으로 고른 이유 중 하나로, 문서화가 잘 되어 있어 수정이 자유롭다는 점이 있었는데, ghost가 영어로 사용하는것을 상정한 프로그램이다 보니, 국내에서 사용하기에 묘하게 "이런게 필요한가..?" 싶은 부분들이 많았습니다.

이에 직접 테마를 개발하여 사용할 예정인데, 아쉽게도 제가 디자인을 엄청 잘하거나 하지는 않습니다. 기껏해야 평범한 사람 수준이라고 생각하고 있어요.

그래서, 제가 하나하나 고민하는것보다는 색상이나 breakpoint등을 골라주는 tailwindcss를 도입해서 테마를 개발할 예정입니다.

기존 테마를 수정하는 방안도 있었지만, ghost에서 아예 테마 개발용으로 사용해주세요 하고 별도의 레포지토리를 개설해 두었기 때문에, 해당 레포지토리의 소스코드를 사용하여 테마를 수정해보도록 하겠습니다.

GitHub - TryGhost/Starter: A development starter theme for Ghost
A development starter theme for Ghost. Contribute to TryGhost/Starter development by creating an account on GitHub.
GitHubTryGhost

설치

테마가 위치한 폴더로 이동해 주어야 합니다.
테마의 위치는 ghost/content/themes/테마-이름 입니다.

GitHub - TryGhost/Starter: A development starter theme for Ghost
A development starter theme for Ghost. Contribute to TryGhost/Starter development by creating an account on GitHub.
GitHubTryGhost

를 카피한 레포지토리에서 작업합니다.
해당 폴더를 터미널에서 열어줍니다.

npm install
npm install tailwindcss
npm install concurrently
npx tailwindcss init

로 다른 패키지들 tailwindcss, tailwindcss를 동시에 실행할 concurrently를 설치하고 설정합니다.

npx tailwindcss init 입력시 tailwind.config.js 파일이 생성됩니다.

설정

assets/css/index.css 파일을 수정합니다.

/* Ghost components */

라 표기 된 곳의 @import들 아래에,
다음과 같은 코드를 입력합니다.

/* Tailwindcss components */
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindcss 를 사용할 수 있게끔 불러오는 구문입니다.

tailwind.config.js 파일을 수정합니다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./*.hbs", "./**/*.hbs"],
  theme: {
      extend: {}
  },
  plugins: []
}

content 에 hbs파일들을 추가함으로써
hbs파일들에 적혀있는 tailwindcss의 클래스들을 tailwindcss가 확인할 수 있도록 합니다.

assets/js/index.js 파일을 수정합니다

// Import CSS
import "../css/index.css";

해당 문장이 남아있으면 오류가 발생합니다.
제거해주도록 합니다.

rollup.config.js 파일을 수정합니다.

// CSS
// Enable the PostCSS preprocessor
import postcss from 'rollup-plugin-postcss';
// Use @import to include other CSS files
import atImport from 'postcss-import';
// Use the latest CSS features in your Rollup bundle
import postcssPresetEnv from 'postcss-preset-env';

postcss({
    extract: true,
    sourceMap: true,
    plugins: [
        atImport(),
        postcssPresetEnv({})
    ], 
    minimize: true,
}),

두 부분 전부 postcss에 관련한 부분입니다.
tailwindcss와 호환되지 않는다는 말이 있으므로,
이 부분을 삭제해줍니다.

package.json 파일을 수정합니다.
"scripts" 에서의

"dev": "rollup -c --environment BUILD:development -w",
"build": "rollup -c --environment BUILD:production",

부분을

"dev": "concurrently \"rollup -c --environment BUILD:development -w\" \"npx tailwindcss -i ./assets/css/index.css -o ./assets/built/index.css --watch\" ",
"build": "rollup -c --environment BUILD:production && npx tailwindcss -i ./assets/css/index.css -o ./assets/built/index.css --minify",

로 변경합니다.

개발 서버를 시작할 때에, tailwindcss도 변화를 감지해서 index.css를 만들어 내야 하기 때문에 concurrently로 동시 실행시켜주는 구문입니다.

마지막으로
블로그 폴더에서 ghost restart
테마 폴더에서 npm run dev
를 입력해 로컬 서버를 띄우면 개발 준비가 완료됩니다.

추천 글

featured