[HUGO] 글작성, 문법, 이미지업로드 하기

개요

---

• 본 게시물은 hugo 의 Mainroad 테마를 기준으로 작성되었습니다.
• 이는 아래 작성된 내용들이 환경이나 표준과 다를 수 있음을 의미합니다.

 

파일 생성

---

• 수행 경로: hugo 사이트 생성 경로 (hugo/my-site)

• hugo new {경로/파일명.md} 를 통해 작성할 게시물 파일을 생성하는데,
  이렇게 생성된 파일은

  hugo/my-site/content

  폴더 아래 자동으로 생성됩니다.
  생성 된 파일은 hugo/my-site/archetypes/default.md 에 작성된 템플릿을 기반으로 기본적인 내용이 작성되어져 있습니다..

hugo new dev/hugo/hugo.md

• hugo/my-site/content/dev/hugo/hugo.md 에 파일 생성.

 

내용 작성

---

• 해당 md 파일에 게시할 내용을 markdown 문법으로 작성함으로써 글 작성에 대한건 사실 끝입니다. (... 별거 없..)

  다만, 문법을 알고 작성해야 텍스트 편집기로 대충 쓴 것 처럼 나오지 않으므로 아래 문법을 참고하여 작성하도록 합니다.

 

문법

• 하기 문법은 hugo-Mainroad 테마 (https://mainroad-demo.netlify.app/post/basic-elements/) 을 참고하여 작성되었으며
  해당 테마에 최적화 되었으므로 일반적인 마크다운 문법과 약간 다를 수 있습니다.

• 글자색 굵기 (BOLD)

  ** 별표2개 **

• 글자 기울이기 (ITALIC)

  * 별표1개 *
  _ 또는 밑줄 _

• 링크

  [대괄호에노출문구](괄호에주소)

• 공간 한줄 띄우기

  ... 앞 문장에서 엔터처리 후..
   

• 순번 리스트

  1. First line
  2. Second line 
  3. Third line

• 순번없는 리스트

  * First line
  * Second line
  * Third line

• 중첩 리스트

  * first line
    * first - 1 line
      * first - 1 - 1 line

• 목차

  • hugo.toml 파일 수정

    ...
    
    [Params]
      toc = true
    
    ...

    ## 1 뎁스 
    ### 2 뎁스
    #### 3 뎁스 

• 인용

  # 한줄 표현
  > 인용 부분.
  > 여기가 인용이에요..
  
  # 여러줄 표현 (붙여쓰기)
  > 한줄쓰고 오른쪽에 띄어쓰기를 두번 해줘야해요 (스페이스바)(스페이스바)
  > 그리고 여기에 쓰면 두줄이 붙어서 보이게 됩니다.
  
  # 여러줄 표현 (한줄 띄우기)
  > 여기도 인용이고
  >
  > 여기도 인용이네요?
  >
  > 이렇게 그냥 빈줄을 놔두시면 돼요..
  >
  
  

  * 테이블
  ```markdown
    # 기본 테이블
    | COL_1   | COL_2   | COL_3   | COL_4   |
    | ------- | ------- | ------- | ------- |
    | ROW_1_1 | ROW_1_2 | ROW_1_3 | ROW_1_4 |
    | ROW_2_1 | ROW_2_2 | ROW_2_3 | ROW_2_4 |


    # 테이블 정렬 ( 콜론 (:) 위치에 따라서 정렬된다) 
    | COL_1   | COL_2     | COL_3   |
    | :------ | :-------: | ------: |
    | 좌측정렬| 가운데정렬| 우측정렬| 


    # 테이블에 마크다운 적용도 가능
    | 기울이기 | 굵게     | 취소선     | 강조     |
    | *italic* | **bold** | ~~cancel~~ | `effect` |

• 코드 블럭

  ```markdown
    여기는 마크다운 코드블럭입니다.
    Mainroad theme 에서 ```{타입} 으로 설정 시 해당 타입에 맞는 코드블럭 스타일로 작성됩니다.
    ```html
      이렇게 하면 HTML 코드블럭이 되는거죠...

• 강조

  `back quote` 으로 씌어진 곳은 옅은 회색 배경과 빨간색으로 문구가 강조됩니다

 

이미지 업로드

• 이미지를 별도 웹사이트에 존재 하는걸 노출할게 아니라면 현재 테마 폴더 내에 위치시켜야 합니다.

• Mainroad 기준 이미지가 위치할 기본 경로는 hugo/my-site/theme/mainroad/static/img/ 입니다.

• 그리고 경로는 /img 부터 작성하도록 합니다. (아래 예시는 위 기본 경로 아래로 posts/hugo 폴더를 생성하여 hugo-image.png 파일을 위치 시킴)

  ![이미지설명](이미지경로)
   예시) ![picture_description](/img/posts/hugo/hugo-image.png)