[GitHub] Pages

1. Git Repository 생성

1) New repository 선택

2) Repository name은 {username}.github.io 작성

3) Public 선택

4) Create repository 선택으로 Repository 생성 완료

2. 웹 페이지 구성(Markdown 사용)

- {username}.github.io/{project_name}

1) Settings > Pages 선택

2) 홈페이지 소스 지정

3) README.md 작성

# Homepage

## Introduce
Hello!! Welcome to my page

## Contact with me
- [Instagram]()
- [Blog]()

3. 간단한 웹 페이지 구성(HTML5, CSS3, JS 사용)

1) 프로젝트 구조에 맞게 파일 생성

{username}.github.io/
|- index.html
|- styles.css
|- main.js
|- page_name/
    |- {page_name}.html
    |- {page_name}_styles.css
    |- {page_name}_main.js

2) index.html 기본 구조 작성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> {username}'s HomePage </title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
    </header>
    <nav>
    </nav>
    <main>
      <aside></aside>
      <section>
        <article></article>
        <article></article>
      </section>
    </main>
    <footer>
    </footer>
  </body>
  <script src="main.js"></script>
</html>

3) styles.css에 reset.css(초기화) 작성

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

4) main.js 작성

References

- GitHub Pages Quick Start

- GitHub Pages Documentation

- CSS Tools: Reset CSS

- A (more) Modern CSS Reset

'ETC > Git && GitHub && Markdown' 카테고리의 다른 글

[Markdown] Markdown (0)	2024.08.07
[Github] Projects (0)	2024.08.02
[GitHub] Profile (0)	2024.08.02
[GitHub] GitHub 기초 (0)	2024.08.02
[Git] Git 기본 명령어 (0)	2024.08.02