"Islands"디자인 패턴을 사용하여 블로그 구축. SQLITE 데이터베이스 중심 백엔드는 정적 h 묘사 전원이 공급 된 최신 웹 사이트를 생성합니다.
스크립트는 데이터베이스를 통해 반복하여 사이트의 모든 페이지에 대해 완전히 렌더링 된 HTML 문서와 DOM 스 니펫을 생성합니다. NGINX는 요청을 읽고 hx-request
헤더의 존재에 따라 요청을 제공합니다. hx-boost
는 모든 앵커 태그를 AJAX 요청에 자동으로 들어 올리므로 마법이 발생합니다. 응답 문서에는 HTMX가 더 나은 UX & SEO를 위해 페이지에 인식하고 적용하는 <title>
태그가 포함되어 있습니다.
모든 빌드 명령은 BUN을 사용하여 실행됩니다.
bun install
필요한 모든 종속성을 끌어 내립니다.bun edit
Wysiwyg 데이터베이스 관리 용 백엔드 서버를 실행합니다.bun run init
dist
Folder 구조를 구축하고 렌더링 된 사이트의 파일을 제자리로 이동시킵니다.bun htmx
실제로 사이트의 HTML 자산을 생성하기 위해 TypeScript를 실행합니다.bun css
PostCSS 스크립트를 실행하여 Tailwindscs를 사용하여 사이트의 스타일을 생성 및 최적화합니다.bun start
Init, HTMX 및 CSS를 실행합니다.사이트의 내용은 게시물, 카테고리, 태그 및이를 상관시키는 관계형 메타 데이터 테이블을 포함하는 4 개의 테이블 SQLite 데이터베이스에서 생성됩니다. 데이터베이스 로직은 SRC/Models에 있습니다.
HTML/콧수염 템플릿은 SRC/Views에 살고 있습니다
메인 스타일 시트는 여기에 있습니다 : src/ui/chowne.css. 나는 테일 윈드 "잘못된"을 사용하고 있다는 것을 알고 있습니다.
사용 된 글로벌 도메인을 정의하는 파일이 2 개 있습니다. 하나는 백엔드 편집기를위한 것입니다. 다른 하나는 블로그 자체입니다. HTTP 폴백 지원을 위해 //localhost
로 기본값을 제공합니다.
bun edit
실행하여 웹 기반 WYSIWYG 편집기에 액세스 할 수 있습니다. 편집자는 게시물 및 메타 데이터를 추가, 편집 및 제거하고 카테고리 및 태그 자체를 지원합니다. 기본 포트 및 호스트 이름 (LocalHost : 8999)은 SRC/Server.ts에서 변경할 수 있습니다.
Nginx 샘플 구성은 Nginx 디렉토리에서 사용할 수 있습니다. 유일한 실제 "마법" 은 사이트를 이용할 수있는 예제에 HX-Request 헤더의 존재에 대한 루트 디렉토리에 추가하는 것입니다.
이 프로젝트의 v1.0은 완료되었습니다! 이제 https://blog.xe.ro에서 내 블로그에 전원을 공급하고 있습니다
(이 프로젝트를 호출하는 것에 대해 생각하고있었습니다. tnthumbs b/c 그것은 다음을 사용하여 만들어졌습니다 : typescript nginx tailwindcss htmx unix 콧수염 bun sqlite)
내 블로그의 콘텐츠를 포함 하여이 리포지션의 모든 파일은 CC0 / Kopimi를 출시합니다! 정보의 자유 의 정신으로, 나는 당신 이이 프로젝트를 통해 당신이 좋아하는 모든 것을 포크, 수정, 변경, 공유 또는 수행하도록 권장합니다! ^c^v