자바스크립트를 활성화 해주세요

d060 Nginx설치하고 이력서 Markdown을 Html로 변환해 resume.html만들기 1분 컷

 ·  ☕ 1 min read

내용

  • nginx의 설치는 scoop을 사용합니다.
  • markdown을 html로 변환하는 것은?? 이부분이 매직인데요. pwsh 7 버전이 필요합니다.
    • $md = ConvertFrom-Markdown -Path .\index.md
    • $md.HTML | Out-File -Encoding utf8 $env:NGINX_HOME\html\resume.html
  • nginx의 실행은?
    • nginx -p $env:NGINX_HOME

자 해볼까요

nginx 설치

scoop으로 얼른 설치해 줍니다.

scoop install nginx

D:\Users\Administrator>scoop install nginx
Installing 'nginx' (1.19.8) [64bit]
nginx-1.19.8.zip (1.6 MB) [===================================================================================] 100%
Checking hash of nginx-1.19.8.zip ... ok.
Extracting nginx-1.19.8.zip ... done.
Linking ~\scoop\apps\nginx\current => ~\scoop\apps\nginx\1.19.8
Creating shim for 'nginx'.
Persisting conf
Persisting html
Persisting logs
Persisting temp
'nginx' (1.19.8) was installed successfully!
Notes
-----
To use the correct configuration run 'nginx -p "$env:NGINX_HOME"' or 'nginx -p "%NGINX_HOME%"'

실행한 모습은 이렇게 생겼습니다.

d060_running_nginx.png

resume.html

먼저 이력서 파일 있으시죠? resume.md 파일. 자 갑니다.

  • $md = ConvertFrom-Markdown -Path .\resume.md
  • $md.HTML | Out-File -Encoding utf8 $env:NGINX_HOME\html\resume.html

아, 파일의 내용을 보니 html 태그가 없어요. charset 지정이 안되어서 디폴트 인코딩으로 해석되었네요.

필요한 태그들을 채워 html을 완성합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>

</body>
</html>

스타일

후에, 공개되어 있는 bootstrap 5의 css 스타일시트를 헤더에 넣어 두었습니다.
js 는 옵션.

1
2
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

bootstrap을 쓰고 있으니, body 안에 container div 하나 정도 넣어주면 좋을 것 같습니다.

1
<div class="container">  </div>

완성

완성된 html을 브라우저로 열어보면 다음과 같습니다.

d060_resume_html.png

1분 안지났죠??

후기

pandoc이 있다구요?

pandoc resume.md -s -o resume.html

Ref

공유하기

tkim
글쓴이
tkim
Software Engineer