| [ Web Proxy ] |
| Viewing: https://github.io | [Back] [Original] |
[GitHub Pages]
Head over to GitHub and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.
If the first part of the repository doesnt exactly match your username, it wont work, so make sure to get it right.
GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.
Download GitHub Desktop
[GitHub Desktop screenshot]
Go to the folder where you want to store your project, and clone the new repository:
~$git clone https://github.com/username/username.github.io
Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.
If the app doesn't open, launch it and clone the repository from the app.
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.
If the app doesn't open, launch it and clone the repository from the app.
Enter the project folder and add an index.html file:
~$cd username.github.io
~$echo "Hello World" > index.html
Grab your favorite text editor and add an index.html file to your project:
![[Bootstrap]](https://github.io/images/slideshow/bootstrap.png){kind=link}
![[GitHub Desktop screenshot]](https://github.io/images/dashboard@2x.png){kind=link}
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
Add, commit, and push your changes:
~$git add --all
~$git commit -m "Initial commit"
~$git push -u origin main
Enter the repository, commit your changes, and press the publish button.
[Demonstration of steps required to create the initial commit and publish the repository in GitHub Desktop]
Fire up a browser and go to https://username.github.io.
You have the option to start with one of the pre-built themes,
or to create a site from scratch.
Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Settings tab.
[Settings for a repository]
Scroll down to the GitHub Pages section. Press Choose a theme.
[Automatic Generator button on GitHub.com, Settings]
Choose one of the themes from the carousel at the top.
When you're done, click Select theme on the right.
[Choose layout]
Use the editor to add content to your site.
[Add content to your GitHub Pages site]
Enter a commit comment and click on Commit changes below the editor.
[Commit Markdown content to your repository]
Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Create new file button.
[Create a file in your repository]
Name the file index.html and type some HTML content into the editor.
[Hello World on GitHub.com]
Scroll to the bottom of the page, write a commit message, and commit the new file.
[Commit the file]
Click on the Settings tab and scroll down to the GitHub Pages section.
Then select the main branch source and click on the Save button.
[GitHub Pages Source Setting]
Fire up a browser and go to http://username.github.io/repository.
| Web Proxy Viewer | New URL | Original Page |
![[Demonstration of steps required to create the initial commit and publish the repository in GitHub Desktop]](https://github.io/images/desktop-demo@2x.gif){kind=link}
![[Settings for a repository]](https://github.io/images/repo-settings@2x.png){kind=link}
![[Automatic Generator button on GitHub.com, Settings]](https://github.io/images/launch-theme-chooser@2x.png){kind=link}
![[Choose layout]](https://github.io/images/theme-chooser@2x.png){kind=link}
![[Add content to your GitHub Pages site]](https://github.io/images/code-editor@2x.png){kind=link}
![[Commit Markdown content to your repository]](https://github.io/images/commit-edits@2x.png){kind=link}
![[Create a file in your repository]](https://github.io/images/new-create-file@2x.png){kind=link}
![[Hello World on GitHub.com]](https://github.io/images/new-index-html@2x.png){kind=link}
![[Commit the file]](https://github.io/images/new-commit-file@2x.png){kind=link}
![[GitHub Pages Source Setting]](https://github.io/images/source-setting@2x.png){kind=link}