23.06.17
오늘 한 일
- 알고리즘 문제 풀이
- CS50 한 챕터
- 프로그라피 FGI 인터뷰
- 기존 TIL을 Docusaurus로 마이그레이션 진행
하루 요약
- 1시 -> 3시 : 프로그라피 FGI 인터뷰
- 3시 -> 9시 : 카페에서 공부
주저리 주저리
- 프로그라피 FGI 인터뷰를 했다. 2시간 동안 운영진 1명과 동아리원 5명이서 진행했고 운영진이 질문을 하고 동아리원들이 답변을 하는 형식으로 진행했다. 편하고 재미있게 진행되어서 좋았다.
기존 TIL을 Docusaurus로 마이그레이션 진행
Docusaurus로 마이그레이션을 진행했다.
확실히 기본 틀이 잡혀있어서 바꾸는데 그렇게 오래 걸리진 않았다. 기본 디자인도 깔끔해서 좋은 것 같다.
1. Docusaurus 설치
pnpm create docusaurus
react가 17버전이라 ncu -u로 의존성 버전을 업데이트 해줬다.
2. 기본 세팅
eslint, prettier 랑 docusaurus.config.js를 세팅했다.
/* eslint-disable @typescript-eslint/no-var-requires */
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Dogsounds-TIL',
tagline: 'Today I Learned',
favicon: 'img/favicon.ico',
url: 'https://self-driven-development.github.io',
baseUrl: '/Dogsounds-TIL/',
organizationName: 'Self-Driven-Development',
projectName: 'Dogsounds-TIL',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
i18n: {
defaultLocale: 'ko',
locales: ['ko', 'en'],
localeConfigs: {
ko: {
htmlLang: 'ko-KR',
},
en: {
htmlLang: 'en-US',
},
},
},
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
routeBasePath: '/TIL',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
// Replace with your project's social card
image: 'img/docusaurus-social-card.jpg',
navbar: {
title: 'Dogsounds-TIL',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
{
to: '/TIL/',
label: 'TIL',
position: 'left',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'self-driven-development',
items: [
{
label: 'GitHub',
href: 'https://github.com/Self-Driven-Development/Dogsounds-TIL',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} , Self-Driven-Development`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
공식 문서로는 조금 부족한 것 같아서 다른 레포(SLASH, extracranial)들을 참고했다.
3. 기존 TIL 마이그레이션
기존에 있던 TIL 마크다운 파일들을 복사에서 붙여넣기 했다.
근데 오류가 몇 개 있었다.
unexpected token '<'
왜인지 모르겠지만, md 파일에서 <가 들어가면 오류가 발생했다.
Module build failed (from ./node*modules/.pnpm/@docusaurus+mdx-loader@2.4.1*@docusaurus+types@2.4.1_react-dom@18.2.0_react@18.2.0/node_modules/@docusaurus/mdx-loader/lib/index.js):
그래서 찾아보니 node 버전과 관련이 있는 것 같았다.
그럼 혹시?? 해서 package.json의 이 부분을 지워봤더니 해결했다.
// package.json
"engines": {
"node": ">=16.14"
}
이건 동작 가능한 node 버전을 명시하는 것이다. 근데 이걸 지웠더니 해결됐다..?
내가 볼 땐 이걸 지워서 해결되었다기보단, 그 때 pnpm.lock 파일을 지우고 node_modules를 다시 설치하면서 해결된 것 같다.
추가로, 태그(img, br ...)를 사용할 때 닫는 태그를 써줘야 한다. 안그러면 오류가 발생한다.
파일 명에 괄호가 들어가면 오류 발생
Docusaurus는 파일명이 곧 라우팅 경로이다. 그래서 오류가 발생한다.
해결방법은 몇 가지 있다.
파일명을 바꾼다.
frontmatter를 사용한다.
frontmatter는 md 파일의 맨 위에
---로 감싸진 부분이다.여기에
slug나id를 추가해주면 된다.// docs/강주혁/23.06/06 (목).md
---
slug: '/강주혁/23.06/06-목'
---// 06 (목).md
---
id: '06-목'
---이렇게 하면 파일 명을 그대로 두고 라우팅 경로가
/06-목으로 바뀐다.
4. Github Pages 배포
Github actions를 사용해서 배포했다.
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
name: Deploy to GitHub Pages
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 8
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build website
run: pnpm build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.ACCESS_TOKEN }}
publish_dir: ./build
user_name: github-actions[bot]
user_email: 41898282+github-actions[bot]@users.noreply.github.com
이렇게 하면 main 브랜치에 push를 하면 자동으로 배포가 된다.
pnpm으로 사용하고 있어서 uses: pnpm/action-setup@v2를 써서 pnpm을 설치했다.
여기로 들어가면 배포된 것을 확인할 수 있다.
추후 계획
아직 완성된건 아니다. 이제 docsearch를 적용해서 검색 기능을 추가하고, 메인 페이지를 꾸며야 한다.
친구들이 쓰기 편하게 가이드라인도 작성하고, SEO도 챙겨야하고... 아직 할건 많다.
이것저것 해봐야지~!
내일 할 일
- 알고리즘 문제 풀이
- 오후 7시 카공실록 sns 로그인 연결
- CS50 강의