website-on-github.md

layout	title	desc	hide_markbot	playlist	video	extra_tutorials	steps
lesson	Website on GitHub	Create a repository on GitHub, set it up to host a website, and launch a single page site.	true	web-dev-2	website-on-github	title url Version control & GitHub version-control-github title url Version control & GitHub slide deck /courses/web-dev-1/version-control-github/ title url Hosting with GitHub Pages /topics/version-control-github/#setting-up-hosting-with-github-pages	title before notes Sign in to GitHub **We’ll be using GitHub as our code version control system—and our web host.** We’ll put all of our coding exercises on GitHub where they will be live websites visible to anybody. label text Reminder For most coding exercises you won’t need to perform these steps, you’ll be using [Markbot](/courses/web-dev-1/using-markbot/) to hand in all your work. title before notes Create a new repo Before starting this project we need to create a repository on GitHub. The repository will hold all of our website code, all the history of our project, and be our host.  When we get to the new repository page there’s a few fields to complete.  - **Repository name** — create a unique name for the repo, make sure it follows the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). - **Description** — come up with a short description describing the purpose of the project. - **Public/Private** — choose “Public” because we don’t have a paid accounts. - **Initialize this repository with a README** — always make sure this is enabled. label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). title before image_steps Set up for hosting Before we write any code we’re going to set up the code repository so it’s a live, hosted website. By default the code stored on GitHub isn’t assumed to be a website—any code can be store on the service. We need to opt-into the free website hosting that GitHub provides, named GitHub Pages. url text settings.jpg Click the “Settings” tab at the top of the repository. url text gh-pages.jpg Scroll down a little and under the “GitHub Pages” section, where it says “None”, select “master branch”. **The change will automatically save.** title before Clone to computer After our repository is created and set up we need to clone (copy) it to our computer by pressing the “Clone to desktop” button.  The GitHub Desktop application will pop up and ask you where to save the repository. Put it into your `web-dev` folder—**you don’t have to make a folder specifically for this repo, the app will make it for you.**  Then click the “Clone” button:  title before Open in code editor We can now open up the project in our code editor.  Drag **the folder** that was created to your code editor in the Dock.  title before folders after notes Add an HTML file We’re ready to make a new HTML file. Go to `File > New` or press `⌘N` to make a new file. label type first-website folder label indent index.html 1 **Immediately save the file.** Call it exactly `index.html`. Put it into the `first-website` folder.  label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). label text Shortcut Use `⌘S` to save. label text Shortcut Use `⌘⌥N` to make, name, and save a new file in one step. Only works when a folder is open in your code editor. title before code_lang code_file code after Write some code In the `index.html` file write a little bit of HTML: html index.html <h1>It works!</h1>  **Then save!** title before notes Test the website After saving our HTML we need to test it in a web browser to confirm it works. **Use Chrome or Firefox to test websites while developing—Safari isn’t good enough.** Double click on the icon in Finder to open it in the browser.  Make sure it looks all good in the browser.  *Leave this tab open all the time while working to easily jump back and forth.* label text Reminder Leave this tab open while working and jump back to the window with `⌘Tab` when you want to test—press `⌘R` to refresh the browser. label text Shortcut `⌘S`, `⌘Tab`, `⌘R`, `⌘Tab`, repeat. title before notes Commit & sync When happy with how it looks in the browser it’s time to make a commit to save the state of our code. **Make sure to write a descriptive message!**  Then send it to the GitHub website with the “Push” button.  label text Shortcut `⌘Return` to save the commit. label text Shortcut `⌘P` to push your changes. label text Best practices Refer to the [**commit messages cheat sheet**](/topics/commit-message-cheat-sheet/) for the commit best practices. title before code after Test the live website After syncing our website will be live, online, at a specific URL. The URLs always look like this: https://username.github.io/repo-name/ Find the URL on the GitHub website under the repository’s “Settings” tab.  **And you should see your website!** The URL is completely open to anyone in the world.  title before Fork instead… **For all the code exercises in class we don’t have to go through the process of setting up for hosting—the assignments are all ready.** **We’ll be using the [fork & pass tests method with Markbot](/courses/web-dev-1/using-markbot/) to hand in all work.** [**That lesson comes next ➔**](/courses/web-dev-1/using-markbot/)