정적을 호스팅하는 방법 WordPress 무료 사이트(GitHub 페이지, Vercel, Netlify)

WordPress 강력하고 인기 있는 콘텐츠 관리 시스템이지만 동적 WordPress 사이트는 비용이 많이 들고 지속적인 유지 관리가 필요할 수 있습니다. 많은 간단한 웹사이트나 블로그의 경우 정적 버전의 WordPress 사이트는 훌륭한 대안이 될 수 있습니다. 정적 사이트는 더 빠르고 안전하며 GitHub Pages, Netlify 또는 Vercel과 같은 플랫폼에서 무료로 호스팅할 수 있습니다.

이 튜토리얼에서는 정적 버전을 생성하는 과정을 안내하겠습니다. WordPress 사이트를 무료로 호스팅하고 있습니다. 이 접근 방식은 사용자 친화적인 기능을 활용하려는 초보자에게 적합합니다. WordPress 정적 사이트의 이점을 즐기면서 콘텐츠 생성을 위한 인터페이스입니다.

필요한 도구

프로세스를 시작하기 전에 필요한 모든 도구가 있는지 확인하십시오. 정적 호스팅에 필요한 모든 항목의 목록은 다음과 같습니다. WordPress 무료 사이트:

튜토리얼을 진행하기 전에 이러한 도구가 설치되어 있고 계정이 설정되어 있는지 확인하세요. 모든 것을 준비하면 프로세스가 원활하고 간단해집니다.

1단계: 개발 WordPress LocalWP의 사이트

시작하기 전에 귀하는 WordPress 사이트가 준비되었습니다. 아직 사이트를 만들지 않았거나 현재 다른 곳에서 호스팅되고 있다면 LocalWP(이전의 Local by Flywheel)를 사용하여 사이트를 로컬에서 개발하고 테스트하는 것이 좋습니다.

1. LocalWP를 무료로 다운로드하고 설치하세요. localwp.com.
2. 새 항목 만들기 WordPress LocalWP의 사이트.
3. 사이트를 디자인하고, 콘텐츠를 추가하고, 필요한 플러그인을 설치하세요.
4. 사이트가 정적 형식에서 원하는 대로 정확하게 보이고 작동하는지 확인하세요.

정적 사이트 제한 이해

정적일 때 WordPress 사이트는 향상된 속도, 보안, 무료 호스팅 옵션과 같은 이점을 제공하므로 이러한 제한 사항을 인식하는 것이 중요합니다. 일부 동적 기능 WordPress 정적 환경에서는 작동하지 않습니다.

1. WordPress 양식: 전통적인 WordPress 서버측 처리에 의존하는 양식은 작동하지 않습니다. 여기에는 문의 양식, 구독 양식 및 기타 대화형 양식이 포함됩니다.
2. WordPress 코멘트: 실시간 사용자 상호 작용을 허용하는 동적 댓글 시스템은 정적 사이트에서 지원되지 않습니다.
3. 관리 영역 액세스: 다음 링크에 대한 모든 링크 /wp-admin 또는 유사한 내부 WordPress 경로는 서버 측 처리가 필요하므로 작동하지 않습니다.
4. 실시간 콘텐츠 업데이트: 동적 사이트와 달리 정적 사이트에서는 콘텐츠 변경 사항이 표시되려면 재생성 및 재배포가 필요합니다. WordPress 변화가 즉시 일어나는 사이트.
5. 사용자 인증: 기본 정적 사이트 설정에서는 사용자 로그인이나 멤버십이 필요한 기능이 지원되지 않습니다.
6. 전자상거래 기능: 동적 장바구니 및 결제 처리는 일반적으로 정적 환경에서 작동하지 않습니다.
7. 검색 기능: WordPress에 내장된 검색 기능은 작동하지 않지만 대안을 구현할 수 있습니다(Simply Static Pro 기능에서 언급한 대로).
8. 동적 사이드바 및 위젯: 실시간 데이터를 가져오거나 서버측 처리가 필요한 위젯은 예상대로 작동하지 않습니다.

가능한 해결 방법

이러한 제한 사항이 존재하지만 일부 제한 사항을 완화할 수 있는 방법이 있습니다.

• 양식의 경우 Formspree 또는 Netlify Forms와 같은 타사 서비스를 사용할 수 있습니다.
• 댓글은 Disqus나 Facebook 댓글과 같은 서비스를 통해 처리할 수 있습니다.
• 검색 기능은 Lunr.js 또는 Algolia(Simply Static Pro에서 제공)와 같은 클라이언트측 솔루션을 사용하여 구현할 수 있습니다.
• 전자상거래의 경우 Snipcart 또는 Gumroad와 같은 외부 서비스 사용을 고려해보세요.

개발할 때 WordPress 사이트를 운영하는 경우 이러한 제한 사항을 염두에 두고 이에 따라 사이트 구조와 기능을 계획하세요. 콘텐츠 중심 페이지에 집중하고 정적 환경으로 변환되지 않는 동적 기능에 대한 의존도를 최소화하세요.

2단계: Simply Static 설치 및 구성

Simply Static은 무료입니다 WordPress 플러그인 정적 버전을 생성하는 WordPress 대지. 설정 방법은 다음과 같습니다.

1. 당신의 WordPress 대시보드에서 플러그인 > 새로 추가로 이동합니다.
2. "Simply Static"을 검색하여 플러그인을 설치하고 플러그인을 활성화하세요.
3. Simply Static > 설정으로 이동하세요. WordPress 계기반.
4. "일반" 탭에서 다음을 설정합니다.
   • 도착 URL: '오프라인 사용을 위해 저장'을 선택하세요. 이미 사용자 정의 도메인이 있는 경우 아래 스크린샷에 따라 "절대 URL"을 선택하십시오.

5. 로컬 디렉터리: 이를 외부 디렉터리로 설정합니다. WordPress 설치, 예: /Users/yourusername/Documents/StaticSite

6. '포함/제외' 탭 아래에 필요한 URL이 모두 포함되어 있는지 확인하세요.
   • 대부분의 경우 /wp-content/ 및 /wp-includes/를 사용합니다.

7. 설정을 저장하십시오.

또한 SimplyStatic 프로 버전, Simply Static 플러그인의 프로 기능 요약은 다음과 같습니다.

1. 고급 배포:
   • SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces 및 BunnyCDN을 포함한 여러 플랫폼에 정적 사이트를 배포합니다.
2. 간편한 사이트 업데이트:
   • 단일 게시물, 대량 업데이트, 특정 URL 등 콘텐츠 업데이트를 효율적으로 관리하세요.
3. 양식 및 댓글 통합:
   • Contact Form 7, Gravity Forms, Elementor Forms 등 인기 플러그인의 양식을 정적 사이트에 원활하게 통합하세요.
4. 검색 기능 :
   • Fuse.js를 사용하여 기본 검색을 구현하거나 Algolia를 사용하여 보다 포괄적인 검색 환경으로 업그레이드하세요.
5. WP-CLI 지원:
   • WP-CLI를 사용하여 명령줄에서 직접 Simply Static 기능을 구성, 내보내기 및 관리하세요.
6. 다국어 지원 :
   • WPML, Polylang 및 TranslatePress 통합을 통해 여러 언어로 콘텐츠를 제공합니다.
7. 축소 :
   • CSS, JavaScript 및 정적 HTML 파일을 축소하여 사이트 성능을 최적화합니다.
8. WordPress 은폐:
   • 기본값 바꾸기 WordPress 그 사실을 숨기기 위한 경로 WordPress 컨텐츠 관리 시스템으로 사용되고 있습니다.

이러한 프로 기능은 정적 기능과 유연성을 크게 향상시킵니다. WordPress 고급 배포, 더 나은 성능 및 향상된 사용자 경험을 가능하게 합니다.

3단계: Git 리포지토리 초기화

이제 정적 사이트 생성기를 설정했으므로 버전 제어를 위한 로컬 디렉터리를 준비하겠습니다.

1. 터미널이나 명령 프롬프트를 엽니다.
2. Simply Static에서 지정한 디렉토리로 이동합니다(예: cd /Users/yourusername/Documents/StaticSite).
3. 다음을 실행하여 새 Git 저장소를 초기화합니다.

   git init

4단계: GitHub 리포지토리 생성

GitHub Desktop을 사용하여 저장소를 생성하고 관리하겠습니다.

1. 다음에서 GitHub Desktop을 다운로드하고 설치하세요. Desktop.github.com 아직 안 왔으면.
2. GitHub Desktop을 열고 GitHub 계정에 로그인합니다.
3. "파일" > "새 저장소"를 클릭하거나 "하드 드라이브에 새 저장소 만들기" 버튼을 사용하세요.
4. 다음을 설정하십시오.
   • 이름: 저장소의 이름을 선택하세요(예: "my-static-wordpress")
   • 로컬 경로: Simply Static에서 지정한 것과 동일한 디렉터리로 설정합니다.
   • README를 사용하여 이 저장소를 초기화합니다. 선택하지 않은 상태로 둡니다.
   • Git 무시: "없음"을 선택합니다(3단계에서 직접 생성했습니다).
   • 라이센스: 적절한 라이센스를 선택하거나 "없음"으로 둡니다.
5. "저장소 만들기"를 클릭하세요.

5단계: 리포지토리 커밋

이제 저장소가 설정되었으므로 첫 번째 커밋을 만들어 보겠습니다.

1. GitHub Desktop에서는 변경 사항으로 나열된 정적 사이트의 모든 파일을 볼 수 있습니다.
2. 커밋에 대한 요약을 입력합니다(예: "정적 사이트 파일의 초기 커밋").
3. "메인에 커밋"(또는 이전 버전에서는 "마스터에 커밋")을 클릭합니다.
4. 로컬 저장소를 GitHub에 푸시하려면 "저장소 게시"를 클릭하세요.

6단계: Simply Static 내보내기 실행

이제 정적 사이트를 생성할 차례입니다.

1. 당신에게 돌아가 WordPress 계기반.
2. Simply Static > 생성으로 이동합니다. (로컬 디렉터리에만 배포하므로 진단 오류 경고는 무시할 수 있습니다.)
3. "정적 파일 생성"을 클릭하세요.
4. 프로세스가 완료될 때까지 기다리십시오. 사이트 크기에 따라 몇 분 정도 걸릴 수 있습니다.
5. 완료되면 GitHub Desktop으로 돌아갑니다.
6. 새로 생성되거나 업데이트된 파일이 변경 사항으로 나열되는 것을 볼 수 있습니다.
7. "정적 사이트 파일 업데이트"와 같은 메시지를 사용하여 이러한 변경 사항을 커밋합니다.
8. “원본 푸시”를 클릭하여 변경 사항을 GitHub에 푸시합니다.

7단계: 리포지토리를 호스팅 플랫폼에 연결

이제 정적 사이트가 GitHub에 있으므로 무료 호스팅 플랫폼에 쉽게 연결할 수 있습니다. GitHub Pages, Netlify 및 Vercel에 대한 지침을 제공하겠습니다.

GitHub 페이지

1. GitHub.com의 저장소로 이동하세요.
2. 왼쪽 사이드바에서 “설정” > “페이지”를 클릭합니다.
3. "소스"에서 "브랜치에서 배포"를 선택합니다.
4. 배포하려는 분기(일반적으로 "기본" 또는 "마스터")를 선택합니다.
5. 루트 폴더(/)를 선택하고 “저장”을 클릭합니다.
6. 귀하의 사이트는 다음 위치에 게시됩니다. https://yourusername.github.io/repository-name/.

네티 파이

1. 에서 무료 계정에 가입하십시오. netlify.com.
2. Netlify 대시보드에서 "Git의 새 사이트"를 클릭하세요.
3. Git 공급자로 GitHub를 선택하고 Netlify를 승인합니다.
4. 목록에서 저장소를 선택하세요.
5. 빌드 명령과 게시 디렉터리를 비워 둡니다.
6. “사이트 배포”를 클릭하세요.
7. 귀하의 사이트는 사이트 설정에서 사용자 정의할 수 있는 Netlify 하위 도메인에 게시됩니다.

베르셀

1. 에서 무료 계정에 가입하십시오. vercel.com.
2. Vercel 대시보드에서 “새 프로젝트”를 클릭하세요.
3. GitHub 저장소를 가져옵니다.
4. 빌드 설정을 그대로 둡니다(Vercel은 정적 사이트임을 자동 감지해야 함).
5. "배포"를 클릭합니다.
6. 귀하의 사이트는 프로젝트 설정에서 사용자 정의할 수 있는 Vercel 하위 도메인에 게시됩니다.

요약

축하해요! 이제 정적 버전이 생겼습니다. WordPress 호스팅된 사이트 무료로. 파일을 변경할 때마다 정적 파일을 다시 생성하고 푸시하는 것을 잊지 마세요. WordPress 대지. 이 워크플로를 사용하면 다음 작업을 쉽게 즐길 수 있습니다. WordPress 정적 사이트의 속도, 보안 및 무료 호스팅의 이점을 누리면서 콘텐츠를 생성할 수 있습니다.

몇 가지 추가 팁:

• 보다 전문적인 느낌을 주기 위해 맞춤 도메인을 설정해 보세요.
• 정기적으로 업데이트하세요 WordPress 최신 기능과 보안 업데이트를 사용할 수 있도록 설치 및 플러그인을 제공합니다.
• 고급 기능 살펴보기 Simply Static의 프로 버전, 숨는 것처럼 WordPress 정적 사이트에 대한 양식 또는 검색 기능을 설정합니다.