게으른 프로그래머를 위한 개인 웹사이트 관리 가이드

많은 개발자들이 개인 웹사이트를 갖고 있거나 갖고 싶어합니다.

코딩 기술 없이 아름다운 웹사이트를 구축할 수 있는 훌륭한 옵션이 많이 있지만, 우리는 소프트웨어 개발자이므로 우리의 기술을 선보이고 처음부터 무언가를 구축하고 싶습니다.

웹 사이트를 코딩하는 것은 한 가지 일이며 1~2일 안에 완료될 수도 있습니다. 그러나 웹사이트가 활성화되면 가용성, 최신성, 보안성을 유지하기 위해 유지관리해야 합니다.

따라서 다음에서는 간단한 10단계를 통해 최소한의 노력으로 개인 웹사이트를 구축하고 유지하는 방법을 살펴보겠습니다. 왜냐하면 우리는 코딩을 좋아하지만 컴퓨터에서 떨어져 있는 시간도 좋아하기 때문입니다. 🌳🤸🍝

최근에 React로 다시 만든 내 웹사이트를 예로 들어보겠습니다. 내 GitHub 저장소 에서 소스 코드를 찾을 수 있습니다.

다음 팁과 요령은 프런트 엔드 부분으로만 구성된 매우 간단하고 정적인 웹 사이트를 가정합니다. 그러나 이러한 개념을 백엔드, 데이터베이스 또는 기타 인프라 부분을 포함한 보다 복잡한 프로젝트로 쉽게 확장할 수 있습니다.

언급된 기술에 대해 자세히 설명하지 않고 기술에 구애받지 않도록 높은 수준의 개요를 제공합니다.

1. 리포지토리 설정

GitHub 또는 GitLab과 같은 개발 플랫폼을 선택하고 비어 있는 새 저장소를 설정하세요. 커뮤니티가 귀하의 코드로 무엇을 할 수 있는지 알 수 있도록 라이센스를 포함하고 README를 추가하십시오.

2. JS 프레임워크를 선택하세요

웹사이트 구축에 사용할 React, Vue, Svelte와 같은 JavaScript 프레임워크나 라이브러리를 선택하세요. 아니면 그렇게 하지 말고, 시도해 보고 싶다면 바닐라 HTML과 자바스크립트를 사용하세요.

어떤 프레임워크를 선택할 때 가장 중요한 것은 그것이 당신이 즐겁게 작업할 수 있는 것이어야 한다는 것입니다.

이것은 귀하의 웹사이트이며 귀하는 원하는 도구를 사용할 수 있습니다. 이미 알고 있고 좋아하는 것을 선택할 수도 있고, 평소 궁금했던 완전히 새로운 것을 시도해 볼 수도 있습니다.

저는 Vue.js로 첫 번째 개인 홈페이지를 만들었습니다. 약 1년 후, 더 많은 실습 React 경험을 얻고 일부 React 라이브러리를 시험해보고 싶었기 때문에 React에서 다시 빌드했습니다.

JS 프레임워크의 빌드 도구를 사용하여 상용구 코드를 생성하고 localhost에서 제공되는 간단한 Hello World 스타일 예제를 가져옵니다.

3. UI 구성요소 라이브러리 선택

이 단계는 선택 사항이지만 여기서는 노력을 최소화하는 것에 대해 이야기하고 있으므로 Material UI 또는 Bootstrap과 같은 UI 구성 요소 라이브러리를 프로젝트에 포함하는 것이 좋습니다. 내 웹사이트에 차크라 UI를 선택했습니다.

이러한 라이브러리에는 UI 구성요소 세트는 물론 레이아웃 및 스타일 지정을 위한 유틸리티도 포함되어 있어 매우 빠르게 구축할 수 있습니다.

시각적으로 매력적이며 많은 구성 요소를 포함하고 쉽게 사용자 정의할 수 있는 잘 문서화된 구성 요소 라이브러리를 선택하십시오. 웹 사이트의 라이브러리 모양을 사용자 정의하려면 글꼴과 색 구성표를 다양하게 사용해 보는 것이 재미있을 수 있습니다. 🎨

4. 아주 간단한 것을 만들어 보세요

홈페이지에 표시하고 싶은 정보에 대해 생각한 다음 UI 구성 요소 라이브러리의 구성 요소를 사용하여 무언가를 만들어 보세요. 지나치게 생각하지 마십시오.

이제 주요 목표는 무언가를 신속하게 구현하는 것입니다. Voltaire가 이미 알고 있듯이 완벽함은 선의 적입니다.

할 말이 많고 웹 사이트에 표시할 내용에 대한 아이디어가 많다면 정말 좋습니다! 계속해서 구축하되 라우팅, 다양한 보기, 섹션, 레이아웃, 탐색 등을 고려하여 콘텐츠를 구성하는 방법에 대한 계획을 먼저 세우십시오.

하지만 당신이 나와 같은 사람이라면 이 시점에서 홈페이지에 무엇을 넣을지, 왜 홈페이지를 만들어야 하는지 자문할 수 있을 것입니다. 누가 신경 쓸까요?! 😳

귀하의 감정은 전적으로 타당하지만 온라인에 존재하기 위해 누구의 허가나 멋진 콘텐츠가 필요하지 않습니다.

매우 간단하게 유지하고 방문자(인터넷에 액세스할 수 있는 사람이라면 누구나 공유할 수 있음)와 편안하게 공유할 수 있는 자신에 대한 몇 가지 사항을 공유하세요.

내 웹 사이트에는 내 사진과 태그라인, 내 기술 스택 목록, 내가 좋아하는 몇 가지 책, 추천 도서 몇 가지를 포함하여 최소한으로 유지했습니다. 📚 LinkedIn과 GitHub에 대한 링크도 포함했습니다.

5. 재미있는 것을 추가하세요

4단계에서는 매우 간단한 것을 만들었습니다. 하지만 단순하다는 것이 지루함을 의미해서는 안 됩니다. 이제 대화식으로 시작해 보겠습니다. 🚀

귀하의 웹사이트 방문을 더욱 재미있고 흥미롭게 만들 수 있는 몇 가지 쉬운 방법을 생각해 보십시오. 여기에는 애니메이션, 사용자 상호 작용, 색 구성표 변경 등이 포함될 수 있습니다. 하지만 바퀴를 재발명하지 마세요.

무엇을 해야할지에 대한 아이디어가 있다면 정확히 그 일을 수행하는 npm 패키지가 이미 있을 가능성이 있습니다.

내비게이션 바의 스크롤 애니메이션, 멋진 전환으로 어두운 모드와 밝은 모드 사이를 전환하는 버튼, 그리고 다음을 사용하여 깜짝 색종이 파티를 시작하는 아이콘 버튼을 사용했습니다.

반응 색종이 .

그리고 그게 다입니다. 귀하는 스스로 웹사이트를 구축했습니다! 🥳 다음에는 배포 및 유지 관리 방법을 살펴보겠습니다.

6. 배포

Netlify, Vercel 또는 GitHub Pages와 같이 웹사이트를 인터넷에 완전히 무료로 배포하는 방법에 대한 다양한 옵션이 있습니다.

정확한 단계는 선택한 제공업체에 따라 다르므로 웹사이트가 특정 URL에 게시될 때까지 가이드를 따르세요.

나는 Netlify를 사용했는데 설정이 매우 쉽다는 것을 알았습니다.

선택적인 단계로 사용자 정의 도메인 이름을 구입하고 이를 공급자의 DNS와 연결하여 얻은 임의의 URL을 대체할 수도 있습니다. 꼭 그렇게 할 필요는 없지만 사용자 정의 도메인 이름이 좋은 터치라고 생각하며 도메인 구입 비용은 연간 10달러를 넘지 않아야 합니다.

7. CI/CD 설정

이제 귀하의 웹사이트가 인터넷에 게시되었으므로 향후 커밋으로 인해 실수로 웹사이트가 중단되지 않도록 해야 합니다. 또한 main 분기의 최신 버전을 자동으로 배포하려고 합니다.

개발 플랫폼에는 이미 GitHub Actions 또는 GitLab CI/CD와 같은 CI/CD 도구가 내장되어 있을 수 있습니다.

내 저장소가 GitHub에 있으므로 GitHub Actions를 사용하고 있습니다.

지속적인 통합의 경우 모든 끌어오기 요청과 main 분기에 대한 모든 병합에 대해 자동화된 검사를 설정할 수 있습니다. 여기에는 린팅 및 서식 지정이나 단위 테스트와 같은 검사가 포함될 수 있습니다.

사용할 수 있는 템플릿도 많이 있습니다. 예를 들어 저는 사전 구축된 GitHub Action을 사용하여 CodeQL의 취약점을 발견합니다.

지속적인 배포의 경우 모든 확인이 완료된 후 main 으로 푸시될 때마다 실행되는 자체 배포 스크립트를 설정할 수 있습니다. 그러나 6단계에서 선택한 호스팅 제공업체에 따라 별도의 조치를 취하지 않아도 될 수도 있습니다.

예를 들어 Netlify는 GitHub와 원활하게 통합되어 main 분기가 자동으로 배포됩니다.

8. 종속성을 최신 상태로 유지하려면 dependencyabot을 사용하세요.

우리는 웹사이트를 구축하고 이를 라이브로 설정했으며 이제 우리가 하고 싶은 것은 긴장을 푸는 것뿐입니다. 그러나 JS 생태계는 빠르게 발전하고 있으며 취약점도 마찬가지입니다.

우리는 애플리케이션을 안전하게 유지하기 위해 종속성을 최신 상태로 유지하고 싶지만 npm 종속성 관리가 어려울 수 있으며 매일 업데이트를 확인하고 싶지는 않습니다.

운 좋게도 이 모든 것을 처리해 줄 수 있는 Sendabot이라는 훌륭하고 작은 도구가 있습니다. 🤖 dependencyabot은 자동화된 종속성 업데이트를 위해 GitHub에서 만든 도구입니다. 이제 GitLab 버전도 사용할 수 있습니다.

당신이 해야 할 일은 dependabot.yml 파일을 추가하는 것뿐입니다. 그러면 GitHub는 당신이 사용하는 패키지의 새 버전을 사용할 수 있을 때 자동으로 끌어오기 요청을 생성합니다. 예를 들어 PR 담당자 및 열려 있는 PR의 최대 수를 설정하기 위해 YAML 파일에서 종속봇을 구성할 수 있습니다.

7단계에서 PR에 대한 자동화된 검사를 설정했기 때문에 이러한 검사는 모든 Sendabot PR에서 실행되며 새 버전이 웹 사이트를 손상시키지 않을 것이라고 확신할 수 있습니다.

저장소 보안 설정에서 의존성의 취약점에 대해 경고하도록 dependencyabot을 구성할 수도 있습니다.

9. 접근성 문제 확인

접근성은 매우 이상한 주제입니다. 웹 사이트의 접근성을 향상시키는 데 있어 쉬운 일이 너무 많음에도 불구하고 매우 중요하지만 종종 무시되는 경우가 있습니다.

JS 프레임워크와 UI 구성 요소 라이브러리를 사용하는 경우 접근성 점수가 완전히 나쁘지는 않습니다. 특히 사용자 정의 글꼴이나 색 구성표를 포함한 경우 여전히 개선될 수 있습니다.

Chrome 개발자 도구에서 Lighthouse와 같은 도구를 실행하여 잠재적인 개선 사항을 발견할 수 있습니다. Lighthouse는 보고서를 생성하고 접근성을 개선하기 위한 변경 사항을 제안합니다.

이러한 제안은 일반적으로 글꼴 크기 늘리기, 텍스트와 배경 간의 대비 변경, DOM에서 HTML 요소 순서 재배치 등 구현하기 쉽습니다.

Lighthouse는 성능, 모범 사례 및 SEO에 대한 보고서도 생성할 수 있습니다. 🆒

10. Cron 작업을 실행하여 웹 사이트를 ping합니다.

웹사이트를 라이브로 설정한 후, 웹사이트가 여전히 존재하는지 적어도 하루에 한 번씩 확인하고 싶은 충동을 느꼈습니다. 🕵️‍♀️

처음에는 내 웹사이트가 아직 사용 가능한 것을 볼 때마다 기뻤지만 곧 지루해졌습니다.

어떤 이유로든 웹사이트가 다운될 경우 자동으로 알림을 받으려면 정기적으로 웹사이트의 URL을 핑하는 크론 작업을 설정하면 됩니다.

프로젝트에 백엔드와 DB가 포함된 경우 API에서 일부 GET 요청을 실행하는 몇 가지 기본 스모크 테스트를 설정할 수도 있습니다.

내 경우에는 하루에 한 번 실행되고 내 페이지를 핑하는 또 다른 GitHub Action을 설정했습니다. 귀하의 홈페이지와 예상되는 트래픽 종류에 적합하다고 판단되면 빈도를 높이십시오.

결론

그리고 우리는 끝났습니다! 적어도 지금은.

나에게 있어 내 웹사이트는 무엇보다도 내가 궁금한 기술을 시험해 볼 수 있는 놀이터 역할을 하기 때문에 가끔씩 수정하는 것을 좋아합니다. 정기적으로 웹사이트 코드를 다시 방문하여 재미있게 즐겨보시기 바랍니다. 💃

이 가이드를 통해 개인 홈페이지를 구축하고 유지하는 것이 얼마나 쉬운지 알 수 있었으면 좋겠습니다. 아마도 1~2일 안에 간단한 것을 만들 수 있을 것입니다. (나와 같다면 CSS 레이아웃을 올바르게 얻으려면 이틀을 더 추가하세요 🙄).

웹 사이트를 배포하고 자동화를 추가하여 유지 관리를 쉽게 만드는 작업은 2시간 이내에 완료될 수 있습니다.

당신이 구축할 놀라운 웹사이트를 모두 볼 수 있기를 기대합니다! 😋