Hugo 사용기

Jump to Section

1. Hugo 와 Github를 이용한 블로그 만들기

Git 설치

링크 : 깃 허브 홈페이지
Hugo 설치

https://github.com/gohugoio/hugo/releases
환경변수 설정
Hugo 프로젝트 만들기

hugo new site 프로젝트 이름
Git remote

git init
git remote add origin <첫번째 repo url>
git submodule add -b master <두번째 repo url> public
Git subdirectory
Hugo server 다루는 법

2. Hugo 새로운 글 쓰기

    hugo new 파일이름.md
    hugo server -D
    draft = true 지우기
    hugo
    cd public
    git add .
    git commit -m "커밋 메세지"
    git push origin master
    cd ..   
    git add .
    git commit -m "커밋 메세지"
    git push origin master

3. Hugo 커스터마이징

출처 : 휴고 테마 커스터마이징 하기

4. 마크다운

출처 : 마크다운 markdown 작성법

코드블럭 사용하는 법

import pandas as pd

5. Google Analytics 추가

Hugo config.toml 파일에 아래 사항 추가

googleanalytics = "UA-xxxxxxx"

6. Google 검색 엔진 추가

웹에 배포 된 index.html을 보면 다음과 같이 추가된다.

<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'UA-xxxxxxxx', 'auto');
	
	ga('send', 'pageview');
}
</script>

google 검색창에 다음과 같이 치면 된다.

site : yoursite.com

7. 댓글 기능 추가

blog-comment repository 생성

root/layouts/partials/body-article-content.html의

content class에 다음 스크립트 추가

</div>
    <script src="https://utteranc.es/client.js"
    repo="calmbrown/blog-comment"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
    </script>
</div>

… 테마를 옮겨야겠다. 기본적인 마크다운 기능이 적용이 안된다.

인용문 적용
html 적용 ( 자체 아이콘등 기능은 많지만 락인 되기는 싫어, markdown 고유하게 이용)

마땅한 theme 가없네

왼쪽에 목록기능 구성되고, 토글 되는 theme 추천좀

Markdown