망쳐! 나는 나만의 정적 사이트 생성기를 개발했습니다!

현재 웹 개발은 동일한 작업을 수행하는 수천 가지의 새로운 방법을 개발한 덕분에 매우 복잡해졌습니다. 웹 개발 초기에 그는 우리가 필요로 하는 거의 모든 기능을 수행하는 PHP와 jQuery를 사용했습니다. 하지만 이제는 상황이 바뀌었습니다.

긴 이야기 단편

그래서 저는 개인 웹사이트를 구축할 수 있는 방법을 찾고 있었습니다. 어떤 블로그와 내 프로젝트 쇼케이스가 있었을까요? 별거 아니죠? 뭐, 그래도 마찬가지야. 그래서 처음에는 이것을 기술 스택으로 사용하려고 생각했습니다

• 반응
• Firebase/Supabase
• 테일윈드 CSS
• 배포용 Cloudflare 페이지

뭐, 해피엔딩일 수도 있겠지만... ?

이미 말했듯이 블로그 섹션이 필요하고 아이러니하게도 블로그와 리액트가 잘 어울리지 않습니다. React는 기본적으로 콘텐츠 기반 웹사이트가 아닌 WebApp을 구축하기 위한 것이기 때문입니다. 이제 왜 chatGPT의 요약이 있는지 모르는 분들을 위해

React가 콘텐츠 중심 사이트에 적합하지 않은 이유

ChatGPT가 말했습니다.

React는 SEO 및 초기 페이지 로드 시간에 부정적인 영향을 미칠 수 있는 클라이언트측 렌더링에 의존하기 때문에 주로 콘텐츠 중심 사이트에 적합하지 않습니다. 콘텐츠 중심 사이트는 React가 즉시 처리하지 못하는 서버측 렌더링(SSR) 또는 정적 사이트 생성(SSG)의 이점을 활용합니다. React를 확장하는 Next.js 또는 Gatsby와 같은 도구가 이러한 요구 사항에 더 적합합니다.

다음 목표: NextJs

검색 엔진의 좋은 색인과 전문적인 소셜 미디어 링크 미리보기를 원했기 때문에 블로그 사이트에 SSR이 필요한 것은 당연합니다. NextJ가 나에게 두 가지를 모두 제공할 수는 있지만 여전히 문제가 있고 개인적인 문제입니다.

저는 항상 cloudflare 페이지 사용을 좋아했고 계속 사용하고 싶었습니다. 게다가 cloudflare의 무료 이메일 라우팅을 통해 내 도메인에 사용자 지정 이메일 주소가 연결되어 비용이 절감되기를 바랐습니다.

Cloudflare의 NextJS

공식 문서를 통해 nextJS 사이트를 cloudflare 페이지에 배포해 보았습니다. 글쎄요, 일이 잘 안됐어요. 거기에 배포할 수 없었고 해결책을 찾기 위해 몇 시간을 노력했지만 아무것도 효과가 없었습니다. nextJS와 cloudflare가 저에게는 잘 어울리지 않았다고 가정해 보겠습니다. 따라서 Vercel이나 Cloudflare의 누군가가 이 글을 읽고 제가 누락된 부분이 있으면 알려주세요.

글쎄, 이 시점에서 나는 절망적이었고 마지막 선택은 SSG였습니다.

다음 솔루션: SSG

이제 SSG가 좋고 여기서 중요성을 이해합니다. 문제는 제가 이전에 SSG와 일한 적이 없고 통과할 수 있는 경로가 여러 개 있다는 것입니다. 휴고, 개츠비, 아스트로 블라블라 같은 것들이 있어요. 그리고 아마도 더 많을 것입니다. 이제 나는 이들 중 어느 것에도 익숙하지 않았고 이 시점에서 나는 너무 좌절해서 간단한 블로그 앱을 위한 새로운 도구를 배우는 데 조금도 투자할 의향이 없었습니다. 그래서 난 내 마음대로 할 거라고 생각했어요.

나만의 정적 사이트 생성기 만들기.

나만의 정적 사이트 생성기를 개발하기로 결정한 몇 가지 이유

1. 짜증이 났어요(물론 ㅋㅋ)
2. 나만의 도구를 만들고 있으므로 페이지 생성 방법을 완전히 제어할 수 있습니다. 어떤 모습일까요.
3. 저는 재발명을 좋아합니다.
4. 자유로운 시간을 보낼 수 있었습니다.

계획

계획은 웹사이트를 만드는 구식 방식으로 진행되었습니다. 별도의 기사에는 자체 HTML 페이지가 있습니다.

전체 개요는 다음과 같습니다.

1. palin Markdown 파일로 글을 쓸 예정입니다
2. Python을 사용하여 마크다운을 일반 HTML로 구문 분석합니다
3. 다른 섹션이 동적으로 삽입되는 템플릿이 이미 있습니다.
4. 또한 기사에 해당하는 구성 파일이 있을 것입니다. 파일 계층 구조는 다음과 같습니다.

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

따라서 각 게시물에는 자체 폴더가 있고 폴더에는 config.json 및 art.md가 있습니다. Python 스크립트는 template.html을 가져와 해당 HTML 템플릿에 동적 콘텐츠(예: 게시물 제목)를 삽입합니다. 슬러그, 구성 파일의 썸네일, 구문 분석된 마크다운 파일의 주요 기사. 가장 중요한 것은 SEO 및 소셜 미디어에 대한 메타 태그를 동적으로 생성한다는 것입니다. 그런 다음 게시물 링크가 example.com/art/slug가 되도록 art/.html이라는 파일에 변경 사항을 기록합니다.

어떻게 통합됐나요?

그래서 저는 생성기와 상호작용하기 위한 CLI 인터페이스를 개발했습니다. F it에서와 같이 fit이라고 이름을 지정했습니다. 여기에는 다음 명령이나 옵션이 있습니다.

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit <action> <argument>
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-<n>       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload <file_path>  Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Deployment mechanism

So, like I said I wanted to use Cloudflare pages for deploying. Basically what I've done is I've created a branch called prod and whenever the ./fit deploy command is run it will basically copy all the necessary files to the prod branch and push the changes to github. Then, cloudflare will automatically build and redeploy the changes.

Handing images

In order to handle images or any static files I have used firebase storage, the ./fit uploader will pop open a GTK based GUI uploader from which I can upload an image and it will give me the public url which I can than copy, Here's how it looks:

Upload Interface

Post Upload Interface

CLI Interface

There's also a CLI Interface which can be used by ./fit upload

Dynamic Ambient Bcakground

So, I thought when I am the one handling all the building and generation myself I can definitely do some cool stuffs with it, so I've added a dynamic colored ambient background to each post. The idea was to pick an average color from the thumbnail image and then darken it and use it as the background. I've also picked a primary color for the links and buttons from the thumbnail image as well and honestly to me, it looks really cool, here's an screenshot

Comments and Discussion

Since I was working with basically no database or no backend service at all, I had to choose an external service for this and what else does this better than Disqus .

Was it Worth It?

Well, to be honest like I said I was spending some free times, so yeah it was definitely worth it, and it didn't take me long time to be honest I've spent 2-3 days for this full project and really had fun building something creative.

Wrapping Up

So, I've had really fun experience with this project and will hopefully do more improvements and add more functionalities to it. Right now it's so basic and simple which was what I wanted. If you like this project or want me to open source it please let me know. Oh and here's the link of the site I was screaming about shazin.me Thanks for reading.

위 내용은 망쳐! 나는 나만의 정적 사이트 생성기를 개발했습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!