Day5: `html` – template

Author

최규빈

Published

January 2, 2025

강의영상 요청하기

https://drive.google.com/drive/folders/1dAC8P0yNIzH7NbXKFU2HvFHdZUmn1CPV?usp=sharing

1 `*.html`

- 일반적으로 html은 “볼 수 있다”

- 강의노트를 저장하는 방법?

https://guebin.github.io/DL2024/posts/01wk-1.html 저장해보기

- 네이버저장해보기

https://www.naver.com/ 저장해보기
거의 하드에 네이버가 깔린 느낌임.
저장된 html은 인터넷이 없어도 open 가능.

- html는 pdf와 같이 읽을 수 있는 문서의 형태임

웹에서 보이는것은 보통 html 형식으로 재 저장할 수 있음.

- pdf와의 차이점? HTML은 다른문서와의 연결성을 더 강조한다.

HTML의 HT는 HyperText 를 의미함.
하이퍼텍스트란 문서 내에서 다른 문서로의 링크를 포함한 텍스트를 의미함.

2 홈페이지 통째로 `html`화

- MP2024 를 다운로드해보자.

https://github.com/guebin/MP2024 접속
ZIP으로 다운로드

- docs 폴더를 제외하고 모두 삭제

- docs 폴더를 탐색하기

- 수정해보기: 퀴즈1의 점수는 학점에 포함하지 않습니다 \(\to\) 퀴즈111의 점수는 학점에 포함하지 않습니다.

- 코드(?)형태의 text를 예쁘게 보여주는 변환기 역할을 브라우저 (크롬, 사파리,…) 가 담당한다.

3 개념: 블로그 생성

- 블로그의 생성은 아래의 3가지 요소가 결합되어야 한다.

컨텐츠 생성
컨텐츠를 html화 (=컨텐츠를 보기좋게 만들어주고 link를 정의)
2의 결과가 local 이 아니라 remote 에 존재해야 함.

- 이게 가능하면 사용자가 인터넷이 켜진상태에서 블로그를 보는 행위는 아래의 과정으로 이해할 수 있다.

특정주소에 접속한다.
그 주소에 대응하는 ?.html파일이 remote의 하드에 존재할텐데 그것의 download를 요청한다.
다운로드한다.
내 컴퓨터 (local)의 어딘가에 존재하는 임시폴더에 ?.html이 있을텐데 그것을 크롬으로 연다.

브라우징이 빠를려면 (1) remote의 처리속도 (2) remote의 인터넷속도 (3) local의 인터넷속도 (4) local의 렌더링속도 등이 모두 좋아야함. // 의외로 (4)는 local의 복합적인 능력을 요구한다. (4)의 과정이 원활하게 되려면 local의 cpu, gpu의 처리속도가 빨라야하며 local의 메모리도 충분해야한다.

4 학과서버에서 `docs` 보기

- docs 폴더를 remote에 upload

- Live Preview 확장프로그램 설치

- 탐색

- docs 삭제

5 `quarto` 의 설치

- quarto 를 설치

https://quarto.org/docs/download/

6 `quarto` – create

- terminal에서 아래를 입력

quarto create

- project 선택

@miruetoto ➜ /workspaces/blog-test (main) $ quarto create 
? Create
❯ project
  extension

- blog 선택

@miruetoto ➜ /workspaces/blog-test (main) $ quarto create 
? Create › project
? Type
  default
  website
❯ blog
  manuscript
  book
  confluence

- directory 선택 – 현재디렉토리 선택

@miruetoto ➜ /workspaces/blog-test (main) $ quarto create 
? Create › project
? Type › blog
? Directory › .

- Blog title 설정 – tttt 로 설정

@miruetoto ➜ /workspaces/blog-test (main) $ quarto create 
? Create › project
? Type › blog
? Directory › .
? Title (blog) › tttt

7 `_quarto.yml` 수정

- _quarto.yml 열기 – 메모장

_quarto.yml

project:
  type: website

website:
  title: "tttt"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
      - icon: twitter
        href: https://twitter.com
format:
  html:
    theme: cosmo
    css: styles.css

- _quarto.yml – 수정하기 // output-dir: docs를 추가하기

_quarto.yml

project:
  type: website
  output-dir: docs

website:
  title: "tttt"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
      - icon: twitter
        href: https://twitter.com
format:
  html:
    theme: cosmo
    css: styles.css

8 `quarto render`

- 아래를 실행

quarto render

실행하면 docs 폴더가 생성됨!

9 `posts` 비우기

- 아래의 폴더를 삭제

post-with-code
welcome

- 아래를 실행후 결과 관찰

quarto render

10 `test.qmd` 생성

- posts에 test.qmd 생성하고 아래를 만든다.

---
title: "test"
author: "최규빈"
date: "01/02/2025"
---

첫 포스트!

- 아래를 실행후 결과 관찰

quarto render

11 preview

- 아래를 실행후 결과 관찰

quarto preview

- test.qmd 수정해보기~

12 `index.qmd` 수정

- 홈페이지 접속시 보이는 화면

- 인사해보기

13 `_quarto.yml` 수정2

- 타이틀 수정하기

- 테마를 minty로 수정

14 github으로 `push`

- preview 중단

- github에서 비밀번호 얻어야함

https://github.com/settings/tokens

- 아래를 실행

quarto render 
git add .
git commit -m test.qmd
git push

- 이후의 작업을 편하게 하기 위해서..

git config credential.helper store
git add .
git commit -m .
git push

15 `github` 에서 설정

- github 에 로그인하여 setting \(\to\) pages 에 이동, 그리고 Build and deployment 에서 /docs를 설정!

16 `pororo.qmd`

- pororo.qmd 를 만들고 두번째 포스트를 만들자.

pororo.qmd

---
title: "뽀롱뽀롱"
author: "최다호"
date: "01/02/2025"
---

ref: <https://home.ebs.co.kr/pororo/etc/1/cast>

## 뽀로로사진

![](https://static.ebs.co.kr/images/public/lectures/2014/06/19/10/bhpImg/44deb98d-1c50-4073-9bd7-2c2c28d65f9e.jpg)

## 패티사진

![](https://static.ebs.co.kr/images/ebs/WAS-HOME/portal/upload/img/programinfo/person/per/1242723588618_dphGgSgOAp.jpg)

## 표만들기

| 캐릭터 | 설명 |
|-------|------|
| **PORORO (뽀로로)** | 호기심이 많은 꼬마 펭귄. 신기한 물건을 발견하면 왕성한 호기심이 발동하고, 하고 싶은 것은 꼭 하고야 만다. 하늘을 날 수 있을 거라는 의지를 실천에 옮기려는 좌충우돌형에 장난기가 넘치는 사고뭉칠 꼬마이지만 숲속 마을에는 없어선 안되는 분위기 메이커입니다. |
| **PETTY (패티)** | 뽀롱뽀롱 숲 속 마을에 새로 이사 온 활달하고 사고성이 좋은 소녀 펭귄. 예쁘고 깜찍한 성격으로 친구들의 관심을 받는 새로운 친구로 등장합니다. 귀엽고 예쁜 외모와는 달리 털털한 성격에, 축구, 달리기, 수영, 무술 운동에도 뛰어나 친구들의 부러움을 사지만 요리만은 서툽니다. |

## 준비됐나요?

:::{.callout-important}

### 옜날
준비됐나요? -> 준비됐어요~
:::

:::{.callout-important}

### 요즘
준비됐나요? -> 네네, 선생님!
:::

- upload

17 `code.ipynb`

- code.ipynb를 만들고 아래를 해보자.

---
title: "code"
author: "장하니"
date: "01/02/2025"
---

import numpy as np
import matplotlib.pyplot as plt 
x = np.random.randn(100)
plt.plot(x)

- upload

18 `france.ipynb`

- france.ipynb 파일을 만들자.

---
title: "프랑스혁명"
author: "최규빈"
date: "01/02/2025"
---

- 아래의 내용을 공부하자.

https://ko.wikipedia.org/wiki/프랑스_혁명

19 `quarto`, `github` 의 역할

- 실질적으로 우리가 quarto + github 을 이용하여 publish 하는 과정은 아래와 같다.

local에서 .qmd, .ipynb 파일들을 생성하여 작업한다.
quarto render를 입력하여 .ipynb 파일들을 .html 파일로 바꾸고 “연결성”을 정의한다. 이러한 연결성은 local에서 완벽하게 동작한다.
연결성+link가 종합적으로 저장된 폴더 (우리의 경우는 docs) 를 github 에 업로드한다.
github은 docs폴더를 바탕으로 웹사이트를 구축한다.

- 블로그의 생성은 아래의 3가지 요소가 결합되어야 한다고 했었다.

컨텐츠 생성
컨텐츠를 html화 (=컨텐츠를 보기좋게 만들어주고 link를 정의)
2의 결과가 local 이 아니라 remote 에 존재해야 함.

이중에서 1은 사용자가 하고, 2는 quarto가 하고, 3은 github이 한다.

20 `100MB` 충돌

- fashion-mnist.ipynb 에 아래의 코드를 작성

---
title: "fashion-mnist"
author: "장하니"
date: "01/02/2025"
---

import pandas as pd
!wget https://media.githubusercontent.com/media/guebin/PP2023/main/posts/fashion-mnist_train.csv
df = pd.read_csv("fashion-mnist_train.csv")
plt.imshow(df.iloc[1,1:].to_numpy().reshape(28,28),cmap="gray")

- upload – 아래의 메시지 확인

@miruetoto ➜ /workspaces/blog-test (main) $ git push 
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 2 threads
Compressing objects: 100% (8/8), done.
Writing objects: 100% (10/10), 32.41 MiB | 2.45 MiB/s, done.
Total 10 (delta 3), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
remote: error: Trace: 6994b81c2ea821341c951bbca38f8f734c40af004fbc73f4d154cd73eb69eb32
remote: error: See https://gh.io/lfs for more information.
remote: error: File fashion-mnist_train.csv is 126.88 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
To https://github.com/miruetoto/blog-test
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://github.com/miruetoto/blog-test'

- fashion-mnist_train.csv 를 삭제해도 안된다..

@miruetoto ➜ /workspaces/blog-test (main) $ git add .
@miruetoto ➜ /workspaces/blog-test (main) $ git commit -m "fashion-mnist.csv 삭제"
[main f17cb1f] fashion-mnist.csv 삭제
 1 file changed, 60001 deletions(-)
 delete mode 100644 fashion-mnist_train.csv
@miruetoto ➜ /workspaces/blog-test (main) $ git push
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 2 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (12/12), 32.41 MiB | 2.33 MiB/s, done.
Total 12 (delta 4), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (4/4), completed with 3 local objects.
remote: error: Trace: a2a9e6b3dfd49b2aa8afeb13aae04ba1684311239c0abc06f49f4236f30f5a62
remote: error: See https://gh.io/lfs for more information.
remote: error: File fashion-mnist_train.csv is 126.88 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
To https://github.com/miruetoto/blog-test
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://github.com/miruetoto/blog-test'

21 해결 – 삭제/clone

22 template

type	repo	website
블로그	https://github.com/guebin/DSTBX2025	https://guebin.github.io/DSTBX2025/
슬라이드	https://github.com/guebin/qslides-template	https://guebin.github.io/qslides-template
대시보드	https://github.com/guebin/DV2023-DASH	https://guebin.github.io/DV2023-DASH
–	–	–
대시보드	??	https://ivelasq.github.io/mortgage-dashboard/
강의노트	??	https://sta210-s22.github.io/website/
책	https://github.com/hadley/r4ds	https://r4ds.hadley.nz/

?? 를 찾아내세요

- 여기에 가면 많아요

https://quarto.org/docs/gallery/

1 *.html

2 홈페이지 통째로 html화

3 개념: 블로그 생성

4 학과서버에서 docs 보기

5 quarto 의 설치

6 quarto – create

7 _quarto.yml 수정

8 quarto render

9 posts 비우기

10 test.qmd 생성

11 preview

12 index.qmd 수정

13 _quarto.yml 수정2

14 github으로 push

15 github 에서 설정

16 pororo.qmd

17 code.ipynb

18 france.ipynb

19 quarto, github 의 역할

20 100MB 충돌

21 해결 – 삭제/clone

22 template

1 `*.html`

2 홈페이지 통째로 `html`화

4 학과서버에서 `docs` 보기

5 `quarto` 의 설치

6 `quarto` – create

7 `_quarto.yml` 수정

8 `quarto render`

9 `posts` 비우기

10 `test.qmd` 생성

12 `index.qmd` 수정

13 `_quarto.yml` 수정2

14 github으로 `push`

15 `github` 에서 설정

16 `pororo.qmd`

17 `code.ipynb`

18 `france.ipynb`

19 `quarto`, `github` 의 역할

20 `100MB` 충돌