Hugo로 개인 블로그 만드는 법- 1.개념 설명

목적

윈도우 에서 Hugo로 개인블로그를 만들고 github으로 호스팅하는 법

사용 툴 버전

• 설치 날짜 : 03-31-2021
• hugo version : hugo v0.82.0
• git version : git version 2.31.1.windows.1
• windows : 10
• windows terminal: v1.7.572.0
• Chocolatey : v0.10.15

목차

• 개념 설명
• 필요한 툴 설치
• 블로그 생성
• github에 업로드
• github action 추가
• ketax 추가
• 마크다운 테이블 추가
• 코드 블럭 버튼 추가
• 사진 크기 조정

개념설명

hugo란

Hugo란 static site generator입니다. static site를 명령어 몇개로 자동 생성해주는 커맨드 기반 프로그램입니다.

 

static site Vs. dynamic site

dynamic site는 우리가 보통 생각하는 쇼핑몰 싸이트를 생각하면 됩니다. 클릭 혹은 마우스 움직임에 따라 바로바로 반응하도록 만든 싸이트 입니다. 그에 반해서 static site는 기본적으로 페이지를 하나 열고 나면 반응하지 않습니다. 블로그나 글이 많은 싸이트에 적합합니다.

 

front matter란

front matter란 휴고에서 글을 분류하기위해 표기하는 일종의 양식입니다. 테마마다 지원하는 방식이 다르지만 기본적으로 지원하는 것은 title, date, draft이며, 글의 맨 앞쪽에 작성을 하게 됩니다.

예시)

---
title: "첫번째 글"
date: 2021-03-31
draft: true
---

 

커맨드 기반 프로그램

윈도우에서 버튼 클릭으로 실행되는 프로그램이 아닌, 특정한 키워드를 터미널에서 타이핑하여 사용하는 프로그램을 뜻합니다.

 

터미널

명령어를 넣어서 프로그램을 조작할수 있게 해주는 프로그램을 뜻합니다. 리눅스 혹은 os X의 경우에는 명령어 기반으로 되는 터미널이 어디에서나 존재하지만 윈도우는 그렇지 않습니다. 그래서 윈도우용 터미널은 여러가지 많이 존재합니다. git bash, command prompt, windows terminal, powershell..etc. 각각 다른 특징들이 있으나 여기서는 중요하지 않습니다. 저는 windows terminal를 사용하겠습니다.

 

git이란

프로그래밍용 버전 관리용 커맨드 기반 프로그램 입니다. 어떤 파일을 수정할시 그 수정한 시간이나 어떻게 수정했는지 등의 정보를 가지고 있는 파일을 생성합니다.

 

github이란

깃허브란 위에서 저장된 버전관리 파일을 관리해주는 클라우드 서비스 입니다. 프로그래밍 언어를 깃허브에 올리면 자동으로 버전관리를 해주며, 수정된 순서를 실시간으로 보여줍니다. 또한 무료 싸이트 호스팅과 github action등을 지원합니다.

 

호스팅?

인터넷에 올라온 웹싸이트들은 바로 볼수 있는게 아니라 인터넷에 파일들을 올리고 볼 수 있도록 해야 합니다. 이 행위를 호스팅이라고 합니다. 무료도 있고 유료도 있습니다. 여기서는 무료인 github을 사용합니다.

 

마크다운

.md로 끝나는 파일로 몇가지 조건이 설정된 텍스트 파일 입니다. 텍스트 파일에서 제목이나 번호를 붙이는것은 조금 번거러운 일 입니다. 워드나 한글에서는 위에서 버튼을 눌러서 크기를 조정해야 합니다. 읽기도 쓰기도 쉬운 문서 양식을 지향합니다.
자세한 내용은 아래 링크를 확인해보세요.

markdown guide(링크)

Getting Started | Markdown Guide

ketax

수학 수식을 표현할수 있게 해주는 프로그램
마크다운 파일은 기본적으로 빠르게 작성하는걸 목적으로 하기 때문에 수학 수식은 표현하는것이 불가능합니다.

 

Hugo 구조

• archetypes : front matter 설정을 위한 default.md이 존재
• content : 블로그에 올릴 글들이 저장되는 곳
• data : 데이터 저장용. 싸이트에 보이지 않음
• layouts : 여기에서 블로그에 실제로 적용되는 큰 틀을 가진 html들
• static : css, js, img파일 등 추가 적인 기능 혹은 사진을 연결하기 위한 폴더
• public: 위의 정보들을 기반으로 html로 생성된 웹페이지.