현재 웹 개발은 동일한 작업을 수행하는 수천 가지의 새로운 방법을 개발한 덕분에 매우 복잡해졌습니다. 웹 개발 초기에 그는 우리가 필요로 하는 거의 모든 기능을 수행하는 PHP와 jQuery를 사용했습니다. 하지만 이제는 상황이 바뀌었습니다.
그래서 저는 개인 웹사이트를 구축할 수 있는 방법을 찾고 있었습니다. 어떤 블로그와 내 프로젝트 쇼케이스가 있었을까요? 별거 아니죠? 뭐, 그래도 마찬가지야. 그래서 처음에는 이것을 기술 스택으로 사용하려고 생각했습니다
뭐, 해피엔딩일 수도 있겠지만... ?
이미 말했듯이 블로그 섹션이 필요하고 아이러니하게도 블로그와 리액트가 잘 어울리지 않습니다. React는 기본적으로 콘텐츠 기반 웹사이트가 아닌 WebApp을 구축하기 위한 것이기 때문입니다. 이제 왜 chatGPT의 요약이 있는지 모르는 분들을 위해
ChatGPT가 말했습니다.
React는 SEO 및 초기 페이지 로드 시간에 부정적인 영향을 미칠 수 있는 클라이언트측 렌더링에 의존하기 때문에 주로 콘텐츠 중심 사이트에 적합하지 않습니다. 콘텐츠 중심 사이트는 React가 즉시 처리하지 못하는 서버측 렌더링(SSR) 또는 정적 사이트 생성(SSG)의 이점을 활용합니다. React를 확장하는 Next.js 또는 Gatsby와 같은 도구가 이러한 요구 사항에 더 적합합니다.
검색 엔진의 좋은 색인과 전문적인 소셜 미디어 링크 미리보기를 원했기 때문에 블로그 사이트에 SSR이 필요한 것은 당연합니다. NextJ가 나에게 두 가지를 모두 제공할 수는 있지만 여전히 문제가 있고 개인적인 문제입니다.
저는 항상 cloudflare 페이지 사용을 좋아했고 계속 사용하고 싶었습니다. 게다가 cloudflare의 무료 이메일 라우팅을 통해 내 도메인에 사용자 지정 이메일 주소가 연결되어 비용이 절감되기를 바랐습니다.
공식 문서를 통해 nextJS 사이트를 cloudflare 페이지에 배포해 보았습니다. 글쎄요, 일이 잘 안됐어요. 거기에 배포할 수 없었고 해결책을 찾기 위해 몇 시간을 노력했지만 아무것도 효과가 없었습니다. nextJS와 cloudflare가 저에게는 잘 어울리지 않았다고 가정해 보겠습니다. 따라서 Vercel이나 Cloudflare의 누군가가 이 글을 읽고 제가 누락된 부분이 있으면 알려주세요.
글쎄, 이 시점에서 나는 절망적이었고 마지막 선택은 SSG였습니다.
이제 SSG가 좋고 여기서 중요성을 이해합니다. 문제는 제가 이전에 SSG와 일한 적이 없고 통과할 수 있는 경로가 여러 개 있다는 것입니다. 휴고, 개츠비, 아스트로 블라블라 같은 것들이 있어요. 그리고 아마도 더 많을 것입니다. 이제 나는 이들 중 어느 것에도 익숙하지 않았고 이 시점에서 나는 너무 좌절해서 간단한 블로그 앱을 위한 새로운 도구를 배우는 데 조금도 투자할 의향이 없었습니다. 그래서 난 내 마음대로 할 거라고 생각했어요.
나만의 정적 사이트 생성기를 개발하기로 결정한 몇 가지 이유
계획은 웹사이트를 만드는 구식 방식으로 진행되었습니다. 별도의 기사에는 자체 HTML 페이지가 있습니다.
전체 개요는 다음과 같습니다.
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/
그래서 저는 생성기와 상호작용하기 위한 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
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.
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
There's also a CLI Interface which can be used by ./fit upload 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 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 . 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. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
Dynamic Ambient Bcakground
Comments and Discussion
Was it Worth It?
Wrapping Up
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
