이 기사에서는 강력한 도구를 사용하여 WordPress 웹 사이트를 정적 웹 사이트로 쉽게 변환하는 방법을 안내합니다. 우리는 WordPress에서 정적 웹 사이트 생성기로 마이그레이션하는 과정에 중점을두고 헤드리스 CMS 사용을 포함하여 몇 가지 대안을 탐색 할 것입니다. 이런 종류의 이주를 수행 해야하는 이유는 무엇입니까? 웹 사이트 속도를 크게 높이고 검색 엔진 순위를 높이고, 호스팅 수수료를 줄이고 (또는 제거) 보안을 크게 향상시킬 수 있기 때문입니다.
키 포인트 :
WordPress에서 정적 웹 사이트 생성기로 마이그레이션하면 호스팅 비용 및 유지 보수 워크로드를 줄이면 웹 사이트 속도, 보안 및 SEO 성능을 크게 향상시킬 수 있습니다.
Gatsby.js와 같은 정적 웹 사이트 생성기는 동적 WordPress 웹 사이트를 정적 웹 사이트로 변환 할 수 있으므로 페이지 로딩 속도를 줄이고 관리 단순화 및 보안 개선과 같은 많은 이점이 생길 수 있습니다.
WordPress 마이그레이션 프로세스에는 정적 웹 사이트 생성기 설정, WordPress 기사/페이지를 Markdown으로 내보내고 정적 리소스를 생성하는 것이 포함됩니다. REACT 및 GraphQL 지식을 마스터하는 것은 사용자 정의 및 데이터 쿼리에 도움이됩니다.
정적 웹 사이트는 해킹 할 수있는 데이터베이스가 없기 때문에 더 안전합니다. WordPress 관리자 패널의 잠재적 인 보안 위협은 배포 된 정적 페이지에 영향을 미칩니다.
헤드리스 CMS를 사용하여 정적 파일을 생성하고 저장소와 동기화하여 프로세스를 자동화 할 수 있습니다. WordPress는 정적 웹 사이트의 헤드리스 CM으로 사용할 수 있지만 다른 최신 컨텐츠 관리 방법도 고려할 수 있습니다.
-
정적 웹 사이트의 장점 :
중요한 속도 개선이 유일한 장점은 아니며 동적 WordPress (WP) 웹 사이트를 정적 웹 사이트로 변환하는 것은 다음과 같은 이점을 가져올 수 있습니다.
페이지 로딩 속도 감소 : 런타임 (사용자가 요청할 때)에서 페이지를 전처리 할 필요가 없으며 데이터베이스에서 컨텐츠를 추출 할 필요가 없습니다. 따라서 웹 서버의 응답 속도는 크게 가속화됩니다 (10 배 더 빠르거나 더 이상). -
CDN의 대기 시간 감소 :이 정적 페이지를 분산 콘텐츠 전달 네트워크 (CDN)에 직접 배포하여 전 세계의 응답 시간을 크게 줄일 수 있습니다.
단순화 된 관리 : 일단 워크 플로를 설정하면 (이 기사에서 다룰 것임) 유지 보수, WP 업그레이드 또는 서버 업데이트에 추가 노력을 기울일 필요가 없다는 것을 알 수 있습니다. -
보안을 미묘하게 향상시킵니다 : HTTPS는 상자 밖으로 https, 정적 페이지 만 문제가있는 PHP 버전이나 구식 WordPress에서 실행되지 않으며 Apache에서도 실행되지 않을 수도 있습니다.
SEO 향상 : Google은 컨텐츠를 평가할뿐만 아니라 컨텐츠 액세스의 편의성과 보안을 소중히 여깁니다. 이것은 실제로 오늘날에도 여전히 효과적인 몇 가지 SEO 방법 중 하나입니다. 더 빠르고 안전한 웹 사이트는 검색 엔진 결과 페이지에서 더 잘 수행됩니다. -
걱정없이 : PHP를 업그레이드 할 필요가없고, WP의 배치되지 않은 보안 취약점에 대해 걱정할 필요가 없으며 Linux 서버를 관리 할 필요조차 없습니다. 배치되면 커피/맥주/차/인삼 차를 쉽게 즐길 수 있습니다.
-
"WordPress가 안전합니까?"
WordPress 개발자는 우수한 표준과 보안 관행을 따릅니다. 그러나 아키텍처 자체로 인해 WP 보안 팀을 통제 할 수없는 몇 가지 사항이 있습니다.
-
서버를 업데이트하십시오
wp 업데이트 설치
PHP 업데이트 설치
플러그인 및 테마의 업데이트 설치 (사용 가능한 경우)
정기적으로 WP 및 PHP 로의 주요 업그레이드 (LTS없는)
이 모든 것이 지속적인 프로세스이며 플러그인은 사소한 위협이 아니며 특히 인정되지 않은 플러그인이 아닙니다. 이 플러그인에는 종종 공격자가 악용하여 WordPress 설치를 제어 할 수있는 보안 취약점이 있습니다. 이것이 바로 Automattic이 상업적으로 호스팅 된 WordPress 버전 인 WordPress.com에서 일부 플러그인을 지원하는 데 몇 년을 보냈던 이유입니다. 상당한 양의 의식적인 노력으로 WordPress
는 안전 할 수 있습니다. 이것이 훌륭한 개발자가 제시해야 할 노력이라고 주장 할 수는 있지만, WP 웹 사이트를 정적 웹 사이트로 변환하면서 아키텍처를 재정의하고 동시에 동시에 제거하지 않고 거의 영원히 제거하여 이러한 짐을 완화 할 수 있다고 확신합니다. 가상 현실, 즉 보안 위협이 될 수있는 모든 잠재적 요점. 결국, 공격자는 일반적인 HTML, CSS 파일 및 플랫 이미지를 사용하지 않습니다. 그러나 여전히 크로스 사이트 스크립팅 및 크로스 사이트 요청 위조를 알고 있어야합니다. ? 🎜 대담추
준비 : 정적 웹 사이트 생성기를 사용할 수 있습니다
출처 : netlify 우리는 "100 Jamstack Tools, API 및 서비스가 귀하의 웹 사이트를 돕는"기사에서 정적 웹 사이트 생성기 (SSG)를 간략하게 검토했으며 여기에는 다루지 않은 많은 SSG가 있습니다. 자세한 내용은 STATICGEN을 확인하십시오. 정보. 일부 SSG는 WP2Static과 같은 WordPress를 구체적으로 대상으로하지만,보다 일반적인 SSG, 즉 Gatsby.js- "개발자가 개발자가 초고속 웹 사이트 및 애플리케이션을 구축하는 데 도움이되는 React 기반 무료 오픈 소스 프레임 워크에 중점을 둘 것입니다." .
WordPress 마이그레이션
나는 프로세스가 매우 간단하기를 희망하지만, 설치 한 기존 플러그인 (더 적은 플러그인이 더 좋음)과 형식 How와 같이 지루하고 시간이 많이 걸리는 것들이 있다는 것을 인정해야합니다. 기사를 번역하려면 (간단할수록 더 좋습니다). 이를 특정 상황에 맞게 조정해야 할 가이드로 생각하십시오. 본질적으로, 우리는 다음을 수행 할 것입니다 :
설정 Gatsby.js 를 설정하십시오
WP 기사/페이지를 Markdown
로 내보내십시오
정적 자원을 생성
1 단계 : 포크 개츠비 런처
우리는 먼저 Gatsby Advanced Launcher 또는 Gatsby Material Launcher를 먼저 포크 할 예정이며, 둘 다 Gatsby.js 프로젝트를위한 범용 스타터를 조정하고 두 번째 런처는 "의도적 인"재료 설계 템플릿 (DEM)을 사용합니다.
이 런처는 완전히 기능적인 반응 중심의 진행성 웹 애플리케이션 (PWA)을 직접 제공 할 수 있습니다.
슈퍼 빠른 로딩 시간 (사전 렌더링 된 HTML, JS 자동 블록 로딩)
마크 다운 기사 (코드 구문 강조 표시, 임베디드 YouTube 비디오, 임베디드 트윗)
페이지 매김, 태그, 카테고리
disqus support -
netlifycms 지원
SEO 기능 (Google 웹 로그 분석 지원, Siteemap 및 Robots.txt Generation, Meta Tags, Schema.org Google Rich Snippets 용 JSON-LD, Facebook/Google/Pinterest 용 OpenGraph 태그, 트위터 카드 트위터 태그)
동기 피드 (rss)
소셜 기능 (Twitter, LinkedIn 및 Telegram 공유 버튼; Facebook 및 Reddit Share/Share Count)
개발 도구 (Eslint, Pretier, The Narklint, GitHub 페이지 및 NetLify, CodeClimate 구성 파일 및 배지에 대한 배포 지원)
- 기다려!
-
CDN으로 성공적으로 마이그레이션하고 배포 한 후 웹 사이트는 Google Lighthouse와의 감사가 최상의 결과를보고해야 할 정도로 잘 수행해야합니다.
설치 및 구성
먼저 Gatsby.js 및 Node.js를 설치하여 Gatsby CLI 및 Node.js 패키지 관리자 NPM을 사용할 수 있도록해야합니다. Node.js의 경우 다운로드 및 설치 만하면 Gatsby.js의 경우 시작 또는 개발 환경 설정을 참조하십시오. 이 문제를 해결하면 프로젝트를 시작하는 방법입니다 (Gatsby Material-Starter도 복제 할 수 있습니다) : .
고급 (예제) 및 재료 (예제) 런처 구성은 거의 동일합니다.
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # 或 gatsby develop
로그인 후 복사
앞에서 언급했듯이 NetLify CMS가 상자 밖으로 지원되므로 아래와 같이 STATIC/ADMIN/CONFIG.YML을 편집하여 활성화 할 수 있습니다.
NetLify CMS를 Gitlab 또는 Bitbucket과 통합 할 수도 있습니다 (백엔드 구성 참조).
2 단계 : WordPress 기사 내보내기 <🎜 🎜>
<,> 경우에 따라 모든 기사와 페이지가 포함 된 내보내기 XML 파일을 ExitWP를 사용하여 마크 다운 파일로 변환 할 수 있습니다. 그러나 WP 설정 및 조정에 따라이 프로세스에는 약간의 트릭이 필요할 수 있습니다. Tania Rascia는 그녀의 기사 에서이 과정을 어떻게 처리하는지에 대한 좋은 개요를 제공합니다.
3 단계 : 페이지를 작성하십시오
Gatsby.js가 RECT 응용 프로그램이라는 점을 감안할 때, React 개발자가되거나 최소한 숙련 된 JavaScript 프로그래머가 Gatsby를 엄격하게 사용자 정의하는 데 먼 길을 갈 것입니다. 또한 쿼리 및 마이닝 데이터, 특히 이러한 페이지가 더 이상 MySQL 데이터베이스에서 제공되지 않는 경우 일부 그래프 QL을 이해하는 것이 매우 편리합니다. 다행히도 Gatsby.js의 문서는 매우 잘 개발되었습니다. 다음은 몇 가지 유용한 리소스입니다
데이터를 통해 프로그래밍 방식으로 페이지를 만듭니다
페이지를 작성하고 수정하십시오
데이터를 통해 프로그래밍 방식으로 페이지를 만듭니다
이제 페이지 생성을 마쳤으므로 거의 모든 곳에서 리소스 (정적 페이지 및 이미지)를 안전하게 배치 할 수 있습니다! 100 개의 Jamstack 도구, API 및 서비스의 호스팅 섹션을 확인하면 사이트가 일부 아이디어를위한 사이트를 돕고 자동화 된 파이프 라인을 사용하여 정적 웹 사이트 호스팅에 관한 기사를 확인하십시오.
<<> 안전, 한 번에 제자리에! backend:
name: github
branch: master
repo: your-user/your-repo
로그인 후 복사
WordPress 관리자가 인터넷에 있더라도 (.htpasswd 파일은 당신을 위해 많은 일을 할 수 있습니다), 패치되지 않더라도 WP 백업이 변조 되더라도 이들 중 어느 것도 당신이 보유한 정적에 영향을 미치지 않습니다. 프론트 엔드가 "분리"되었기 때문에 배포 된 페이지 . 방화벽 뒤의 LAN (Local Lan)에서 WordPress를 실행하더라도 정기적으로 업데이트해야합니다. 주요 PHP 또는 WP 업그레이드로 인해 내 웹 사이트가 내가 인정하고자하는 것보다 더 많은 작업을 훼손하거나 중단하는 것을 보았습니다. 그러나 웹 사이트가 정적 인 경우 이러한 보안 문제가 더 이상 존재하지 않습니다!
내 머리를 잃어 버렸다 : 헤드리스 cms
이 작업을 수행 한 경우 더 이상 WordPress를 사용할 필요가 없습니다. 관리자가 새 기사와 페이지를 생성하도록 유지할 수는 있지만 다른 워크 플로우는 다른 헤드리스 CMS를 사용하여 정적 파일을 생성하고 저장소에 동기화하는 것입니다. 이것은 "Headless CMS"입니다. 컨텐츠 관리 시스템은 여전히 백엔드 인스턴스로 어딘가에 있지만 실제 라이브 웹 사이트와 완전히 분리되어 있습니다. WordPress는 정적 웹 사이트의 일반적인 헤드리스 CMS 옵션이며 실제로 대규모 SSG 배포에서 가장 일반적인 선택 일 것입니다. 마이그레이션 방법은 많은 상황을 다룰 수 있지만, 레거시 컨텐츠가 너무 많거나 WordPress에 내장 된 콘텐츠 흐름이 너무 많아서 즉시 마이그레이션이 불가능할 수 있습니다. 이것은 대규모 콘텐츠 운영 및 디지털 미디어 비즈니스에 특히 그렇습니다. 그러나 덜 역사를 관리해야한다면 컨텐츠 관리에 대한보다 현대적인 접근 방식을 살펴 보는 것이 좋습니다. 동적 서비스 웹 사이트에서 멀어지는 마이그레이션은 그러한 변경을 수행하기에 좋은시기입니다. 우리가 구현 한 마이그레이션은 NetLify CMS를 지원하지만 여기에서 헤드리스 CMS를 사용하는 방법을 다루지는 않습니다. 이것은 가까운 시일 내에 다른 기사에서 소개 할 주제입니다.
깊이를 파헤쳐
그러한 기사에서는 우리는 그렇게 많이 다룰 수 있으므로 SSG를 사용하여 WP를 마이그레이션하는 데 대한 추가 리소스가 있습니다.
<..> gatsby.js
공식 문서 센터와 블로그는 매우 포괄적이고 잘 작성되었습니다. WP 관련 기사는 다음과 같습니다
Gatsby와 WordPress를 얻으십시오
는 WordPress에서 Gatsby.js 및 Jamesstack으로 마이그레이션합니다
WordPress 및 Gatsby.js로 블로그를 구축하는 방법 : Part 1, Part 2 및 Part 3
hugo
Hugo는 GO 프로그래밍 언어를 기반으로하며 다양한 템플릿을 제공하는 또 다른 큰 SSG 이름이며 Gatsby.js에 대해 고려할 수있는 신뢰할 수있는 옵션입니다. WordPress를 Hugo로 마이그레이션하는 몇 가지 도구가 있습니다. 이 가이드를 보면 유연하지 않지만 프로세스는 gatsby.js보다 훨씬 간단해야한다는 것을 알게 될 것입니다.
Chris Ferdinandi의 "WordPress에서 Hugo로 이주"
Mattias Geniar의 "WordPress에서 Hugo로 이동하기위한 단계별 가이드"
Christopher Kirk-Nielsen의 WordPress에서 Hugo로 전환
jekyll
루비 환경을 설정하는 경우 jekyll (정적 웹 사이트 및 블로그 의 일반 텍스트를 SSG로 변환 할 수 있음)은 사용하기가 더 쉽지만 웹 응용 프로그램이 아닌 정적 페이지 만 생성 할 수 있습니다. Gatsby.js처럼. Gatsby와 마찬가지로 Python 기반 Exitwp를 사용하여 WP에서 Markdown을 생성 할 수 있습니다. Windows 기반 실행 파일 WPXML2Jekyll을 사용하여 WP XML에서 Jekyll 지원 마크 다운 파일을 생성 할 수도 있습니다. 유용한 기사 :
Sam Atkinson의 "WordPress에서 Jekyll로 블로그를 마이그레이션"
"Florian Courgey의 WordPress에서 Jekyll으로 마이그레이션 : Part 1 및 Part 2"
Mike Neumegen의 WordPress 개발자를위한 Jekyll
서비스 (SAAS) 솔루션으로서의 소프트웨어
Gatsby Cloud는 Gatsby.js 웹 사이트 구축 및 유지 보수를 무료로 또는 유료로 제공하여 빠른 빌드를 쉽게 자동화하고, 미리보기에 액세스하고, 일일 편집을 생성하며, NetLify, CloudFlare, AWS CloudFront 또는 Akamai에 쉽게 배포 할 수 있습니다. . Hardypress는 또한 정적 WordPress 웹 사이트를 생성하고 결제시 온라인 WP 설치에 액세스 할 수있는 자격 증명을 입력 할 수있는 관리자 패널이 있습니다. HTTPS, 양식 및 검색. 상업적 지원을받는 다른 WP 관련 SSG로는 Shifter, Strattic 및 SiteseAuce가 포함됩니다.
결론과 생각 : 왕은 죽었습니까? -
저에게는 편안한 것이 매우 중요하며, 이것이 몇 년 전에 WordPress 웹 사이트 개발을 중단하는 주된 이유 중 하나입니다. 내가 싫어하는 것은 오류가 주어진 시간 (제로 일 또는 다른 방법)에 나타날 수 있으며 제 시간에 패치되지 않으면 내 작업을 위험에 빠뜨릴 수 있다는 것입니다. 메인 및 갑작스런 PHP 또는 WP 업그레이드로 인해 내 웹 사이트가 내가 인정하고자하는 것보다 더 많은 작업을 중단하는 것을 보았습니다. 그러나 웹 사이트가 정적 인 경우 이러한 보안 문제가 더 이상 존재하지 않습니다!
내 생각에, WordPress는 2012 년에 "오일 피크"상황에 도달했습니다 (Google Trends : WordPress 2004-to-Present 참조). 그것이 매우 빨리 적응하지 않으면 시장 점유율 만 계속 잃어 버릴 것입니다. 이는 더 나은 통합 프로세스에서 더 빠르고 안전한 작업을 수행 할 수있는 기술에 유리합니다. WP의 제작자이자 Automatic의 CEO 인 Matt Mullenweg는 개발자들이 "JavaScript를 탐구"하도록 장려하고 Calypso를 소개함으로써 WP의 PHP 백엔드를 대담하게 포기하도록 장려하기 시작하면서 이것을 인정했습니다 (프로세스에 대한 그의 반영을 읽으십시오). 이것은 충격파 (심지어 공황)를 지역 사회에 가져오고 WordPress가 PHP를 완전히 포기할 것이라는 소문이 있습니다. Gutenberg는이 방향의 또 다른 단계 일뿐입니다. 그것이 스스로를 재구성 할 수 있다면, 왕은 결국 왕관을 유지할 수 있습니다. 그렇지 않다면, 인터넷의 거의 3 분의 1을 강화하는 것은 쉽지 않습니다 - 오랫동안 왕을 살아라! ?
- itepoint가 2020 년 WordPress 헤드리스 CMS로 구동되는 Gatsby로 프론트 엔드를 Gatsby로 어떻게 마이그레이션했는지에 대한 기사를 읽으십시오.
- Jamstack Basics
Jamstack에서 배우십시오. Jamstack Basics 컬렉션은 Jamstack의 첫 단계를 밟는 데 도움이되며 지속적으로 콘텐츠를 추가하고 있습니다. 전문가가되기 위해 필요한 튜토리얼을 제공 할 것입니다. Jamstack 소개의 끝에서 업데이트 될 예정인 인덱스를 항상 참조 할 수 있습니다.
WordPress를 정적 웹 사이트 빌더 (FAQ)로 마이그레이션 할 때의 FAQ
WordPress를 정적 웹 사이트 생성기로 마이그레이션하면 어떤 이점이 있습니까?
정적 웹 사이트 생성기로 WordPress를 마이그레이션하는 것은 몇 가지 이점이 있습니다. 첫째, 정적 웹 사이트는 일반적으로 데이터베이스에서 PHP를 처리하거나 데이터를 추출 할 필요가 없기 때문에 일반적으로 WordPress 웹 사이트보다 빠릅니다. 이는 웹 사이트의 로딩 속도를 크게 향상시킬 수 있으며 이는 SEO 및 사용자 경험에 중요합니다. 둘째, 정적 웹 사이트는 해킹 할 수있는 데이터베이스가 없기 때문에 더 안전합니다. 마지막으로, 정적 웹 사이트는 호스트가 더 저렴하고 유지 관리가 쉽기 때문에 소규모 비즈니스 및 개인 블로그에 이상적입니다.
WordPress에서 정적 웹 사이트 생성기로 원활한 마이그레이션을 보장하는 방법은 무엇입니까?
원활한 마이그레이션을 보장하려면 미리 계획하는 것이 중요합니다. 먼저 WordPress 사이트를 백업하여 문제가 발생하면 롤백 할 수 있습니다. 그런 다음 필요에 맞는 정적 웹 사이트 생성기를 선택하십시오. 인기있는 옵션으로는 Jekyll, Hugo 및 Gatsby가 있습니다. 생성기가 선택되면 Simply Static 또는 WP2Static과 같은 플러그인을 사용하여 WordPress 컨텐츠를 내보낼 수 있습니다. 내보내면 새 정적 웹 사이트를 설정하고 콘텐츠를 가져와야합니다. 마지막으로, 새 웹 사이트를 철저히 테스트하여 모든 것이 올바르게 작동하는지 확인하십시오.
정적 웹 사이트 생성기로 마이그레이션 할 때 WordPress 테마를 유지할 수 있습니까?
불행히도 정적 웹 사이트 생성기에서 직접 WordPress 테마를 사용할 수 없습니다. 그러나 정적 웹 사이트 생성기의 템플릿 시스템을 사용하여 주제를 재현 할 수 있습니다. 여기에는 HTML, CSS 및 JavaScript에 대한 지식이 필요합니다. 또는 WordPress 테마와 매우 유사한 조립식 테마를 선택할 수 있습니다.
정적 웹 사이트 생성기로 마이그레이션 할 때 WordPress 플러그인은 어떻게됩니까?
정적 웹 사이트 생성기로 마이그레이션 할 때 WordPress 플러그인에서 제공하는 기능이 손실됩니다. 그러나 많은 정적 웹 사이트 생성기에는 유사한 기능을 제공 할 수있는 자체 플러그인 또는 확장 기능이 있습니다. 마이그레이션 후이 플러그인을 수동으로 연구하고 설치해야합니다.
위 내용은 WordPress에서 정적 사이트 생성기로 마이그레이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!