[Ubuntu] 📦Hugo블로그 배포 (with Github Pages)

• 저번 글

2024.04.09 - [Ubuntu] - [Ubuntu] ✒️Hugo블로그 설치와 게시까지(배포X)

[Ubuntu] ✒️Hugo블로그 설치와 게시까지(배포X)

 

들어가며

---

• 직접 해보니 저번 글 단계 이후로 할게 아주 많습니다
• 저도 찾아보고 헤딩하면서 시도하느라 단계별로 캡쳐를 못해서 세세하고 다루진 못할것 같네요
• 일단 제가 깨달은것들과 참고한 곳, 시행착오들 위주로 기록해봅니다

 

테마 설정

---

• 일단 블로그 폴더 루트에있는 hugo.toml 파일은 필요가 없습니다.
• 지우거나 이름을 바꿔서 작동 안하게 했습니다

sudo mv hugo.toml hugo_bak.toml

 

• 그리고 저번에 설치했던 blowfish테마의 설정 템플릿을 블로그의 루트 폴더로 복사해옵니다

sudo cp -r themes/blowfish/config .

 

• 이제 설정 파일들을 고쳐줘야하는데 문서를보면서 어떤 속성이 있는지 하나하나 찾아볼려면 속성이 너~무 많아서 의지가 꺾여버립니다
• 저는 /themes/blowfish/exampleSite/config/_default/ 경로에 있는 `*.toml` 설정 파일들과 아까 복사한 /config/_default/ 경로에있는 *.toml 파일을 비교하면서 선택적 복붙을했습니다
• hugo server 커맨드로 한번 가동을 해놨으면 *.toml 설정파일 수정은 실시간으로 반영이 됩니다 → 굳이 설정하고 재시작할 필요가 없습니다

 

*.toml 수정 팁

---

• 저는 이런식으로 vscode로 ssh 접속해서 한쪽엔 exampleSite 설정, 한쪽엔 내 블로그 설정을 띄워서 비교 하면서 했습니다

 

 

어떤 설정파일이 뭘 설정하는지에 대해 알아낸 부분:

• 비주얼적인 부분 (레이아웃)은 params.toml 파일에서 설정합니다
• 메뉴 카테고리는 menus.[언어코드].toml 파일
  • pageRef 속성은 글(.md)의 부모폴더 이름과 일치해야합니다
  • name 속성은 사이트에서 보이는 메뉴 이름입니다
  • 폴더 이름이 posts라면 pageRef: = "posts", name = "보였으면 하는이름"
• languages.[언어코드].toml 파일에서 홈페이지에 보이는 부분들을 설정합니다
  • title : 왼쪽 위 블로그 이름
  • [params]
  • logo: 왼쪽 위 블로그 로고 (리소스는 assets/img/ 아래에 넣으면 됩니다)
  • 나머지는 생략하겠습니다.

 

내 설정 파일

`hugo.toml`

# -- Site Configuration --
# Refer to the theme docs for more details about each of these parameters.
# https://blowfish.page/docs/getting-started/

theme = "blowfish"
# baseURL = "https://your_domain.com/"
defaultContentLanguage = "ko"

# pluralizeListTitles = "true" # hugo function useful for non-english languages, find out more in  https://gohugo.io/getting-started/configuration/#pluralizelisttitles

enableRobotsTXT = true
paginate = 100
summaryLength = 30
hasCJKLanguage = true

buildDrafts = false
buildFuture = false

# googleAnalytics = "G-XXXXXXXXX"

[imaging]
  anchor = 'Center'

[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"
  series = "series"

[sitemap]
  changefreq = 'always'
  filename = 'sitemap.xml'
  priority = 0.5

[outputs]
  home = ["HTML", "RSS", "JSON"]

[related]
  threshold = 0
  toLower = false

    [[related.indices]]
        name = "tags"
        weight = 100

    [[related.indices]]
        name = "categories"
        weight = 100

    [[related.indices]]
        name = "series"
        weight = 50

    [[related.indices]]
        name = "authors"
        weight = 20

    [[related.indices]]
        name = "date"
        weight = 10

    [[related.indices]]
      applyFilter = false
      name = 'fragmentrefs'
      type = 'fragments'
      weight = 10

 

`params.toml`

# -- Theme Options --
# These options control how the theme functions and allow you to
# customise the display of your website.
#
# Refer to the theme docs for more details about each of these parameters.
# https://blowfish.page/docs/configuration/#theme-parameters

colorScheme = "blowfish"
defaultAppearance = "dark" # valid options: light or dark
autoSwitchAppearance = true

enableSearch = true
enableCodeCopy = true

 mainSections = ["docs"]
# robots = ""

disableImageOptimization = false
disableTextInHeader = false

defaultBackgroundImage = "/img/background.svg"
defaultFeaturedImage = "/img/featured.svg"

highlightCurrentMenuArea = true
smartTOC = true
smartTOCHideUnfocusedChildren = false

[header]
  layout = "fixed" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur

[footer]
  showMenu = true
  showCopyright = true
  showThemeAttribution = true
  showAppearanceSwitcher = true
  showScrollToTop = true

[homepage]
  showHero = true
  layoutBackgroundBlur = true
  layoutBackgroundHeaderSpace = true
  layout = "background" # valid options: page, profile, hero, card, background, custom
  #homepageImage = "IMAGE.jpg" # used in: hero, and card
  showRecent = true
  showRecentItems = 6
  showMoreLink = true
  showMoreLinkDest = "/posts"
  cardView = true
  cardViewScreenWidth = false

[article]
  showDate = true
  showViews = true
  showLikes = true
  showDateOnlyInArticle = false
  showDateUpdated = false
  showAuthor = true
  # showAuthorBottom = false
  showHero = true
  heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
  layoutBackgroundBlur = true # only used when heroStyle equals background or thumbAndBackground
  layoutBackgroundHeaderSpace = true # only used when heroStyle equals background
  showBreadcrumbs = true
  showDraftLabel = true
  showEdit = false
  # editURL = "https://github.com/username/repo/"
  editAppendPath = true
  seriesOpened = false
  showHeadingAnchors = true
  showPagination = true
  invertPagination = false
  showReadingTime = true
  showTableOfContents = true
  showRelatedContent = true
  relatedContentLimit = 6
  showTaxonomies = true
  showAuthorsBadges = true
  showWordCount = true
  sharingLinks = [ "linkedin", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", "telegram"]
  showZenMode = true

[list]
  showHero = true
  heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
  layoutBackgroundBlur = true # only used when heroStyle equals background or thumbAndBackground
  layoutBackgroundHeaderSpace = false # only used when heroStyle equals background
  showBreadcrumbs = false
  showSummary = false
  showViews = true
  showLikes = true
  showTableOfContents = true
  showCards = true
  groupByYear = false
  cardView = true
  cardViewScreenWidth = false
  constrainItemsWidth = false

[sitemap]
  excludedKinds = []

[taxonomy]
  showTermCount = true
  showHero = true
  heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
  showBreadcrumbs = false
  showViews = true
  showLikes = true
  showTableOfContents = true
  cardView = false

[term]
  showHero = true
  heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
  showBreadcrumbs = false
  showViews = true
  showLikes = true
  showTableOfContents = true
  groupByYear = false
  cardView = true
  cardViewScreenWidth = false

[firebase]
  # apiKey = "XXXXXX"
  # authDomain = "XXXXXX"
  # projectId = "XXXXXX"
  # storageBucket = "XXXXXX"
  # messagingSenderId = "XXXXXX"
  # appId = "XXXXXX"
  # measurementId = "XXXXXX"

[fathomAnalytics]
  # site = "ABC12345"
  # domain = "llama.yoursite.com"

[umamiAnalytics]
  # websiteid = "ABC12345"
  # domain = "llama.yoursite.com"

[buymeacoffee]
  # identifier = ""
  # globalWidget = true
  # globalWidgetMessage = "Hello"
  # globalWidgetColor = "#FFDD00"
  # globalWidgetPosition = "Right"

[verification]
  # google = ""
  # bing = ""
  # pinterest = ""
  # yandex = ""

 

나머진 생략하겠습니다 (`languages.[언어코드].toml`, `menus.[언어코드].toml`은 어렵지 않아요

 

Github Pages 배포

---

참고한 링크
pages용 저장소 만들기
hugo의 가이드 문서

 

- github 저장소 이름은 꼭 <user>.github.io로 지어줘야 합니다.
- Pages를 무료로 사용하실려면 저장소 접근권한은 public이어야 합니다

 

 

• 블로그 디렉토리를 원격 저장소에 연결해주고 통째로 올려줍니다 (이 부분 설명은 스킵하겠습니다)
• 자동배포를 위해 깃허브 Action을 사용할겁니다.
• 저장소 설정 - Pages탭에 들어가서 Source를 GitHub Actions로 변경해줍니다 
• 로컬 저장소에 Actions설정에 필요한 yaml 파일을 생성해줍니다

sudo mkdir -p .github/workflows/
cd .github/workflows/
sudo touch hugo.yaml

 

• 그리고 hugo.yaml파일에 내용을 아래와 똑같이 입력합니다 
• 필요하다면 브랜치 이름과 Hugo의 버전을 수정합니다

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.124.0
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
      - name: Install Dart Sass
        run: sudo snap install dart-sass
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

 

• 이제 원격 저장소에 push해줍니다
• github 저장소에소 Actions탭에 들어가보면 배포가 자동으로 진행중일거고 시간이 지나면 완료될겁니다

예시

 

 

접속!

---

• 이제 배포가 완료된 주소로 접속해봅니다 
• 일반적이라면 [유저네임].github.io 입니다

• 저는 이런저런 설정을 한 뒤라서 이렇게 보입니다
• 이제 블로그를 열심히 운영하면 되겠습니다

 

 

마치며

---

• 이제 블로그를 직접 배포한 개발자가 됐습니다 
• 서비스를 사용한거지만은 그래도 어렵긴 하네요
• 저는 진이빠져서 당분간은 이주작업은 미룰생각입니다 힘드네요