Hugo 및 Github Pages를 사용하여 블로그를 만드는 방법

Originally posted on my blog with CLI examples and snippets

우리는 놀라운 Hugo 프레임워크를 사용하여 처음부터 블로그를 구축하고 사용자 정의 하위 도메인과 함께 Github Pages을 사용하여 무료로 배포할 것입니다!

왜 휴고?

Hugo는 간단하고 빠르며 Go로 작성되었습니다. 놀라운 커뮤니티 지원과 다양한 테마가 있습니다.

개인적으로 저는 블로그 게시물을 마크다운 파일로 작성하고 github에 푸시하여 작업 없이 라이브로 게시하고 싶습니다. Hugo를 사용하면 바로 그렇게 할 수 있습니다!

내용물

Installs and setups

Create a new blog and run it locally

Create a new post and verify it locally

Generate static files and see it live in Github Pages

Enable Custom Sub Domain

설치 및 설정

homebrew를 사용하여 CLI 설치hugo

brew install hugo

GitHub를 사용하여 2개의 새 git 저장소를 설정합니다. 예를 들어 계정 이름이 rockstarblogger라고 가정해 보겠습니다.

rockstarblogger/blog - 여기에는 정적 블로그 + Hugo 프로젝트 파일이 포함됩니다

.

rockstarblogger/rockstarblogger.github.io - 여기에는 블로그에 필요한 최종 정적 파일만 포함됩니다.

빈README.md 커밋을 만듭니다. 이것은 나중에 유용할 것입니다.
> 두 번째 저장소의 이름에 유의하십시오. .github.io

의 명명 규칙을 따르면 Github에서 쉽게 만들 수 있습니다.

Hugo Theme을 선택합니다. 이 새 블로그에는 Hyde을 사용할 것입니다.

새 블로그를 만들고 로컬에서 실행

첫 번째 저장소blog를 복제하여 모든 프로젝트 파일을 저장합니다.

~ % git clone https://github.com/rockstarblogger/blog.git
~ % cd blog
blog %  

새 디렉터리rockstarblogger 내에 새 Hugo 사이트~/blog를 만듭니다.

blog % hugo new site rockstarblogger
Congratulations! Your new Hugo site is created in ~/blog/rockstarblogger.

~/blog/rockstarblogger/themes 디렉토리에서 테마 다운로드

blog % cd rockstarblogger/themes
themes % git clone https://github.com/spf13/hyde.git
Cloning into 'hyde'...
remote: Enumerating objects: 424, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 424 (delta 0), reused 2 (delta 0), pack-reused 419
Receiving objects: 100% (424/424), 837.74 KiB | 7.41 MiB/s, done.
Resolving deltas: 100% (199/199), done.

theme = 'hyde' 테마를 ~/blog/rockstarblogger/config.toml에 추가

blog % cd rockstarblogger
rockstarblogger % vi config.toml

baseURL = 'https://rockstarblogger.github.io/'
languageCode = 'en-us'
title = 'rockstarblogger blog'
theme = 'hyde'

hugo serve를 사용하여 이것을 실행하면 새 사이트가 http://localhost:1313/에 게시됩니다!!!

rockstarblogger % hugo serve
Start building sites … 
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  6  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 22 ms
Watching for changes in ~/blog/rockstarblogger/{archetypes,content,data,layouts,static,themes}
Watching for config changes in ~/blog/rockstarblogger/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

새 게시물을 만들고 로컬에서 확인

이제 새 사이트를 테스트했으므로 첫 번째 블로그 게시물을 작성하겠습니다.

rockstarblogger % hugo new posts/firstpost.md
rockstarblogger % vi content/posts/firstpost.md

Set draft: false in the markdown files to be able to view it.

로컬에서 새 블로그 게시물을 확인하고 볼 수 있습니다.

rockstarblogger % hugo serve

정적 파일을 생성하고 Github Pages에서 실시간으로 확인

rockstarblogger/rockstarblogger.github.io를 git 하위 모듈로 추가하고 이름을 기존public 폴더로 바꾸겠습니다.

rockstarblogger % git submodule add -b main https://github.com/rockstarblogger/rockstarblogger.github.io.git public

이제 public 폴더로 이동하면 새로운 origin 와 함께 1 커밋이 표시되어야 합니다.

rockstarblogger % cd public && ls
public % README.md
public % git remote -v 
origin  https://github.com/rockstarblogger/rockstarblogger.github.io.git (fetch)
origin  https://github.com/rockstarblogger/rockstarblogger.github.io.git (push)

hugo cmd를 사용하여 정적 파일 생성

rockstarblogger % hugo
Start building sites … 
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  6  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 44 ms

public 디렉토리에서 새 정적 파일을 확인합니다.

rockstarblogger % cd public && ls

정적 파일을 rockstarblogger/rockstarblogger.github.io에 푸시합니다.

public % git add .
public % git commit -m "first commit containing all static files"
public % git push origin main

Settings에 대해 rockstarblogger/rockstarblogger.github.io에서 Github 페이지를 활성화하고 https://rockstarblogger.github.io에서 라이브 블로그를 확인합니다.

사용자 지정 하위 도메인 활성화

예를 들어 CNAME가 https://rockstarblogger.github.io로 설정된 Host를 가리키는 blog 항목을 추가합니다. 이렇게 하면 https://blog.example.com에서 블로그에 액세스할 수 있습니다.

CNAME repo에 파일 이름이 rockstarblogger.github.io인 새 파일을 한 줄blog.example.com로 추가합니다.

푸쉬하고 블로그 라이브 보러가기!!