Hugo

History 2025-06-27 - tip 추가: tags, categories list에 cover image 표시하기 2022-09-08 - 내용 수정, 그림파일 링크 관련 추가 PaperMod screen shot Intro hugo의 테마 중에 가장 간결하고 안정적이며 많은 사람들이 사용하고 있다. hugo 프로젝트는 ~/www로 가정한다. 주의할 것은 hugo의 구조가 ~/www/contents/이하에 markdown 파일을 넣어주어야 하고, 이하 폴더는 적절히 만들되 index.md파일은 만들면 웹페이지 메인 화면에 내용이 뜨질 않는다는 점이다. 설정은 ~/www/config.yml이다. 설정을 변경하면 hugo -D server 동작시 자동으로 반영된다. 만약 설정 변경 사항이 브라우저에서 보이지 않으면 서버를 재실행 한다. Install and Update Install $ cd ~/www $ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 Update $ cd themes/PaperMod $ git pull Setup 관련 링크 아래 사이트에 config.yml 및 post.md 샘플이 있으니 참고한다. https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-installation/ 테마 설정 papermod 의 테마는 light/dark/auto 가 있다. 홈화면 좌측 상단에 해/달 아이콘 클릭 baseURL: "https://your_idname.github.io/" # 자신의 깃페이지 URL title: My Blog and wiki # 블로그홈 제목 paginate: 5 # 홈에서 보여줄 블로그 표시 갯수 theme: "PaperMod" # 테마 PaperMod로 지정 params: # defaultTheme: light # defaultTheme: light defaultTheme: auto # auto로 설정하면 사용자가 바꿀 수 있다. # disableThemeToggle: true # 해/달 아이콘을 보이지 않게 하기 메뉴설정 홈 우측 상단 메뉴를 다음과 같이 추가한다. menu: main: - identifier: categories # 블로그 카테고리 메뉴 name: categories url: /categories/ weight: 10 - identifier: search # 블로그 검색 메뉴 name: Search url: /search weight: 30 - identifier: tags # 블로그 태그 메뉴 name: tags url: /tags/ weight: 20 - identifier: archives # 블로그 태그 메뉴 name: tags url: /tags/ weight: 20 Archive Page - 아카이브 페이지, 날짜별로 올린 포스트문서가 정리됨 $ cat << EOF > ~/www/content/archives.md --- title: "Archive" layout: "archives" # url: "/archives" summary: "archives" --- EOF Search Page - 검색페이지, 퍼지 스타일의 빠른 검색 $ cat << EOF > ~/www/content/search.md --- title: "Search" # in any language you want layout: "search" # is necessary # url: "/archive" # description: "Description for Search" summary: "search" placeholder: "검색어를 입력하세요" --- EOF tags와 categories는 올릴 포스트문서 post.md 등의 frontmatter에 기록하면 자동으로 분류되고 홈 상단 메뉴에서 볼 수 있다. Post Cover Image ~/www/config.yml에 설정해주고 아래 설명대로 포스트문서에 링크를 걸어주면 된다. cover: image: "<image path/url>" # can also paste direct link from external site # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt: "<alt text>" caption: "<text>" relative: false # To use relative path for cover image, used in hugo Page-bundles 이미지 사이즈를 줄이고 처리속도를 높이려면 아래 설정 추가 params: cover: responsiveImages: false 그러나 실제로 적용해도 페이지는 변화하지 않는다. ...