Hugo와 Firebase를 사용하여 무료 개발자 블로그 만들기

이 자습서에서는 Hugo를 사용하여 블로그를 만들고 Firebase에 무료로 배포하는 방법을 보여줍니다. Hugo는 오픈 소스 정적 사이트 생성기이고 Firebase는 웹 및 모바일 개발을 보강하는 데 사용되는 리소스와 서비스를 제공하는 Google 플랫폼입니다. 아직 블로그가 없지만 블로그 호스팅에 관심이 있는 개발자라면 이 기사가 블로그를 만드는 데 도움이 될 것입니다. 이 단계를 따르려면 Git과 터미널을 사용하는 방법을 알아야 합니다.

자신의 기술 블로그를 갖는 것은 개발자로서의 경력에 ​​많은 이점을 줄 수 있습니다. 첫째, 기술 주제에 대한 블로그를 작성하면 기본 개발자 직업에서 얻지 못했을 수 있는 것들을 배울 수 있습니다. 작품을 조사하거나 새로운 것을 시도하면서 결국 새로운 기술을 사용하고 극단적인 경우 문제를 해결하는 방법과 같은 많은 것을 배우게 됩니다. 그 외에도 독자의 의견에 참여할 때 의사 소통 및 비판 및 피드백 처리와 같은 소프트 기술을 연습하게 됩니다.

또한 개념을 설명하기 위해 블로그의 샘플 프로젝트를 작성할 때 너무 많은 코드를 작성하게 되므로 소프트웨어 개발 기술에 대해 더 자신감을 갖게 됩니다. 기술 블로그는 기술과 전문 지식을 보여줄 수 있는 플랫폼을 제공하므로 개발자로서 브랜드를 강화합니다. 이것은 직업, 연설 및 회의 참여, 도서 거래, 부업, 다른 개발자와의 관계 등과 같은 모든 종류의 기회를 열어줍니다.

SmashingMag에 대한 권장 읽기 :

• WordPress에서 Hugo로 전환
• JAMstack에서 헤드리스 WordPress 사이트를 만드는 방법
• jQuery를 Vue.js로 교체: 빌드 단계가 필요하지 않음
• 원격 팀 내에서 진정한 인간 관계 만들기

예를 들어 Chris Sevilleja는 2014년 자신의 블로그 scotch.io에서 튜토리얼을 작성하기 시작했으며 나중에 Digital Ocean에 합류한 비즈니스가 되었습니다. 기술 블로그의 또 다른 중요한 이점은 소프트웨어 설계 및 기술 사양 문서를 작성할 때 작업의 자산이 될 수 있는 더 나은 작가가 된다는 것입니다. 또한, 그것은 당신을 탁월한 교사이자 멘토로 만듭니다. 예를 들어, 저는 Go 언어에 대해 블로그를 운영하고 있으며 Go 언어를 구축하는 Google Go 팀에서 일하는 Russ Cox의 블로그인 research.swtch.com을 자주 읽습니다. 그것으로부터, 나는 내 주요 직업에서 선택하지 않았을 수도 있는 언어가 어떻게 작동하는지에 대해 많은 것을 배웠습니다.

내가 읽고 많이 배우는 또 다른 훌륭한 블로그는 Ali Spittel의 welearncode.com으로, 블로그의 정말 중요한 부분은 다음과 같습니다.

"다른 사람들이 코딩하는 법을 배우도록 돕고 나를 따라오는 사람들이 더 쉽게 할 수 있도록 합니다."

블로그를 시작하고 실행하는 상당히 쉽고 고통스러운 방법은 블로그를 만들기 위해 계정을 만들기만 하면 되는 Medium과 같은 타사 플랫폼을 사용하는 것입니다. 이러한 플랫폼은 처음에는 대부분의 블로깅 요구 사항에 적합할 수 있지만 장기적으로는 몇 가지 단점이 있습니다.

일부 플랫폼은 사소한 일에 대해 지속적으로 주의를 산만하게 하는 알림 보내기, 앱 설치 요청 등과 같은 나쁜 사용자 경험을 제공합니다. 독자가 귀하의 블로그가 호스팅되는 플랫폼에서 나쁜 경험을 했다면 귀하의 콘텐츠에 참여할 가능성이 낮습니다. 그 외에도 독자의 상호 작용 및 블로그 시간을 향상시키는 데 필요한 도구가 지원되지 않을 수 있습니다. RSS 피드, 코드 스니펫에 대한 구문 강조 표시 등은 플랫폼에서 지원되지 않을 수 있습니다. 최악의 시나리오에서는 블로그가 호스팅되는 플랫폼이 닫히고 수행한 모든 작업이 손실될 수 있습니다.

자신의 블로그를 호스팅하고 사용자를 해당 블로그로 리디렉션하면 게시한 게시물에 더 많이 참여할 가능성이 높아집니다. 플랫폼에 있는 유일한 사람이기 때문에 플랫폼에서 다른 작가와 독자의 관심을 끌기 위해 경쟁할 필요가 없습니다. 독자들은 귀하가 전달하는 내용에 더 집중하기 때문에 귀하의 게시물을 더 많이 읽거나 뉴스레터에 가입할 가능성이 높습니다. 자신의 블로그 호스팅과 함께 제공되는 또 다른 장점은 자신의 취향에 따라 다양한 방식으로 블로그를 사용자 지정할 수 있다는 것입니다. 이는 일반적으로 타사 플랫폼에서는 불가능합니다.

휴고 설정

macOS 또는 Linux에서 작업하는 경우 Hugo를 설치하는 가장 쉬운 방법은 Homebrew를 사용하는 것입니다. 터미널에서 실행해야 하는 것은 다음과 같습니다.

 brew install hugo

Windows에서 실행 중인 경우 특종 설치 프로그램이나 초콜릿 패키지 관리자를 사용하여 Hugo를 설치할 수 있습니다. 특종:

 scoop install hugo

초콜릿의 경우:

 choco install hugo -confirm

이러한 옵션 중 어느 것도 적용되지 않는 경우 설치 옵션을 확인하십시오.

Firebase 도구 설정

Firebase 도구를 설치하려면 npm에 액세스하려면 Node.js가 설치되어 있어야 합니다. Firebase 도구를 설치하려면 다음을 실행하세요.

 npm install -g firebase-tools

이 링크에서 무료로 Firebase 계정을 만드세요. 이를 위해서는 Google 계정이 필요합니다. 다음으로 Firebase 도구를 사용하여 로그인합니다. Google 계정을 사용하여 로그인할 수 있는 브라우저 탭으로 리디렉션됩니다.

 firebase login

블로그 만들기

블로그 소스 코드를 저장할 디렉토리를 선택하십시오. 터미널에서 해당 디렉토리로 위치를 변경하십시오. 블로그 이름을 선택합니다. 이 자습서의 목적을 위해 블로그 이름을 sm-blog 지정하겠습니다.

 hugo new site sm-blog

문제가 발생할 경우를 대비하여 사이트의 소스 코드를 백업하는 것이 좋습니다. 저는 이를 위해 Github를 사용할 것이지만 동일한 작업을 선택하면 모든 버전 제어 서비스를 사용할 수 있습니다. 저장소를 초기화하겠습니다.

 cd sm-blog git init

사이트를 로컬에서 실행하고 브라우저에서 실제로 보기 전에 테마를 추가해야 합니다. 그렇지 않으면 빈 페이지만 표시됩니다.

블로그 테마 선택 및 설치

내가 Hugo에 대해 좋아하는 한 가지는 Hugo 뒤에 있는 커뮤니티와 커뮤니티에서 사용할 테마를 제출하는 모든 개발자입니다. 중소기업 웹사이트, 포트폴리오에서 블로그에 이르기까지 선택할 수 있는 다양한 테마가 있습니다. 블로그 테마를 선택하려면 theme.gohugo.io의 블로그 섹션으로 이동하세요. 저는 심플함과 미니멀리즘 때문에 Cactus Plus라는 테마를 선택했습니다. 이 테마를 설치하려면 저장소의 하위 모듈로 추가해야 합니다. 많은 테마는 사용자에게 설치에 하위 모듈을 사용하도록 지시하지만 그렇지 않은 경우 설명에 제공된 테마 제작자의 지침을 따르십시오. /themes 폴더에 테마를 추가하겠습니다.

 git submodule add -b master https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus

블로그 폴더의 루트에는 생성된 파일 config.toml 이 있습니다. 여기에서 사이트에 대한 설정을 지정합니다. 거기에서 테마를 변경해야 합니다. 테마 이름은 /themes 폴더에서 선택한 테마의 폴더 이름에 해당합니다. 이제 config.toml 파일의 내용입니다. 블로그 제목을 변경할 수도 있습니다.

 baseURL = "https://example.org/" languageCode = "en-us" title = "SM Blog" theme="hugo-theme-cactus-plus"

이제 블로그를 실행할 수 있습니다. 이름 변경을 제외하고는 테마와 똑같이 보일 것입니다. 서버를 실행한 후 브라우저에서 https://localhost:1313 으로 이동합니다.

 hugo server -D

블로그 개인화

자신의 블로그를 배포하는 것의 한 가지 이점은 모든 종류의 방법으로 원하는 대로 블로그를 개인화할 수 있다는 것입니다. Hugo에서 이를 수행하는 주요 방법은 선택한 테마를 변경하는 것입니다. 많은 테마가 config.toml 을 통해 사용자 정의 옵션을 제공합니다. 테마 작성자는 일반적으로 테마 페이지의 설명에서 옵션 목록과 모든 옵션이 의미하는 바를 제공합니다. 그렇지 않은 경우 테마의 /exampleSite 폴더를 확인하고 해당 폴더 내의 config.toml 내용을 config.toml 파일 에 복사합니다. 예를 들어:

 cp themes/hugo-theme-cactus-plus/exampleSite/config.toml .

모든 테마가 다르기 때문에 여기에서 변경한 내용이 귀하의 테마에 적용되지 않을 수 있지만 바라건대, 귀하의 블로그로 무엇을 해야 하는지에 대한 아이디어를 얻을 수 있을 것입니다.

1. 블로그의 아바타 이미지와 파비콘을 변경하겠습니다. 이미지를 포함한 모든 정적 파일은 /static 폴더에 추가해야 합니다. 나는 static 안에 /images 폴더를 만들고 거기에 이미지를 추가했습니다.
2. 내 블로그에 대한 트래픽을 추적할 수 있도록 Google Analytics를 추가하겠습니다.
3. 독자들이 내 게시물에 댓글을 남길 수 있도록 Disqus를 활성화하겠습니다.
4. RSS를 활성화하겠습니다.
5. Twitter와 Github에 대한 소셜 링크를 추가하겠습니다.
6. 트위터 카드를 활성화하겠습니다.
7. 홈 페이지의 게시물 제목 아래에 요약을 활성화하겠습니다.

따라서 내 config.toml 은 다음과 같이 보일 것입니다.

 ### Site settings baseurl = "your_firebase_address" languageCode = "en" title = "SM Blog" theme = "hugo-theme-cactus-plus" googleAnalytics = "your_google_analytics_id" [params] # My information author = "Cat Lense" description = "blog about cats" bio = "cat photographer" twitter = "cats" copyright = "Cat Photographer" # Tools enableRSS = true enableDisqus = true disqusShortname = "your_disqus_short_name" enableSummary = true enableGoogleAnalytics = true enableTwitterCard = true [social] twitter = "https://twitter.com/cats" github = "https://github.com/cats"

첫 게시물 작성

Hugo 게시물은 마크다운으로 작성됩니다. 그래서 당신은 그것에 익숙해야합니다. 게시물을 만들 때 실제로 Hugo가 HTML로 렌더링할 마크다운 파일을 만드는 것입니다. 게시물 제목을 소문자로 만들고 공백을 하이픈으로 대체합니다. 그것은 당신의 게시물의 이름이 될 것입니다. Hugo는 파일 이름을 가져와서 하이픈을 공백으로 대체하고 대소문자를 시작하도록 변환한 다음 제목으로 설정합니다. 내 파일 이름을 my-first-post.md 로 지정하겠습니다. 첫 번째 게시물을 만들려면 다음을 실행하세요.

 hugo new posts/my-first-post.md

게시물은 /content 폴더에 생성됩니다. 파일 내용입니다.

 --- title: "My First Post" date: 2020-03-18T15:59:53+03:00 draft: true ---

게시물에는 게시물을 설명하는 메타데이터인 머리말이 포함됩니다. 글을 작성하는 동안 게시물을 초안으로 유지하려면 draft: true 를 그대로 둡니다. 작성이 완료되면 draft: false 를 변경하여 게시물이 홈 페이지에 표시될 수 있도록 합니다. 홈페이지의 글을 요약하기 위해 머리말에 요약줄을 추가하겠습니다.

게시물에 리소스 추가하기

이미지, 비디오, 오디오 파일 등과 같은 리소스를 게시물에 추가하려면 확장자를 제외하고 게시물과 동일한 이름으로 /content/posts 폴더 내에 폴더를 만드세요.

예를 들어 다음 폴더를 생성합니다.

 mkdir content/posts/my-first-post

그런 다음 모든 게시물 리소스를 해당 폴더에 추가하고 긴 URL을 지정할 필요 없이 파일 이름으로 리소스에 연결합니다. 예를 들어 다음과 같은 이미지를 추가합니다.

 ![A cute cat](cute-cat.png)

블로그 소스 코드 호스팅

첫 번째 게시물 작성을 마치면 배포하기 전에 백업하는 것이 중요합니다. 그 전에 .gitignore 파일이 있는지 확인하고 여기에 /public 폴더를 추가하세요. 공용 폴더는 다시 생성될 수 있으므로 무시해야 합니다.

블로그 소스 코드를 호스팅할 Github에 리포지토리를 만듭니다. 그런 다음 원격 저장소를 로컬로 설정합니다.

 git remote add origin [remote repository URL]

마지막으로 모든 변경 사항을 준비하고 커밋한 다음 원격 저장소로 푸시합니다.

 git add * git commit -m "Add my first post" git push origin master

Firebase에 블로그 배포

Firebase에 블로그를 배포하려면 먼저 Firebase에서 프로젝트를 만들어야 합니다. Firebase 콘솔로 이동합니다. 프로젝트 추가를 클릭합니다.

프로젝트 이름을 입력합니다.

블로그에서 사용하려면 Google Analytics를 활성화하십시오.

프로젝트 생성이 완료되면 블로그 루트로 돌아가 블로그에서 Firebase 프로젝트를 초기화합니다.

 firebase init

이 명령이 실행되면 몇 가지 정보를 입력하라는 메시지가 표시됩니다.

다음으로 블로그를 구축하겠습니다. /public 폴더가 생성되고 여기에는 생성된 블로그가 포함됩니다.

 hugo

그런 다음 블로그를 배포하기만 하면 됩니다.

 firebase deploy

이제 블로그가 배포되었습니다. 출력에 제공된 호스팅 URL에서 확인하십시오.

다음 단계

Firebase 호스팅의 유일한 단점은 호스팅된 프로젝트에 사용하는 URL입니다. 보기 흉하고 기억하기 어려울 수 있습니다. 따라서 도메인을 구입하여 블로그용으로 설정하는 것이 좋습니다.

타사 플랫폼이 모두 나쁜 것은 아닙니다. 그들은 당신의 글에 관심이 있지만 아직 당신의 블로그를 접하지 못한 수많은 독자를 보유하고 있습니다. 해당 사이트에 교차 게시하여 많은 청중 앞에 작업을 게시할 수 있지만 자신의 블로그에 다시 링크하는 것을 잊지 마십시오. 블로그의 기사 링크를 어떤 플랫폼에 게시하든 표준 URL로 추가하여 검색 엔진에서 중복 콘텐츠로 간주되지 않고 사이트의 SEO에 피해를 입히지 않도록 합니다. Medium, dev.to 및 Hashnode와 같은 사이트는 표준 URL을 지원합니다.

결론

자신의 기술 블로그에 글을 쓰는 것은 소프트웨어 개발자로서의 경력에 ​​엄청난 이점을 제공하고 기술과 전문 지식을 개발하는 데 도움이 됩니다. 이 튜토리얼이 그 여정을 시작했거나 최소한 자신의 블로그를 만들도록 권장하기를 바랍니다.