[eziwiki] Static Site Genearator with Markdown

 

 

 

 

 

 

https://github.com/i3months/eziwiki

 

누구나 약간의 코딩으로 예쁜 웹사이트를 만들 수 있다~

+ vercel을 통해 배포할 수 있다. 

 

포트폴리오를 웹에다 배포하면서 스스로를 소개할 만한 링크는 늘었는데.. 이걸 한 눈에 보여줄 페이지가 없었다.

(Github, Portfolio, WebShell, Linkedin, Tistory ...)

 

나와 관련된 웹사이트들을 한 눈에 보여줄 수 있는 랜딩페이지가 필요했음.

 

또, 포트폴리오에는 내가 했던 모든 작업을 기록하고, 이력서에는 핵심만 뽑아서 한 페이지 ~ 두 페이지 내외로 작성하려고 함.

다만 핵심 키워드에 링크를 달고 링크를 타고 상세 페이지로 이동하도록 하고 싶은데.. (Trap 링크)

이 때 상세 페이지는 티스토리 블로그 보다는, 좀 더 깔끔하고 정리된 페이지에서 보여주고 싶었다.

 

노션으로 만들고 도메인을 붙이는것도 가능하긴 한데.. 노션에 도메인을 붙이려면 돈을 내야 함; 

이미 i3months.com 도메인을 구매했으니 최대한 이 도메인을 활용하고 싶었다. (추가 금액 없이!!)

 

그래서~ eziwiki를 만들었다. https://eziwiki.vercel.app

와~!

 

 

 

 

 

 

 

일단 내가 만든 목적은 저 두개인데, 일단 Static Site Generator이니까, 다목적 블로그로 사용할 수도 있을 거라 봄. 

eziwiki.vercel.app 에는 Tech Documentation 느낌으로 eziwiki 프로젝트 자체를 설명하는 문서를 작성했다.

 

 

https://i3months.com 

 

 

 

 

이력서 중간중간에 밑줄이 그어져 있다. 

면접관들은 PDF 형태로 내 이력서를 확인할거고.. 저걸 누르면 내가 걸어둔 링크로 이동함. 

 

hidden 옵션으로 숨겨둬서 사이드바에는 랜딩페이지만 보이고 나머지 항목들은 보이지 않는다.

랜딩페이지 역할과 이력서 Trap 역할을 모두 수행할 수 있음.

 

 

 

간단한 기능 설명

 

1. 마크다운 기반 Content 작성

 

 

 

저장소를 fork 하거나 clone 하고 시작하자.

 

content 하위에는 폴더 구조에 맞춰서 markdown을 작성해 주면 됨.

작성 후에는 payload 하위에 있는 config.ts를 content 하위에 작성한 구조대로 작성해주면 된다.

폴더를 지정할 때는 색상을 선택할 수 있음. 선택하지 않으면 기본 색상으로~ 

 

이제 npm run dev 로 로컬 서버를 가동하면 작성한 내용을 바로 확인할 수 있다. 

 

 

2. Frontmatter와 SEO 

 

 

 

 

각 마크다운 파일에 frontmatter로 SEO 관련 메타데이터를 설정할 수 있다.

page.tsx의 generateMetadata 함수가 frontmatter를 읽고 아래의 SEO 요소를 조작함.

 

title / description / canonical URL / Open Graph / favicon

 

정적 사이트이다 보니, 크롤링에도 최적화 되어있음.

 

 

3. 다중 탭 및 탭별 히스토리 관리 

 

 

 

 

 

말 그대로.. 여러 탭을 띄우고 탭 별로 히스토리가 관리된다. 

탭 별로 독립적으로 관리돼야 하는데.. Content 부분이랑 Tab 이름 부분이 동기화 되지 않는 문제가 있었음;

 

내부 네비게이션 뿐만 아니라 주소창을 통해서 조작하는 외부 네비게이션도 함께 고려해야 함.

path와 title을 함께 관리하도록 설정해줬다.

 

 

4. 페이지 숨기기 

config.ts 에서 hidden 옵션을 사용해 좌측 사이드바에는 페이지가 나타나지 않고, URL을 통한 접근은 가능하도록 설정함.

왜? -> 랜딩페이지 역할과, 이력서 Trap 역할을 동시에 수행하도록 하기 위해서.

 

사용 예시는 윗 부분 참고. 

 

 

5. 해시 기반 URL 라우팅 

 

 

 

 

 

주소 창을 보면 알 수 있듯, 페이지 경로는 모두 해시화를 통해 관리된다.

원래는 Path랑 유사하게 처리했는데.. hidden 옵션을 추가하고 나서 아예 페이지를 유추할 수 없게 해시화했음.

 

 

 

6. 브라우저 새로고침 시 이전 탭 복원 

 

새로고침하거나 탭을 닫았다가 열었을 때 이전 탭과 탭의 히스토리를 복원하기 위해 localstorage를 사용했다.

문서 읽다가 닫고 다시 열어도 히스토리가 저장됨.

 

 

 

---

 

 

 

 

Github README / Contributing / LICENSE 를 작성하고 저장소를 public으로 돌렸다.

 

 

 

 

 

 

레딧에 홍보글도 올렸다 ㅎㅎ 

댓글로 피드백과 평가도 받았음.