GATSBY (4) 썸네일형 리스트형 Next.js 14 버전 Netlify에 배포하기 1. next.config.mjs 수정 - 위와 같은 package.json 이 있다고 할 때, "npm run build" 를 하면 .next 폴더가 만들어지는데, next.config.mjs파일을 아래와 같이 수정해서 out파일을 배포하도록 설정을 바꿔줘야함. - 이미지 등의 경로를 제대로 인식할 수 있도록 basePath를 설정합니다. [Next.js 의 모든 URL 앞에 추가되는 기본 경로를 설정]/** @type {import('next').NextConfig} */const nextConfig = { output: 'export', basePath: '', images: { unoptimized: true, },};export default nextConfig; 예전에는 next.. 개츠비(Gatsby) Disqus 댓글기능 달기 이번엔 개츠비(Gatsby) 블로그에 Disqus 댓글 기능을 추가해보도록 하겠습니다. [ 목차 ] 1. Disqus.com에 댓글 추가할 사이트정보 입력 Disqus.com에 로그인 후 Site Admin 으로 이동하여 기본 정보들을 입력하여 내 사이트를 추가해줍니다. 그리고 설치방법을 찾아보면 Gatsby에 반영하는 방법이 나옵니다. [ Site Admin > 내 사이트 선택 > Installation > Gatsby 선택 ] Disqus에서는 아래와 같은 형식으로 안내를 합니다. 단 config에서 괄호가 두개 들어가야합니다. 안내와 조금 차이가 있습니다. import { Disqus } from 'gatsby-plugin-disqus'; const Template = () => ( /* Page .. 개츠비(Gatsby) 구글 서치콘솔 등록 (Google Search Console) [ 목차 ]구글 서치콘설에 등록하기 위해서는 3단계를 거쳐야 합니다. 1. sitemap.xml 2. robots.txt3. Google Search Console 등록 1. Sitemap.xml 생성가장 먼저 sitemap.xml을 생성합니다. 생성 방법은 플러그인 추가로 쉽게 진행할 수 있습니다. gatsby-plugin-sitemap, gatsby-plugin-advanced-sitemap 플러그인을 추가해줍니다.npm i gatsby-plugin-sitemap// gatsby가 버전 5로 올라가면서 아래의 플러그인은 아직 설치가 안되고 있습니다.npm i gatsby-plugin-advanced-sitemapgatsby-config.js 에 플러그인을 추가해줍니다.module.exports = {.. 정적 사이트 생성기 (SSG, Static Site Generator) 로 나만의 블로그를 만들어보자 [ 목차 ] 오늘은 정적사이트 생성기 (SSG, Static Site Generator)에 대해 알아보겠습니다. 1. 정적사이트(SSG) 생성기란? 정적사이트 생성기는 말 그대로 정적 사이트를 생성하는 도구를 말하는데요, 정적 사이트란 항상 동일한 내용을 보여주는 사전에 빌드된 HTML, Javascript 및 CSS 코드로 구성된 사이트를 일컫는 말입니다. 이러한 웹페이지는 이미 서버 측에서 미리 렌더링된 후 브라우저에 제공되기 때문에 페이지를 더 빠르게 로드할 수 있습니다. 그래서 개인 블로그 등 컨텐츠 변화가 자주 일어나지 않는 소규모 웹사이트 제작시 많이 이용되고 있습니다. 대표적인 도구로는 Jekyll, Gatsby, Hugo 등이 있습니다. 이것만 알면 뭔가 부족한거 같아서 몇가지 개념을 좀 .. 이전 1 다음
