Notion 블로그 만들때 참고했던 것들

230325수정) 아래 repo으로 변경

• Next.js Notion Starter kit기반으로 되어있다.

• 이분 능력이 좋으시당… 이것저것 많이 커스텀 해놓으셨다. UI가 특히맘에 든다.

Next.js Notion Starter Kit

• 아래 오픈소스를 그대로 활용하여 초기 셋업하였다.

• 해당 레파지토리는 Next.js 프레임워크으로 개발되었고, Vercel을 통해 쉽게 배포할수있도록 구성되어있다.

GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

The perfect starter kit for building websites with Next.js and Notion. This repo is what I use to power my personal blog / portfolio site transitivebullsh.it. It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything. The site is then deployed to Vercel.

https://github.com/transitive-bullshit/nextjs-notion-starter-kit

Next.js

• Next.js 특징: 편한 리엑트 라우팅 시스템과 SSR(서버사이드 렌더링) 지원

next.js 기본 개념 알아보기

nextjs는 React로 만드는 서버사이드 렌더링 프레인 워크입니다. 서버사이드 렌더링을 함으로 얻는 이득은 다음과 같습니다. 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게됩니다. 이때까지 사용자는 많은 시간을 대기해야 합니다. seo 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않습니다.

https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC

Vercel

• Next.js 서버리스 배포 플랫폼

Develop. Preview. Ship. For the best frontend teams - Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Our platform enables frontend teams to do their best work. Start with the developer Vercel is the best place to deploy any frontend app. Start by deploying with zero configuration to our global edge network .

https://vercel.com/

Next js - [Vercel 로 배포하기] 📦

리뉴얼 한 Tooravel 대학 선배가 운영하는 고프로 대여 사업인 Tooravel 이란 회사가 있었다. 작은 사업으로 간단하게 고프로 부품들을 대여해주는 사업이였는데 컴공과 선배라 그런지 사이트를 4년전 자기가 만들어 운영하고 있었다. React도 아닌 제이쿼리 로 프론트를 짜고 django 로 백앤드를 짠 사이트였다. 사업을 접는 관계로 각 부품을 파는 사이트로 리뉴얼할 계획이였는데 당시 리액트를 처음 접해본 내가 도전해보겠다는 어마 무시한 도전이였다.

https://velog.io/@doodream/Next-js-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

🚀 nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

이번 포스팅에서는 , 서버리스에 대한 개념을 알아보고 대표적인 3개의 배포 플랫폼을 Netlify, Vercel, Github page 모두 사용해보며 비교해보기로 했다. Vercel은 기존에는 zeit now였었는데, '2020년 4월 21일'부터 zeit에서 Vercel로 브랜드 네임을 바꿨다. TL;DR #. Source 1. nextJS란? 2. 서버리스 배포플랫폼 3. Netlify vs Vercel 4. Faas vs Github page 5.

https://taeny.dev/javascript/nextjs-with-deployment-platform/

한글 URL

• 노션 X 모듈은 제목에서 URL을 추출하는 기능을 제공하나, 한글은 미지원하고 있다.

• 한글 url이 되도록 아래 post 참고하여 수정하였다.

Next.js + Notion 포트폴리오 사이트

이것은 Notion을 CMS로 사용하는 프로젝트입니다. 트래비스 피셔씨가 제작한 nextjs-notion-starter-kit을 클론하여 구현했습니다. 이 스타터 킷은 노션에서 사이트 루트로 사용할 페이지를 지정하면 Next.js 와 react-notion-x 모듈이 모든 것을 렌더링합니다. 이후 Vercel에 쉽게 배포할 수 있다고 하는데요 저는 개인용 NAS에서 돌리고 있습니다. 이와 관련된 내용은 이전 포스트 이전전 포스트 를 참고해 주세요.

https://firejune.io/Next.js-+-Notion-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%82%AC%EC%9D%B4%ED%8A%B8

GitHub - NotionX/react-notion-x: Fast and accurate React renderer for Notion. TS batteries included. ⚡️

Fast and accurate React renderer for Notion. TS batteries included. ⚡️ If you just want to publish a website using Notion, then we highly recommend using Super.so - a hosted solution with great perf that takes care of all the details for you.

https://github.com/NotionX/react-notion-x

230326수정) github discutsion 기반 댓글창

• 아래 글 참고하여, utterances → Giscus로 마이그레이션 하였습니다.

• Utterances 대비 기능이 많네요. (대댓글, 게시물 반응, 더 많은 테마 등)

Utterances 에서 Giscus 로 마이그레이션하기

블로그의 댓글을 Utterances 에서 Giscus 로 마이그레이션 했다. 기존 댓글을 잘 사용하고 있었지만, 장점이 훨씬 많은 Giscus로 이관하게 되었다. 1. Giscus 장점 Giscus 는 Utterances에 비해 많은 장점들이 있다. 대댓글 댓글 수, 댓글 정렬, 게시물에 대한 반응 다양한 테마 생각보다 많은 테마와 사용자가 직접 생성한 테마를 적용할 수 있다. 블로그에 적용된 테마는 Github Light High Contrast 테마이다. (High Contrast 테마는 JetBrains IDE에서도 사용하는 애정하는 테마이다.) 그 외 장점 지연 로딩 댓글 다국어 (한국어 포함) 봇 자체 호스팅 기타 등등 여러 다양한 옵션들이 존재 가장 중요한건 실제로 계속해서 관리가 되고 있는 ..

https://jojoldu.tistory.com/704

giscus

A comments widget built on GitHub Discussions.

https://giscus.app/ko

utterances (github 댓글창)

• GitHub issues를 활용한 댓글 위젯

utterances

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! Open source. 🙌 No tracking, no ads, always free. 📡🚫 No lock-in. All data stored in GitHub issues. 🔓 Styled with Primer, the css toolkit that powers GitHub. 💅 Dark theme. 🌘 Lightweight.

https://utteranc.es/

• 셋업 방법은 nexthjs-start-kit의 GitHub Comments 참고
→ 아래 commit 내용 소스에 추가 (현재 main branch에서는 utterances 부분 제거되었습니다.)

feat: add blog comments via utterances · transitive-bullshit/nextjs-notion-starter-kit@bb67e6b

Deploy your own Notion-powered website in minutes with Next.js and Vercel. - feat: add blog comments via utterances · transitive-bullshit/nextjs-notion-starter-kit@bb67e6b

https://github.com/transitive-bullshit/nextjs-notion-starter-kit/commit/bb67e6b940ae337857cbcedf1d93d6c00593bd8b

Google Analytics

• 블로그 사용률 확인을 위해 GA와 연계하였다.

• components/PageHead.tsx에 아래 pull requests의 코드 처럼 추가하면 된다. UA-CODE는 본인의 추적코드를 넣으면 된다.
• 추적코드 확인 : 계정 생성 후, '관리 > 속성 > 추적 정보 > 추적 코드' 를 클릭

Added basic support for Google Analytics by lasharor · Pull Request #155 · transitive-bullshit/nextjs-notion-starter-kit

Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes.

https://github.com/transitive-bullshit/nextjs-notion-starter-kit/pull/155/commits/040dc49df9afea2c43d3cab86730b0c0e058b559

Next.js notion starter kit 대안

• 나는 무언가를 구독하는걸 매우 싫어하기에... + 그냥 해보는것도 좋은 경험일꺼같아 스스로 만들는 것을 택했다.

Notion page → Tistory post 자동화 툴

Notion2Tistory

Notion2Tistory는 노션 페이지를 티스토리 글로 업로드해주는 웹서비스입니다. 글 등록과 수정이 가능하며, 업로드 후 티스토리 에디터에서 수정할 수도 있습니다. 😎 Notion 페이지를 이미 존재하는 블로그 플랫폼에 올릴 수 있습니다! 노션은 훌륭한 메모앱이지만, 블로그로 활용하기엔 부족한 기능이 많습니다. Notion2Tistory는 노션을 티스토리 블로그 에디터로서 사용할 수 있게 만들어줍니다. 준비중입니다

https://boltlessengineer.notion.site/boltlessengineer/Notion2Tistory-f46185df1db14f8eb571d366b66c5e9c

Notion 페이지들을 web으로 만들고 관리해주는 서비스

• 아래 서비스들은, 단순히 web으로 만들어주는것 이상의 툴 연계/기능(GA 연계, 챗봇, 사용량 Dashboard, comment 관리, SEO, 리소스 관리 등)을 손쉽게 지원해준다.

1분 만에 만드는 노션 웹사이트, 우피!

oopy:slide

https://www.oopy.io/

Super - Build websites with Notion

Everything you need to build fast, functional websites with Notion. Custom domains, themes, password-protection, and more-no code required.

https://super.so/

Create custom websites in minutes. All on Notion.

Create custom websites in minutes. All on Notion. Potion adds the magic, generating a speedy site with custom domains, styles and great SEO.

https://potion.so/

Open graph metadata

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

https://ogp.me/

Meta Tag , OG(오픈그래프) 사용하기

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참

https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

SEO (Search Engine Optimization)

• 우피의 SEO 가이드 참고하여 인증 tag copy

SEO 가이드

우피는 여러분의 사이트가 포털에서 잘 검색되기 위해서 필요한 다양한 기능을 제공합니다. 우피가 SEO를 위해서 어떤 일들을 하는지 확인해 보세요!

https://www.oopy.io/ko/guides/seo

• pages/_documents.tsx파일의 <head>부분에 copy한 tag 추가

<meta
  name='google-site-verification'
  content='xxxx'
/>
<meta
  name='naver-site-verification'
  content='xxxx'
/>

조회수 표시

HITS

Easy way to know how many visitors are viewing your Github, Website, Notion.

https://hits.seeyoufarm.com/