qubyte codes

큐바이트 코드

이 저장소에는 https://qubyte.codes에 대한 정적 사이트 생성기와 콘텐츠가 모두 포함되어 있습니다.

발전기

생성기는 대부분 index.js에 포함되어 있습니다. 대부분의 무거운 작업은 사용자 정의 그래프 빌드 시스템에 의해 수행되고 표시되어 마크다운 파일을 가져와 HTML 콘텐츠로 처리합니다. 하지만 완벽하지는 않으며 일부 원숭이 패치가 필요했습니다. lib/render.js 모듈은 이 패치를 수행하고 구문 강조 및 수학 공식 형식을 추가합니다.

Serve.js는 개발 서버입니다. 파일이 변경되면 빌드 그래프의 일부가 다시 실행되어 업데이트된 출력을 얻습니다.

소스 파일은 src 및 content 디렉터리에 포함되어 있습니다. 빌드 시 공용 디렉토리가 생성되고 이러한 소스 파일 중 일부(서비스 워커와 같이 컴파일이 필요하지 않은 파일)가 복사됩니다. 다른 파일은 생성되어야 하며 생성될 때 공용 디렉터리에 배치됩니다.

netlify.toml은 내 블로그를 호스팅하는 Netlify의 구성입니다(강력히 추천합니다). 작성 당시 이 파일에는 헤더 구성만 포함되어 있습니다. 이는 보안 및 CSS의 브라우저 캐싱에 최적화되어 있습니다. 원래 저는 NGINX를 사용하여 DigitalOcean 드롭릿에서 이 블로그를 호스팅했습니다. 이에 대한 구성은 여전히 ​​이 저장소인 nginx.conf의 일부입니다.

CSS

CSS를 컴파일하기 위해 postcss를 사용합니다. 원칙적으로 CSS는 CSS 없이도 사용할 수 있습니다. 대부분의 경우 postcss는 CSS를 연결하고 축소하는 데 사용됩니다. 출력 CSS는 해시되고 해시는 CSS 파일 이름의 일부가 됩니다. 이는 캐시 버스트입니다. CSS에는 페이지가 한 번 로드된 후 페이지 로드를 차단하는 것을 방지하기 위해 길거나 무한한 캐시 시간이 제공되기 때문입니다.

구문 강조를 제외하고 이 사이트는 CSS의 후크로 HTML의 클래스를 사용하는 것을 대부분 피하고 대신 의미 체계 마크업이 CSS가 고수할 충분한 컨텍스트를 제공한다고 주장합니다.

아이콘

블로그는 PWA(Progressive Web App)이며 이에 따라 다양한 크기의 아이콘이 있습니다. 그 중 하나가 파비콘(Favicon)입니다.

게시물(콘텐츠)

이 디렉토리에는 게시된 게시물의 마크다운 소스가 포함되어 있습니다. 각 게시물에는 다양한 메타데이터가 포함된 JSON 서문이 있습니다.

이름	설명
날짜시간	게시물의 게시 타임스탬프입니다. 이것이 미래의 경우에는 게시물이 렌더링되지 않습니다.
제목	게시물의 제목입니다.
설명	게시물에 대한 설명입니다. 이는 메타 설명 및 트위터 메타 설명으로 HTML 헤드에 추가됩니다. 후자는 트위터에서 트위터 카드를 채우는 데 사용됩니다.
초안	true인 경우 게시물이 렌더링되지 않습니다.
태그	태그 목록입니다. 이는 각 항목의 상단에 표시되며 각 게시물 하단의 링크를 통해 트위터 및 마스토돈에 공유할 때도 사용됩니다.
웹멘션	다른 블로그의 웹멘션 목록입니다.
스크립트	href 필드가 있는 객체 목록입니다. 이는 게시물 머리글에 모듈 유형 스크립트로 추가됩니다.

템플릿

저는 핸들바 템플릿을 사용하여 콘텐츠를 페이지로 렌더링합니다. 이들 중 일부는 페이지를 포함하고 다른 일부는 페이지의 공통 구성 요소입니다. 꽤 오래된 학교지만 일을 잘해요.

서비스 워커 및 매니페스트

서비스 워커와 매니페스트는 이 블로그가 PWA처럼 작동할 수 있게 해주는 파일입니다. 대부분의 경우 이는 사용자 정의 캐싱을 제공합니다. 또한 이 블로그를 Android에 "설치"할 수 있습니다(비록 이 기능에는 별로 관심이 없지만).