본문 바로가기
Blog

Hugo & Github.io 블로그 만들기

by WhoamixZerOne 2021. 4. 20.

Hugo & Github.io

 

[Hugo Site] http://gohugo.io

 

The world’s fastest framework for building websites

The world’s fastest framework for building websites

gohugo.io

 

Hugo 설치

 

[Hugo Github] http://github.com/gohugoio/hugo/releases

 

Releases · gohugoio/hugo

The world’s fastest framework for building websites. - gohugoio/hugo

github.com

  1. Hugo 공식 깃헙에서 운영체제에 맞는 최신 버전 다운로드
  2. 원하는 경로에 디렉토리 생성해서 다운로드한 압축파일 해제
  3. 시스템 환경 변수에 등록 : $ set PATH=%PATH%;C:\Huogo\bin
  4. $ hugo version or $ hugo help로 동작 확인

Github Repository 2개 만들기

  1. 하나는 Hugo의 컨텐츠와 소스파일들을 포함할 Repository 생성(techblog이름으로 생성함)
  2. 다른 하나는 렌더링된 버전의 Hugo 웹사이트를 포함할 username.github.io Repository 생성

Create a New Site

  1. $ hugo new site "폴더명" 명령으로 로컬에서 콘텐츠를 관리하기 위한 장소 생성(Hugo/blog)
  2. C:\hugo\blog 에서 $ dir 로 Directory Structure를 확인할 수 있다.

 

 

 

 

Theme Download

[Hugo Theme] http://themes.gohugo.io

 

Complete List

 

themes.gohugo.io

위의 사이트에서 원하는 테마를 선택해서 Github Repository 주소를 복사한다.

 

  1. $ cd C:\hugo\blog 로 이동한다.
  2. $ git init
  3. $ git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
  4. config.toml 파일을 사용자에 맞게 수정한다.

clone 대신 submodule로 하면 업데이트된 테마를 쉽게 가지고 올 수 있기 때문에 더 좋은 선택이라고 한다.

더보기 
baseURL = "<userbaseurl>"
# [en, zh-cn, fr, ...] determines default content language
defaultContentLanguage = "en"
# language code
languageCode = "en"
title = ""

# Change the default theme to be use when building the site with Hugo
theme = "LoveIt"
summaryLength=500

[params]
  # LoveIt theme version
  version = "0.2.X"
  defaultTheme = "auto"

  [params.header]
    # desktop header mode ("fixed", "normal", "auto")
    desktopMode = "auto"
    # mobile header mode ("fixed", "normal", "auto")
    mobileMode = "auto"
  [params.footer]
    enable = true
    since = 2021
#  [params.home.profile]
#      enable = true
#      avatarURL = "/images/profile.png"
#      subtitle = "Programmer rather than coder."
#      # whether to use typeit animation for subtitle
#      typeit = true
#      # whether to show social links
#      social = true
#  [params.social]
#    GitHub = ""
#    Linkedin = ""
#    Instagram = ""
#    Facebook = ""
#    Email = ""
#    RSS = true
#  [params.page]
#    lightgallery = true
#    [params.page.share]
#      enable = true
#      Twitter = true
#      Facebook = true
#      Linkedin = true
#      Blogger = true
    [params.page.code]
      # whether to show the copy button of the code block
      copy = true
      # the maximum number of lines of displayed code by default
      maxShownLines = 500
    [params.page.comment]
      enable = true
      [params.page.comment.utterances]
        enable = true
#        repo="/blog-comment"
        issueTerm="pathname"
        label="Comment"
        lightTheme = "github-light"
        darkTheme = "github-dark"
#  [params.analytics]
#    enable = true
#    # Google Analytics
#    [params.analytics.google]
#      id = ""
#      # whether to anonymize IP
#      anonymizeIP = true
  [params.typeit]
    # typing speed between each step (measured in milliseconds)
    speed = 100
    # blinking speed of the cursor (measured in milliseconds)
    cursorSpeed = 500
    # character used for the cursor (HTML format is supported)
    cursorChar = "|"
    # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
    duration = -1

[sitemap]
  changefreq = "weekly"
  filename = "sitemap.xml"
  priority = 1

[author]
  name = "<username>"
  link = "<userbaseurl>/resume"

[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

 

Remote와 Submodule 설정

  1. $ cd C:\hugo\blog
  2. $ git remote add origin <techblog repository url>
  3. $ git submodule add -b master <github.io repository url> public

Github.io를 public으로 해서 hugo 명령으로 public에 웹사이트를 만들 때, 만들어진 public 디렉터리는 다른 remote origin을 가진다.

 

콘텐츠 생성

  1. $ hugo new post/test.md 명령으로 파일을 생성하면 \content\post\test.md로 만들어진다.
  2. 콘텐츠 확인
    1. $ hugo server or $ hugo server -D로 웹서버 실행
    2. localhost:1313 접속으로 확인
    3. -D 옵션은 config.toml에 있는 draft: true일 시  draft 문서들도 보이는 옵션이다.

콘텐츠 업로드(블로그)

  1. $ cd C:\hugo\blog
  2. $ hugo -t "테마이름" 명령으로 테마가 적용된 블로그 내용을 public에 생성한다.
  3. $ cd public
  4. $ git add . 수정된 파일들을 index에 올린다.
  5. $ git commit -m "커밋메시지" 변경 내용을 commit
  6. $ git push origin master commit을 github.io에 푸시
  7. blog 저장소에도 변경내용 push하기
    1. $ cd blog
    2. $ git add.
    3. $ git commit -m "커밋메시지"
    4. $ git push origin master

 

더보기

# 쉘 스크립트로 업로드 자동화

#!/bin/bash

 

echo -e "\033[0;32mDeploying updates to Github...\033[0m"

 

# Build the project

hugo -t hugo-theme-LoveIt

 

# Go to public folder

cd public

 

# Add changes to git

git add .

 

# Commit changes

msg="rebuilding site 'date'"

if [ $# -eq 1 ]

    then msg="$1"

fi

git commit -m "$msg"

 

# Push source and build repos.

git push origin master

 

# Come back up to the project root

cd ..

 

# blog repository commit & push

git add .

 

msg="rebuilding site 'date'"

if [ $# -eq 1 ]

    then msg="$1"

fi

git commit -m "$msg"

 

git push origin master

 

Git Clone(Main project clone)

# clone main project
git clone <repository url>

clone을 하고 들어가보면 .gitmodules라는 파일을 볼 수 있다.

이 파일을 열어 보면 sub project가 main project에서 위치한 폴더명과 git repository 주소가 적혀 있는 것을 볼 수 있다.

이것이 submodule에 대한 내용이다.

 

Git clone Submodule(Sub project clone)

# git config --list --local 명령어로 확인
git submodule init
# clone submodules
git submodule update
# checkout master each submodules
git submodule foreach git checkout master

 

위의 방법을 명령어 한 줄로 할 수 있는 방법이 있다.

git clone --recurse-submodules <your repository url>

 

 

[출처] "Intergerous" github. http://github.com/Integerous/Integerous.github.io

 

Integerous/Integerous.github.io

:memo: Hugo로 github.io 블로그 만들기. Contribute to Integerous/Integerous.github.io development by creating an account on GitHub.

github.com

이 글은 첫 github.io 블로그를 만들 때 자료를 찾아보다가 "Integerous"님의 글이 잘 정리되어 있어서

혹시나 나중에 다시 필요할 때 보기 위해서 제 블로그에 다시 남겨놓은 것입니다.

 

 

 

댓글

티스토리툴바