Hexo 및 WordPress를 사용한 정적 사이트 생성기 가이드
게시 됨: 2022-03-11정적 사이트 생성기는 템플릿을 정적 HTML 페이지로 컴파일하는 시스템입니다. 그것이 효율적으로 들리면 그렇습니다. 서버 처리 또는 렌더링이 없으므로 정적 웹 사이트는 매우 빠르고 가벼운 경향이 있어 귀하와 귀하의 사용자가 귀중한 시간과 대역폭을 절약할 수 있습니다. 이렇게 증가된 효율성은 더 낮은 비용과 잠재적으로 더 높은 수익에 반영됩니다.
WordPress 최적화에서 정적으로 전환
효율적인 수익 창출에 대해 말하면 WordPress가 떠오릅니다. 그것은 인터넷의 28%를 지원하며 다양한 플러그인, 테마, API 등으로 뒷받침되는 광범위한 사용자 및 콘텐츠 관리를 포함하여 많은 훌륭한 기능을 갖춘 강력한 플랫폼입니다.
우리 업계의 대기업들도 WordPress를 사용합니다. Smashing Magazine 및 CSS-Tricks 와 같은 웹 사이트는 WordPress를 사용하지만 두 경우 모두 인스턴스를 크게 사용자 정의합니다. 그러나 WordPress로 작업하는 것은 특히 성능을 사용자 정의하고 최적화할 때 지루한 작업이 될 수 있습니다.
2015년에 작은 블로그를 시작했습니다. 첫 번째 본능은 WordPress를 사용하는 것이었습니다. 이미 WordPress로 작업하고 있었기 때문에 빠르게 시작할 수 있었습니다. 저는 DigitalOcean에 서버로 새 방울을 만들고, 호스팅 제어판으로 Vesta를 설정하고, 블로그 플랫폼으로 WordPress를 설치했습니다. 궁극적으로 나는 완전히 새로운 WordPress 테마를 디자인하고 개발했습니다. 다만 아쉬운 것은 내용이었다.
그 당시 이 훌륭한 편집기를 사용하고 있었기 때문에 Atom에 대한 몇 가지 팁을 공유하고 싶다는 것을 알고 있었습니다. 나는 그것에 대해 몇 가지 기사를 게시하고 커뮤니티와 공유했습니다.
처음에는 내용에 너무 집중하다 보니 퍼포먼스에 그다지 신경을 쓰지 않았다. 잠시 후 몇 가지 성능 문제를 발견했습니다. Google PageSpeed Insights의 점수가 형편없었기 때문에 웹사이트를 수정하고 최적화하기 위해 열심히 노력하여 99/100이라는 거의 완벽한 점수를 얻었습니다.
Nginx+Apache에서 Nginx+PHP-FPM으로 전환했습니다.
속도와 보호를 위해 CloudFlare를 사용했습니다.
Cloudinary를 사용하여 이미지를 호스팅했습니다.
테마를 수정하고 Critical CSS를 사용했습니다.
유일한 경고는 당시 해결 방법을 몰랐던 Google Analytics 캐싱 문제에 대한 것이었습니다.
그러나 99/100 또는 100/100이 여전히 원하는 성능을 얻지 못한다면 어떻게 될까요? 그것이 바로 정적 페이지 생성기가 싸움에 들어가는 곳입니다.
정적 페이지 생성기 및 Hexo 입력
그렇다면 정적 사이트 생성기는 무엇입니까?
이름에서 알 수 있듯이 정적 웹 사이트 생성기는 정적 HTML 파일을 생성하는 시스템입니다. 정적 HTML 파일을 제공하는 것이 즉석에서 페이지를 만드는 것보다 훨씬 빠릅니다. 서버 렌더링이나 컴파일이 없기 때문에 종종 페이지 로딩이 지연됩니다.
성능에 대해 이야기할 때 캐싱에 대해 생각해야 합니다. WordPress 캐싱에는 여러 기술이 있지만 정적 파일 캐싱과 달리 일반적으로 간단한 작업은 아닙니다. 캐시된 파일을 제공하는 것이 서버에서 실제 파일을 제공하는 것보다 성능이 뛰어나며 웹사이트를 로드할 때 시간을 절약할 수 있습니다.
올해 6월 Smashing Magazine의 Vitaly Friedman은 우리 도시의 워크샵에서 JAMstack을 소개했습니다. 나는 그것에 대해 들어본 적이 없었고 매우 흥미로웠다. 세미나가 끝난 후 이 새로운 개념에 대해 잠시 공부했고 이것이 얼마나 대단한 것인지 깨달았습니다. 내 웹사이트에 WordPress가 필요하지 않다는 것을 깨달았습니다.
첫 번째 단계는 사용할 정적 페이지 생성기를 결정하는 것이었습니다. 얼마나 많은지 몰랐습니다. Hexo 블로그 프레임워크를 사용해 보기로 결정했습니다. Netlify에 배포 가능하고 WordPress에서 마이그레이션할 수 있는 플러그인이 있으며 각각 Ruby 및 Go를 기반으로 하는 Jekyll 및 Hugo와 달리 내가 익숙한 Node.js를 사용합니다. 그리고 나중에 알게 된 것처럼, 그것은 매우 빠르게 진행되고 있습니다.
WordPress를 Hexo로 마이그레이션
Hexo 설치는 가능한 한 간단합니다. npm을 사용하여 전역적으로 hexo-cli 를 설치하고, hexo init 명령을 실행하고, npm 종속성을 설치하고, 짜잔:
npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install마이그레이션하려면 hexo-migrator-wordpress 플러그인을 설치하십시오. 이 플러그인은 XML 파일을 소스로 기대합니다. XML 파일은 도구 -> 내보내기 -> Wordpress 아래의 관리 패널에서 찾을 수 있는 WordPress 내보내기 도구를 통해 내보낼 수 있습니다. 마지막으로 hexo migrate 명령을 입력하여 가져오기를 완료합니다.
hexo migrate wordpress <source>이제 결과를 확인하는 일만 남았습니다. hexo server 명령을 실행하여 서버를 시작하고 주어진 주소에서 브라우저를 엽니다.
hexo server마크다운과 그 한계
Hexo는 기본적으로 Markdown을 지원합니다. Markdown은 많은 사람들이 README 파일, 댓글 및 게시물의 형식을 지정하는 데 사용하는 마크업 언어입니다. 그러나 기사를 작성하는 데에도 사용할 수 있습니다. 구문은 직관적이고 배우기 쉽습니다.
Markdown의 또 다른 장점은 깨끗하고 유효한 HTML을 생성한다는 것입니다. 이를 통해 개발자는 블로그 기사 및 페이지의 스타일을 지정하기 위해 깨끗하고 유지 관리 가능한 CSS 규칙을 만들 수 있습니다.
개발자의 삶은 결코 쉽지 않습니다. 우리는 종종 예상치 못한 일에 시간을 할애할 수 있는 문제에 부딪힙니다. 그 과정에서 무언가를 배운다면 이 시간을 낭비하지 않고 좋은 일입니다. 나에게도 같은 일이 일어났다. 컴파일 오류가 없어서 모든 것이 잘 되는 줄 알았는데, 예상대로 작동하지 않는 부분도 있었습니다.
예를 들어 Codepen 데모가 로드되지 않았습니다. Hexo 플러그인을 검색하여 찾았습니다. 불행히도 이 플러그인은 공식적이지 않았고 허용할 수 없는 HTML 오류를 생성했습니다. 문제를 기여하고 수정하고 싶었지만 최근 pull request가 1년 반 이상 해결되지 않았습니다. 저장소를 포크하고, 문제를 수정하고, 누구나 사용할 수 있도록 Hexo 페이지에 플러그인을 게시하는 것이 더 쉬울 것이라고 판단했습니다. 플러그인이 수락되고 콘텐츠가 업데이트되었으며 Codepen 데모가 매력처럼 작동했습니다.
CanIUse 임베드에서도 유사한 문제가 발생했습니다. 이제 Hexo 플러그인을 만드는 방법을 알았으므로 그렇게 하지 않을 변명의 여지가 없습니다. 내 hexo-caniuse 플러그인도 게시되었으며 Cloudinary CDN에서 로드된 반응형 이미지용 hexo-cloudinary 플러그인도 게시되었습니다.
재설계 및 최적화
웹 사이트의 디자인은 다소 기본적입니다. Hexo는 공식 웹사이트에서 소수의 테마를 무료로 제공하지만, 저는 Hexo 사이트를 위한 독특한 테마를 원했습니다. 문서를 읽고 Hexo를 사용자 지정하는 방법을 배운 후 처음부터 독창적인 테마를 개발하기 시작했습니다.
새 템플릿을 만들기 위해 템플릿에 EJS를 사용하기로 결정했습니다. EJS를 사용해 본 적이 없기 때문에 새로운 템플릿 구문을 배울 수 있는 기회라고 생각했습니다. EJS가 마음에 들지 않는다면 Hexo는 플러그인을 통해 Swig, Haml 또는 pug 지원을 제공합니다.
재설계 과정에서 저는 성능에 세심한 주의를 기울였습니다. 모범 사례를 따르면 정적 웹 사이트의 속도를 더욱 높일 수 있습니다. JavaScript 파일을 문서 하단에 배치하고 Critical CSS 기술을 사용하면 청중에게 최상의 경험을 제공합니다.
SEO 최적화는 Google과 같은 검색 엔진에서 블로그 가시성을 위해 매우 중요합니다. Hexo에는 Open Graph 데이터를 삽입하기 위한 도우미가 내장되어 있습니다. Hexo는 YAML 파일을 사용하여 사이트 및 테마 구성을 저장합니다. 테마 구성 파일을 사용하여 사이트 이름, 설명 및 다양한 소셜 ID를 구성했습니다.
Gulp 또는 Webpack을 빌드 프로세스에 추가하는 것은 항상 도움이 되며 권장됩니다. Gulp를 사용하여 CSS 및 JavaScript 파일을 축소하고 압축하면 모든 것이 준비되었습니다. 배포할 수 있었습니다.
네틀리파이
Netlify는 엄청나게 빠른 성능으로 웹사이트와 앱 호스팅을 제공하는 플랫폼입니다. 코드를 자동화하여 성능이 뛰어나고 유지 관리하기 쉬운 웹 사이트를 만드는 통합 플랫폼으로 스스로를 마케팅합니다.
코드를 푸시하기만 하면 나머지는 저희가 처리합니다.
예상대로 웹 사이트 구성은 간단합니다.
도메인을 설정합니다.
DNS 레코드를 변경합니다.
빌드 및 배포를 설정합니다.
SSL을 켭니다.
모든 것이 설정되면 Pingdom 웹 사이트 속도 테스트, 웹 페이지 테스트 및 Testmysite.io를 포함하여 몇 가지 기본 테스트를 실행하여 점수를 확인했습니다. 사이트가 모든 도구에서 가장 높은 점수를 받았기 때문에 결과는 훌륭했습니다.
클라우드플레어
우수한 점수에도 불구하고 CloudFlare를 사용하여 웹 사이트 속도를 얼마나 높일 수 있는지 확인하고 싶었습니다. CloudFlare는 처음에는 압도적일 수 있지만 사용법을 배우는 것은 기본입니다. CloudFlare를 구성한 후 테스트를 다시 실행했는데 결과가 훨씬 더 좋았습니다.
최종 테스트는 Google PageSpeed Insights였습니다. 점수는 모바일 및 데스크톱 버전 모두에서 거의 100%였습니다. 문제는 Google Analytics 브라우저 캐싱이었습니다. Google Analytics용 CloudFlare 앱을 사용하여 문제를 해결했습니다.
비용은 얼마입니까?
CloudFlare와 함께 Netlify에서 Hexo를 사용하는 것은 비용이 들지 않습니다.
Hexo는 오픈 소스 플랫폼이므로 어떻게 사용하기로 결정하든 무료입니다. 커뮤니티가 크며 StaticGen에 따르면 세 번째로 인기 있는 오픈 소스 정적 페이지 생성기입니다.
Netlify는 호스팅을 위한 훌륭한 옵션을 제공하는 개방형 계획을 가지고 있습니다. 이미지는 Cloudinary의 공개 계획에서도 호스팅됩니다. CloudFlare의 무료 플랜을 사용하면 이미 빠른 웹사이트의 속도를 높일 수 있는 많은 수의 규칙을 구성할 수 있습니다. 또한 Google Analytics 브라우저 캐싱 문제를 해결할 수 있습니다. 정부에서 제공하는 무료 개인 도메인을 사용했기 때문에 도메인 비용도 지불하지 않았습니다.
이 프로젝트 설정은 내 예산을 최소한으로 줄였습니다. 프로젝트에 더 많은 고급 기능이 필요한 경우 정적 페이지 생성기를 사용하면 여전히 몇 달러를 절약할 수 있습니다.
캐시된 파일을 제공하면 CPU 및 대역폭 사용량이 줄어들어 덜 강력한 하드웨어로 더 저렴한 호스팅 계획을 사용할 수 있습니다. 뿐만 아니라 웹 사이트가 훨씬 빨라져 사용자가 모바일 및 데스크톱 장치 모두에서 브라우징을 즐길 수 있습니다. 또한 페이지 로드 속도가 Google 검색 순위에 영향을 줄 수 있으므로 웹사이트 순위가 높아져 더 많은 방문자를 확보할 수 있습니다.
이 모든 것은 예를 들어 웹사이트를 홍보하거나 추가 콘텐츠를 만드는 데 예산의 일부를 다른 곳에서 지출할 수 있다는 것을 의미합니다. 그러면 더 많은 수익을 얻는 데 도움이 됩니다.
정적 사이트 생성기의 경우
WordPress에서 정적 페이지 생성기로 마이그레이션하는 것은 간단한 작업이 아니며 모든 WordPress 사용자가 수행해야 하는 작업도 아닙니다. 그러나 Hexo는 플러그인, 우수한 문서 및 간단한 API 덕분에 이 전환을 비교적 쉽게 만들었습니다.
제품을 정적 솔루션으로 마이그레이션할지 여부를 결정하기 전에 콘텐츠 제한, 마크다운 학습 곡선 및 버전 제어와 같은 정적 페이지 생성기와 함께 제공되는 제한 사항을 알고 있어야 합니다.
또한 Hexo는 블로그 프레임워크라는 사실을 알고 있어야 합니다. 텍스트 편집기와 터미널 사용법을 알고 있는 개발자와 기술 전문가에게 적합합니다. 웹 인터페이스를 사용하여 콘텐츠를 관리하고 싶다면 해당 기능도 제공하는 플러그인이 있습니다. hexo-admin이라고 하며 꽤 유명합니다.
이미 워드프레스를 사용하고 있다면 중단하고 지금 사용하고 있는 워드프레스의 기능과 필수 불가결한 기능을 생각해야 합니다. 콘텐츠 구조가 복잡합니까? 사용자 관리를 사용하고 있습니까? WordPress 인스턴스에서 많은 플러그인을 사용하고 있으며 모두 필요한가요? 사이트 성능에 만족하십니까?
이 질문의 대부분 또는 전부에 대한 대답이 아니오라면 정적 페이지 생성기로 웹사이트를 강화할 준비가 된 것입니다. 사용 사례와 요구 사항에 따라 정적 페이지는 비용을 최소화하면서 효율성을 극대화하는 데 도움이 될 수 있습니다. 반면에 WordPress의 유연성을 요구한다면 아마도 그러한 움직임을 고려하고 있지 않을 것입니다.