소개

이미 이 밈과 Apple Notes의 우수성을 접하셨을 수도 있습니다.

그렇다면 블로그 콘텐츠를 관리하기 위한 CMS로 사용할 수 있다면 어떨까요? 이것이 바로 제가 « 오늘 배운 것» 웹사이트에서 시도하고 싶었던 것입니다. https://til.julienc.me

Apple Notes 쿼리 중

Apple Notes에서 메모를 가져올 수 있는 방법이 필요합니다. 이를 위해 Apple Notes를 포함하여 거의 모든 것을 쿼리할 수 있는 SQL 데이터베이스인 Anyquery를 사용하겠습니다.

1. https://anyquery.dev/docs/#installation에서 Anyquery를 설치하세요.
2. Apple Notes 플러그인 설치: anyquery install Notes

3. SQL을 사용하여 노트를 쿼리하고 JSON에 저장합니다(제 경우 노트는 TIL 폴더에 있습니다)
   

   anyquery -q "SELECT name, html_body, modification_date 
   FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
   

이제 객체 배열의 모든 노트가 포함된 Notes.json 파일이 생겼습니다. 각 객체에는 세 가지 속성이 있습니다:

• 메모 이름(이름)
• 마지막 수정 시간(modification_date)
• HTML의 본문 메모(html_body)

예를 들어:

[
    {
        "name": "Example",
        "modification_date": "2024-08-11T00:00:00Z",
        "html_body": "
Example
This is an example
"
    }
]

마지막 작업은 웹사이트를 웹사이트에 연결하는 것입니다.

웹사이트 연결 중

개인적으로는 Astro.JS를 사용하고 있습니다. 첫 번째 작업은 각 항목에 대한 정적 경로를 생성하는 것입니다.
그렇게 하려면 "../../notes.json"에서 메모를 가져오면 됩니다. 그리고 이를 내보내기 함수 getStaticPaths()에 전달합니다. 또한 생성된 URL이 유효한지 확인하기 위해 slugify 기능을 사용하고 있습니다.

// [...blog].astro
import notes from "../../notes.json";

function slugify(string: string) {
    return string
        .toLowerCase()
        .replace(/\s /g, "-")
        .replace(/[^a-z0-9-]/g, "");
}

export function getStaticPaths() {
    return notes.map((note) => {
        return {
            params: {
                blog: slugify(note.name),
            },
        };
    });
}

const { blog } = Astro.params;
const note = notes.find((note) => slugify(note.name) === blog);

경로가 생성되면 Apple Notes 스타일과 일치하도록 약간의 CSS를 작성해야 합니다.

article.notes {
            color: #454545;
            font-size: 0.9rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: -0.015rem;
        }

article.notes > div:first-child > h1 {
        color: #de9807;
        margin-bottom: 0.5rem;
}

... truncated (retrieve the full CSS in the repository at src/styles.css)

이제 끝났습니다!

결론

축하합니다. 이제 Apple Notes를 CMS로 사용하고 계십니다. iCloud 저장 공간 제한에 제한을 받는 강력하고 협업적인 CMS입니다. 이미지, 표, 서식 있는 텍스트, 코드 등을 추가할 수 있습니다.
다음은 서식 옵션의 예입니다.
https://til.julienc.me/example-of-capability

다음을 수행하여 Apple Notes에서 Vercel로 자신의 블로그를 배포할 수 있습니다.

• 저장소 복제 git clone https://github.com/julien040/apple-notes-cms
• npm install 또는 pnpm install 실행
• chmod u x 배포.sh 실행
• vercel을 실행하여 프로젝트를 초기화하고 연결합니다.
• ./deploy.sh를 실행하여 프로젝트를 빌드하고 Vercel에 푸시

모래밭

소스 코드: https://github.com/julien040/apple-notes-cms
결과: https://til.julienc.me/