This is a tutorial on what to do once you've finished building a website in the fantastic Codecademy tutorials and want to make your own web pages and limited apps. This tutorial specifically describes how to set up a website hosted by GitHub using the Github Desktop GUI in OSX, though everything should look about the same in Windows.
Install GitHub Desktop, "a seamless way to contribute to projects on GitHub and GitHub Enterprise."
We'll start by setting up a your "development environment" and then creating and contributing to a repository in GitHub. Ultimately, we'll finish with a page hosted on the internet that you can access from anywhere.
Get an account at https://github.com. Once you've created your account, create a new repository by clicking the '+' sign next to your profile pic in the upper right.
Create a repository, in this example I create one named example-website. Make it Public and use the defaults.
Once the repository is created, install and configure GitHub Desktop. Configuration requires you to sign in with your Github account credentials that you created earlier.
In GitHub Desktop, click the '+' in the upper left and clone the repo you just created.
Congratulations, you're ready to start building your webpage! 😄
Create your local webpage
Once you've cloned the repo to your computer, let's build a local webpage stored on your computer. Click the branch button and create a new branch named gh-pages -- this name is important and more detail about this can be found in the GitHub Pages documentation.
In GitHub Desktop, edit your repo in your text editor Atom by right-clicking the repo and selecting Open in Atom. Be sure that the repo you're working on is gh-pages as shown in the upper-right of the below image.
You should see Atom like this, and note the location in the window title. The location should look like /Users//GitHub/example-website
In Atom, create an index.html file by right-clicking the repo name and selecting New File, and name the file index.html.
Add in your basic HTML to index.html. This should feel just like the Codecademy coding "IDE" (Interactive Development Environment) except now you're out of a browser and creating an actual file on your computer. You can copy the one I used in the example from here:
Keen eyed readers will notice that I missed the closing '>' in my title tag. It doesn't change anything in the tutorial, but good eye 👍
You can view this actual file on your computer by right-clicking the index.html file and selecting "Show in Finder"
Double-clicking the index.html file should open it up in a web browser where you can see your code rendered like it would be if you were to host it on the internet.
Try making more changes to index.html and refreshing your browser.
Host your page in GitHub Pages
Now that you've got a working page in your repo, make a commit and push it to GitHub where it will be hosted. To do this, go back to GitHub Desktop, enter a commit message like "Create index.html" and click the Commit to gh-pages button -- it's important to make sure you're committing to gh-pages. Then click the Sync button in the upper right to copy your repo to GitHub Pages.