-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcreate.html
More file actions
315 lines (256 loc) · 13.9 KB
/
Copy pathcreate.html
File metadata and controls
315 lines (256 loc) · 13.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link type="text/css" href="/css/pages.css" media="all" rel="stylesheet">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.</title>
<meta name="generator" content="Jekyll v3.9.3" />
<meta property="og:title" content="GitHub Pages" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live." />
<meta property="og:description" content="Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live." />
<link rel="canonical" href="https://pages.github.com/" />
<meta property="og:url" content="https://pages.github.com/" />
<meta property="og:site_name" content="GitHub Pages" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="GitHub Pages" />
<meta name="twitter:site" content="@github" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","description":"Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.","headline":"GitHub Pages","name":"GitHub Pages","url":"https://pages.github.com/"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body class="home ">
<section id="hero-spot" class="hero-spot">
<a href="/"><img src="/images/logo.svg" alt="GitHub Pages" class="logo" /></a>
<h1>Websites for you and your projects.</h1>
<h2>Hosted directly from your <a href="https://github.com">GitHub repository</a>. Just edit, push, and your changes are live.</h2>
<a href="https://help.github.com/pages/" class="help-link">Pages Help</a>
<div id="slideshow">
<img src="/images/slideshow/bootstrap.png" alt="Bootstrap" class="slide active" width="893" />
</div>
</section>
<section id="tutorial" class="tutorial">
<h1>Ready to get started? Build your own site from scratch or generate one for your project.</h1>
<h2>You get one site per GitHub account and organization, <br />and unlimited project sites. Let‘s get started.</h2>
<ul class="tabs">
<li><a href="#user-site" class="selected">User or organization site</a></li>
<li><a href="#project-site">Project site</a></li>
</ul>
<!-- ### Start of tutorials -->
<ul id="user-site" class="tutorial-list wrapper active">
<li id="create-repo-step" class="image-right">
<h4>Create a repository</h4>
<p>Head over to <a href="https://github.com">GitHub</a> and <a data-proofer-ignore="true" href="https://github.com/new">create a new public repository</a> named <em>username</em>.github.io, where <em>username</em> is your username (or organization name) on GitHub.</p>
<p class="details">If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.</p>
</li>
<li class="question">
<h4>What git client are you using?</h4>
<ul class="tabs">
<li><a id="option-terminal" href="#terminal-step-1" class="selected">A terminal</a></li>
<li><a id="option-desktop" href="#setup-in-desktop">GitHub Desktop</a></li>
<li><a id="option-newuser" href="#new-user-step-1">I don't know</a></li>
</ul>
</li>
<li id="new-user-step-1" class="option-newuser">
<h4>Download GitHub Desktop</h4>
<p>GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.</p>
<a class="desktop-download" href="https://desktop.github.com"><span class="icon"></span>Download GitHub Desktop</a>
<img src="images/dashboard@2x.png" width="1054" alt="GitHub Desktop screenshot" class="full-size" />
</li>
<li id="terminal-step-1" class="option-terminal">
<h4>Clone the repository</h4>
<p>Go to the folder where you want to store your project, and clone the new repository:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>git clone https://github.com/<em>username</em>/<em>username</em>.github.io</p>
</div>
</div>
</li>
<li id="setup-in-desktop" class="option-desktop image-right">
<h4>Clone the repository</h4>
<p>Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.</p>
<p class="details">If the app doesn't open, launch it and clone the repository from the app.</p>
</li>
<li id="setup-in-desktop" class="option-newuser image-right">
<h4>Clone the repository</h4>
<p>After finishing the installation, head back to GitHub.com and refresh the page. Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.</p>
<p class="details">If the app doesn't open, launch it and clone the repository from the app.</p>
</li>
<li class="option-terminal">
<h4>Hello World</h4>
<p>Enter the project folder and add an index.html file:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>cd <em>username</em>.github.io</p>
<p><span class="path">~</span><span class="prompt">$</span>echo "Hello World" > index.html</p>
</div>
</div>
</li>
<li class="option-desktop option-newuser">
<h4>Create an index file</h4>
<p>Grab your favorite text editor and add an index.html file to your project:</p>
<div class="terminal">
<div class="header">index.html</div>
<code class="shell">
<pre><!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html></pre>
</code>
</li>
<li class="option-terminal">
<h4>Push it</h4>
<p>Add, commit, and push your changes:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>git add --all</p>
<p><span class="path">~</span><span class="prompt">$</span>git commit -m "Initial commit"</p>
<p><span class="path">~</span><span class="prompt">$</span>git push -u origin main</p>
</div>
</div>
</li>
<li class="option-desktop option-newuser">
<h4>Commit & publish</h4>
<p>Enter the repository, commit your changes, and press the publish button.</p>
<img src="images/desktop-demo@2x.gif" width="841" alt="Demonstration of steps required to create the initial commit and publish the repository in GitHub Desktop" class="macos-drop-shadow" />
</li>
<li class="option-all">
<h4>…and you're done!</h4>
<p>Fire up a browser and go to <strong>https://<em>username</em>.github.io</strong>.</p>
<div class="hero-octicon">
<span class="mega-octicon octicon-check"></span>
</div>
</li>
</ul>
<!-- End of user site tutorial -->
<!-- Project Site tutorial -->
<ul id="project-site" class="tutorial-list wrapper">
<li class="question">
<h4>Use a theme, or start from scratch?</h4>
<p>You have the option to start with one of the pre-built themes,
<br>or to create a site from scratch.
<ul class="tabs">
<li><a id="option-generate" href="#generate-step-1" class="selected">Choose a theme</a></li>
<li><a id="option-vanilla" href="#vanilla-step-1">Start from scratch</a></li>
</ul>
</li>
<li id="generate-step-1" class="option-generate">
<h4>Repository Settings</h4>
<p>Head over to <a href="https://github.com/">GitHub.com</a> and create a new repository, or go to an existing one.
<br><strong>Click on the Settings tab</strong>.</p>
<img src="images/repo-settings@2x.png" width="720" alt="Settings for a repository" />
</li>
<li class="option-generate">
<h4>Theme chooser</h4>
<p>Scroll down to the <strong>GitHub Pages</strong> section. Press <strong>Choose a theme</strong>.</p>
<img src="images/launch-theme-chooser@2x.png" width="720" alt="Automatic Generator button on GitHub.com, Settings" />
</li>
<li class="option-generate">
<h4>Pick a theme</h4>
<p>Choose one of the themes from the carousel at the top.
<br>When you're done, click <strong>Select theme</strong> on the right.</p>
<img src="images/theme-chooser@2x.png" class="full-size" width="720" alt="Choose layout" />
</li>
<li class="option-generate">
<h4>Edit content</h4>
<p>Use the editor to add content to your site.</p>
<img class="full-size" src="images/code-editor@2x.png" width="720" alt="Add content to your GitHub Pages site" />
</li>
<li class="option-generate">
<h4>Commit</h4>
<p>Enter a commit comment and click on <strong>Commit changes</strong> below the editor.</p>
<img class="full-size" src="images/commit-edits@2x.png" width="720" alt="Commit Markdown content to your repository" />
</li>
<!-- Start of vanilla sub tutorial -->
<li id="vanilla-step-1" class="option-vanilla">
<h4>Create an index file</h4>
<p>Head over to <a href="https://github.com/">GitHub.com</a> and <a data-proofer-ignore="true" href="https://github.com/new">create a new repository</a>, or go to an existing one.
<br />Click on the <strong>Create new file</strong> button.</p>
<img src="images/new-create-file@2x.png" width="720" alt="Create a file in your repository" />
</li>
<li class="option-vanilla">
<h4>Hello World</h4>
<p>Name the file <code>index.html</code> and type some HTML content into the editor.</p>
<img src="images/new-index-html@2x.png" width="720" alt="Hello World on GitHub.com" />
</li>
<li class="option-vanilla">
<h4>Commit the file</h4>
<p>Scroll to the bottom of the page, write a commit message, and commit the new file.</p>
<img src="images/new-commit-file@2x.png" width="720" alt="Commit the file" />
</li>
<li class="option-vanilla">
<h4>Repository Settings</h4>
<p><strong>Click on the Settings tab</strong> and scroll down to the GitHub Pages section.
<br />Then select the <strong>main branch</strong> source and click on the <strong>Save</strong> button.</p>
<img src="images/source-setting@2x.png" width="720" alt="GitHub Pages Source Setting" />
</li>
<li class="option-all">
<h4>…and you're done!</h4>
<p>Fire up a browser and go to <strong>http://<em>username</em>.github.io/<em>repository</em></strong>.</p>
<div class="hero-octicon">
<span class="mega-octicon octicon-check"></span>
</div>
</li>
</ul>
</section>
<!-- End of tutorial section -->
<section id="next-steps">
<h1>Now that you’re up and running, here are a few things you should know.</h1>
<ul class="next-steps wrapper">
<li class="jekyll">
<a class="hero-octicon" href="https://help.github.com/articles/using-jekyll-with-pages">
<span class="mega-octicon octicon-pencil"></span>
</a>
<h4><a href="https://help.github.com/articles/using-jekyll-with-pages">Blogging with Jekyll</a></h4>
<p>Using <a href="https://jekyllrb.com">Jekyll</a>, you can blog using beautiful Markdown syntax, and without having to deal with any databases. <a href="https://jekyllrb.com/docs/">Learn how to set up Jekyll</a>.</p>
</li>
<li class="custom-urls">
<a class="hero-octicon" href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">
<span class="mega-octicon octicon-link"></span>
</a>
<h4><a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">Custom URLs</a></h4>
<p>Want to use your own custom domain for a GitHub Pages site? Just create a file named CNAME and include your URL. <a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">Read more</a>.</p>
</li>
<li class="guides">
<a class="hero-octicon" href="https://help.github.com/categories/20/articles">
<span class="mega-octicon octicon-book"></span>
</a>
<h4><a href="https://help.github.com/categories/20/articles">Guides</a></h4>
<p>Learn how to create custom 404 pages, use submodules, and <a href="https://help.github.com/categories/20/articles">learn more about GitHub Pages</a>.</p>
</li>
</ul>
</section>
<script src="/js/jquery.js"></script>
<script>window.slides = {"bootstrap":"Bootstrap","yeoman":"Yeoman","facebookdesign":"Facebook Design","foundation":"Foundation","ghtraining":"GitHub Training","adobeos":"Adobe Open Source","jekyllrb":"Jekyll","electron":"Electron","semanticui":"Semantic UI","microsoft":"Microsoft on GitHub"}</script>
<script src="/js/application.js"></script>
<footer class="page-footer">
<ul class="site-footer-links right">
<li><a href="https://www.githubstatus.com/">Status</a></li>
<li><a href="https://docs.github.com/rest">API</a></li>
<li><a href="https://training.github.com">Training</a></li>
<li><a href="https://shop.github.com">Shop</a></li>
<li><a href="https://github.blog">Blog</a></li>
<li><a href="https://github.com/about">About</a></li>
</ul>
<a href="/">
<span class="mega-octicon octicon-mark-github"></span>
</a>
<ul class="site-footer-links">
<li>© 2023 <span>GitHub</span>, Inc.</li>
<li><a href="https://docs.github.com/en/github/site-policy/github-terms-of-service">Terms</a></li>
<li><a href="https://docs.github.com/en/github/site-policy/github-privacy-statement">Privacy</a></li>
<li><a href="https://github.com/security">Security</a></li>
<li><a href="https://support.github.com">Contact</a></li>
</ul>
</footer>
</body>
</html>