ITEC 4610 - Portfolio

Portfolio Development Using Github and AWS

Getting Started with Github

  • You can use AWS to develop your portfolio, or you can use your PC and your favorite HTML editor
  • You will use Github host your portfolio
  • You can read more about how Github works at https://guides.github.com

Create Your Github Account

  • Navigate to https://github.com. Create a new Github account or login to an existing account. (use a professional username, such as your initials and last name. Use all lowercase.

Create Your Personal Access Token

Personal Access Tokens are security certificates stored on Github. Previously when you tried to publish something from AWS to Github, you provided your username and password. Now Github requires a username and certificate.
  • In the upper right corner of the Github page, click the dropdown arrow of the user icon, and select "Settings"
  • You would think that Personal Access Tokens would in the Account Security tab, but it is not. Select the "Developer Settting" tab, then the "Personal Access Tokens" tab.
  • Click the "Generate New Token" button.
  • In the Note field, enter "Portfolio Token".
  • Select the "repo" check box.
  • At the bottom, click "Generate Token"
  • The token is shown one time and cannot be viewed again. Copy the token, paste it into Notepad, and save the token value for later use.

Create Your Portfolio Repository

  • In the upper left of Github, click on the "Octocat" icon to get to the home page
  • In the left of the page, click "Create a Repository" and enter "portfolio". Use all lowercase. Be sure that "Public" and "Add a README file" are checked, then click "Create Repository". You should have a "README" file in your repository.
  • You will see a row of tabs below the repository name. Click on "Settings" (this is not the same as the setting for the user).
  • Scroll down the options table and click on "Pages". Under "Source", click the dropdown and select "master branch", then click "Save". It will take a minute or two before your portfolio is published. You will eventually be able to see the portfolio at https://yourusername.github.io/portfolio.
  • On the top of the screen, locate "yourusername / portfolio, and click on "portfolio"
  • Click on the green "Code" button. It should say: "Clone with HTTPS". Click the clipboard next to the URL. The URL should look like https://github.com/yourusername/portfolio.git.
  • Now enter the following command to clone copy your repository to AWS (type "git clone " then a CTRL-V"
    • git clone https://github.com/yourusername/portfolio.git
  • When you publish to github, it would be nice to establish the name and the email of the person posting uploading the data to the repository. In the "bash" tab at the bottom of the page, enter your name and email:
    • git config --global user.name "USER_NAME"
    • git config --global user.email EMAIL_ADDRESS

Making Changes to Your Portfolio

  • Make whatever changes you want to your portfolio files. To get started, create "index.html" in your "portfolio" folder and paste the following code (be sure to put in your name), then save it:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Homepage</title>
</head>
<body>
<h1>Hello World - Portfolio of Put Your Name Here</h1>
</body>
</html>
  • You can preview the webpage by clicking on "Preview" tab, then "index.html". This will display the webpage. On the far right, you can see "Pop Out into New Window" icon, which will display the webpage in a full screen browser.
  • When you are ready to publish your portfolio, click "Window", and "New Terminal". This will display a "bash" tab. See Steps 4-9 in the AWS User Guide.
  • You will need to enter the following command only one time. It tells Github that you want to store your Personal Access Token so you won't have to continally enter it:
    • git config credential.helper store
  • In the bash tab, look to see if your default directory is the folder that you want to publish. In this case it it "portfolio". If you need to set your default directory, then enter:
    • cd portfolio
  • To publish your portfolio, enter the following commands (Note: the "git status" commands are optional):
    • git status
    • git add --all (Note: two dashes)
    • git status
    • git commit -m "Short Description about Changes" (Note: Description is required)
    • git push
  • You will be prompted for your Github username and password.
    • Your Github Username is the name that precedes "/portfolio" in the upper left corner of Github. Press Enter when complete.
    • Your password is the Personal Access Token that you saved in an earlier step using Notepad. Copy and paste the Personal Access Token into the password prompt, then press Enter. Note that the token it will not be echoed to the screen. The Personal Access Token is stored, so you won't be prompted for it the next time you save your portfolio.
  • Check your portfolio repository in github (you may have to do a refresh). You should be able to see your "index.html" at "https://yourusername.github.io/portfolio"