GitHub Guides

Getting Started with GitHub Pages · GitHub Guides

GitHub Pages are public webpages hosted and easily published through GitHub. The quickest way to get up and running is by using the Automatic Page Generator to create some starter HTML and CSS for us. You can then modify our GitHub Pages' content and style remotely via the web or locally on our computer.

pages-home-page

Create Your Website

Once you've signed in, you'll create a new repository to get started.

new-repo-button

On the new repository screen, you need to give this repository a special name to generate your website.

new-repo-screen

Your website's HTML and CSS will all live in a repository named username.github.io (where "username" is your actual GitHub user name). To get an initial set of HTML and CSS, you have to open the Settings tab and enable the Automatic Page Generator

settings-tab

If you scroll down on the settings page, you should see the Automatic Page Generator button near the bottom. By clicking this button, you start the process of generating your content automatically.

automatic-button

Once you've clicked the button, you'll be directed to the first step of the generation: The Content. You can keep this default content for now and make changes to it later. Let's go ahead and click Continue to Layouts at the bottom of the page to continue.

continue-to-layout

Now, you pick your theme. This part requires a bit more thought because it's easier to choose a theme now than to update your theme later. When you've looked at some of the options at the top of the page and found one that you love, click Publish to finish.

pick-your-poison

Once you click Publish, GitHub does all the work to direct visitors to username.github.io to view your new website. This can take up to 10 minutes. After some time has passed, you can open a new tab in your browser to go to your site!

Making Changes

One of the first things you can do is remove the default title of your index page, and add a friendlier message to it. Since this is a very quick change – and your first one – you're going to make it on the default branch: master.

If you click on the index.html file to navigate into that file, you can make edits to it by clicking Edit.

edit-page

Let's find in this file where it says username.github.io and change this to a friendlier title. For the Octocat, I'm going to change it to "Welcome to the Octocat's homepage!". Feel free to do the same, except for your own username. Under this title, you should add a message about the purpose of the page and describe what you want people to do while they're here.

change-message

After you're done making this small change, scroll to the bottom of the page to make your first commit. You have two places to write about this change: a subject and an extended description. The extended description is optional, so let's leave a descriptive message in the subject.

When you're done, click Commit Changes and your change should go live in just a few seconds!

be-descriptive

Next Steps

Just because you've made some changes into your project doesn't mean you should stop! Check out these other guides to learn how to contribute to other projects or perfect the way you work on projects:

Last updated Dec 1, 2013

Source