1 of 25

Adding to GitHub Pages

English 3844, Fall 2016

Traci Gardner

Slide text is licensed under CC-BY-SA 4.0.

Icons copyright © 2015 Hand-Drawn Goods.

2 of 25

Tasks for the Week of October 24

​

  1. Discuss the basics of GitHub Pages.
  2. Setup GitHub Pages sites.
  3. Go over how to add images, videos, and links.
  4. Explain why we aren’t using the Automatic Page Generator.
  5. Discuss HTML5Up.net and adding CSS files.

3 of 25

Getting Ready

  1. Launch Atom and GitHub Desktop on your computer.
  2. Find an image on your computer, in the Finder or Windows Explorer, that you can put on your site.
  3. Open the following in your Web browser:
    • https://github.com (and login)
    • https://your-username.github.io/[whatever]
    • http://freecodecamp.com
  4. Mute the speakers on your computer.

( )

4 of 25

Cleaning up Atom

  • In Atom, click the checkbox to turn off the Welcome Guide.
  • Close the Welcome tab and the Welcome Guide tab.
  • If you need to get back to these guides, look in the Help menu.

5 of 25

Ways to Add CSS to a Page

  1. Inline Style�Include details with the code on the page: �<h1 style="color: #FF6600;">Hokies Rule</h1>
  2. Embedded Style�Include details in a <style> section in the <head> of the page.
  3. External Style�Include details in a separate file, which uses the file extension .css. Link to the file from your HTML file.

CSS = Cascading

Style

Sheet

6 of 25

How to Use Embedded CSS

  • Use only one <style>...</style> section.
  • Place the <style>...</style> section between the �<head> and </head> tags.
  • If you apply a style to elements (e.g., <p>, <h2>), they will apply automatically to those elements.
  • If you apply styles to classes (e.g., .smaller-image), you need to add the class attribute to the relevant code.

7 of 25

Adding Embedded CSS to a Page

  • Open your index.html file in Atom.�
  • Choose Enable Preview from Preview HTML submenu on the Packages Menu.�
  • Create a <style> section between the <head> and </head> tags. To simplify the process, you can copy some style code from FreeCodeCamp.�
  • Apply the style of any classes to your content.

8 of 25

Making a Second Page

  • Choose New File from the File menu in Atom, or�right-click on your practice folder, and choose New File from the context menu.
  • Give the new file a page. I used about.html.�Remember you must have the .html ending for the preview to work.
  • Add some content to the page, and save it. Don’t worry about style right now.

9 of 25

Creating an External CSS File

  • Right-click on your practice folder, and choose New Folder from the context menu.
  • Name the folder css.
  • Right-click on your css folder,and choose New File from the context menu.
  • Name it main.css.

10 of 25

Adding Styles to main.css

  • Go to your index.html file, and cut everything from <style> to </style> out of the <head> section.
  • Paste the information into your main.css file.
  • In your main.css file
    • Delete the <style> tag from the first line.
    • Delete the </style> tag from the last line.
  • Choose Save All from the File menu. You now have an external CSS file.

11 of 25

Importing Your External Stylesheet

  • Go to your index.html file.
  • Add a link to the main.css file in between the <head> and the </head> tags:��<link rel="stylesheet" type="text/css" href="css/main.css">
  • Choose Save All from the File menu.
  • Repeat this process to link your second page to the main.css file.

12 of 25

Adding Your Own Images

  • Right-click on your practice folder, and choose New Folder from the context menu.
  • Name the folder images.
  • Find the image that you will add to your practice site in Finder to Windows Explorer.
  • In Atom, right-click on the images folder, and choose Open in Explorer (or Finder) from the context menu.

13 of 25

Adding Your Own Images

5. Double-click on the images folder to open it.

6. Copy the image you have chosen into the images folder.

7. Go to your index.html file and add the code for the image:� <img src="images/the-name-of-your-file-here">.

8. Use what you learned in FreeCodeCamp to make any � changes to the way the image is displayed.

14 of 25

Adding Hyperlinks

  • To add a link to a page outside your site, you use the full URL in your code:�<a href="https://github.com">GitHub</a>
  • To add a link to a page in your site, you can use the path in your code:�<a href="about.html">About the Hokies</a>

You can review details on making links in FreeCodeCamp.

15 of 25

Embedding a YouTube Video

The Share Code on the YouTube site gives you the code.

  • Go to the YouTube video you want to embed. I'm using https://youtu.be/0ZGXJqQ8mSE
  • Click the Share link, and then the Embed link.
  • Click the Show More link if you want to make changes.
  • Copy the Embed code from the YouTube page.
  • Paste the Embed code into your web page, wherever you want the video to appear.

16 of 25

Embedding a SoundCloud Recording

The Share Code on the SoundCloud site gives you the code.

  • Go to the SoundCloud file you want to embed. I'm using https://soundcloud.com/sportsbrothersr/virginia-tech-hokie-pokie
  • Click the Share link, and then the Embed link.
  • Click on the layout you want for your page.
  • Copy the Embed code from the SoundCloud page.
  • Paste the Embed code into your web page, wherever you want the audio to appear.

17 of 25

Using Special Characters

  • Go to the Special Characters page:�https://dev.w3.org/html5/html-author/charref
  • Click the character you want to use.
  • Copy the related code. For instance, to add 𝝅, you would use the code &pi; or &#x003C0; or &#960;
  • Paste the code into your page.

18 of 25

Reminder Save and Publish

  • Choose Save All from the File menu in Atom.
  • Go to GitHub Desktop and click the Changes button at the top.
  • Add a Summary of your changes near the bottom of the change column.
  • Click the Commit button at the bottom of the column.
  • Click the Sync button in the upper right to publish your files.

19 of 25

Adding Collaborators

  • Go to your profile page: http://GitHub.com/your-username�Mine is https://github.com/tengrrl.
  • Click on the Repositories link.
  • Click on your Pages repo: your-username.github.io.
  • Click on the Settings tab:

​

20 of 25

Adding Collaborators

5. Click the Collaborators link on the left:

​

​

​

​

6. Enter your GitHub password.

21 of 25

Adding Collaborators

7. Fill out the form to add people who can make changes to your site, like me, tengrrl. This way I can look at your code if you get stuck and leave you suggestions.

​

​

​

​

22 of 25

Using the Project Organizer in GitHub

  1. Click on the Projects tab:�����
  2. Click on the Create a project button.
  3. Name the Project something related to your class project.
  4. Add Columns and Cards to organize your work.

23 of 25

Using a Project Template

You can choose a template from http://html5up.net for your site.

  • Evaluate the templates with a sense of how you will use them.
  • Think about how you will use the image spaces. You must provide your own images.
  • Realize that the code is more advanced than what we have been doing in class.

​

24 of 25

Using a Project Template

  1. Download the zip file for the template you choose.
  2. Unzip the file you downloaded.
  3. Copy the folder for your template into your �your-username.github.io folder on your computer.
  4. Rename the template folder to something related your project. Do not use any spaces or special characters in the name.
  5. Commit and sync the files in GitHub Desktop to publish them.

25 of 25

Adding a New Project Folder

To begin your website project without a template, you will create a new project folder in Atom.

  • Right-click on your-username.github.io folder, and choose New Folder from the context menu.
  • Name the folder something related to your project. Do not use any spaces or special characters in the name.
  • Make your .html pages and your .css files for the project in this new folder.
  • Commit and sync the files in GitHub Desktop to publish them.