Alexander Prechtel's Instructions

WARNING: THIS WEBSITE IS A WORK IN PROGRESS PLEASE DO NOT SOLELY RELY ON THIS WEBSITE FOR ASSIGNMENT INSTRUCTIONS. PLEASE USE THE OFFICIAL SOURCE (CANVAS)

Setup your computer

Enable showing file extensions on your system.
- Windows Instructions:
  1. Open File Explorer (Shortcut: WIN + E)
  2. Click View
  3. Hover over Show
  4. Click File name Extensions
- MacOS Instructions:
  1. Open Finder
  2. Click Finder on the Menu Bar (Top Left)
  3. Click Settings (Shortcut: CMD + ,)
  4. Navigate to Advanced
  5. Enable Show all filename extensions
Install a Code Editor of your choosing.
We recommend using Visual Studio Code (VS Code) which can be downloaded here.
If you install Visual Studio Code please download the Live Server Extension from the Extensions Marketplace
Install an FTP Client
We recommend using FileZilla, which can be downloaded here.
Install the University's VPN Client
You can download the VPN from here
Login:
- Username: Niner_Net_username@charlotte.edu
- Password: Niner_Net_password
Note: Replace the bolded parts with your university provided login
Install GitHub Desktop
You can download GitHub Desktop from here.
Note: You do not need to use GitHub Desktop and may use another Git Client or use the Git CLI. We recommend it as not everyone is familiar with git and CLI tools. But Instructions will assume that you installed it.

Setup GitHub

Go to GitHub.com and sign in or sign up for an account.
Navigate to the create repository button and create a repository.
Name the repository as follows: YOUR_GITHUB_USERNAME.github.io
WARNING: If you do not name your repository exactly like that your webpage will not work.
Example: My GitHub username is alexandernc0043 so my repository should be named alexandernc0043.github.io
Open GitHub Desktop and clone your repository.
Open your cloned repository in Visual Studio Code by clicking the button inside GitHub Desktop

Creating your first webpage.

Inside Visual Studio Code create a new file called index.html.
Using Visual Studio Code's Emmett tool type an ! and hit Tab or Enter on your keyboard.

Your file should look like this now:

<!-- USERNAME.github.io/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

Edit your title by editing the word Document inside this element <title>Document</title> with [YOUR_NAME] [Divider] Homepage

Example(s):

<title>Alexander Prechtel | Homepage</title>
<title>Alexander Prechtel ~ Homepage</title>
<title>Alexander Prechtel - Homepage</title>

Inside your body element add a Heading 1 element (h1) and put the following:
```
<body>
	<h1>Welcome to my homepage!</h1>
</body>
```

Now add an anchor element ( a ) after your heading 1 element that will take you to your course page.

<a href="itis3135">Click here to go to my ITIS-3135 course page!</a>

Your body should now look like this:

<!-- USERNAME.github.io/index.html -->
<body>
	<h1>Welcome to my homepage!</h1>
	<a href="itis3135">Click here to go to my ITIS-3135 coursepage!</a>
</body>

Creating your course page

Inside your GITHUB_USER_NAME.github.io folder create a folder named itis3135
Note: in the future your GITHUB_USER_NAME.github.io folder will be referred to as the "root" of your website
Inside your itis3135 folder create a new file called index.html
Open your newly created index.html file inside your itis3135 folder.
Copy the contents index.html inside the root of your website and paste it into your newly created index.html file inside your itis3135 folder.
Remove the anchor element (a)

Replace everywhere you have homepage with ITIS-3135 course page

Your new index.html file should look like this now:

<!-- USERNAME.github.io/itis3135/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Alexander Prechtel | ITIS-3135 Course page</title>
</head>
<body>
	<h1>Welcome to my ITIS-3135 course page!</h1>
</body>
</html>

Now inside the ITIS-3135 folder create 6 new folders with the names:
1. images
2. components
3. scripts
4. styles
5. project
6. archives
Note: GitHub won't track folders with no files inside. You can add a README.md file if you want to have it be tracked but that's not required.

Creating your UNCC webspace

Request your UNCC Webspace by visiting webpages.charlotte.edu and signing in with your NinerNet account and clicking request account.
Note: This can take up to 10 minutes to provision.
After waiting some time visit webpages.charlotte.edu/YOUR_NINER_NET_USERNAME/, and you should see a template website saying it's created.
Example: https://webpages.charlotte.edu/aprechte
Use FileZilla to transfer your files to your university webspace.
Note: If you are off campus you will need to use the Cisco Secure VPN you installed in previous steps. Inside the box when opening Cisco Secure Client you will type vpn.charlotte.eduthen Login with your NinerNet account details.
1. Connecting to the university webpage SFTP server.
  Host: webpages.charlotte.edu
  Username: YOUR_NINER_NET_USERNAME DO NOT INCLUDE @charlotte.edu
  Password: YOUR_NINER_NET_PASSWORD
  Port: 22
  
  Once you are connected you should see your computer's files on the left and the server's on the right
2. On the server side open the public_html folder.
3. Now navigate to your GITHUB_USER_NAME.github.io folder on your computer.
4. Once you have located your folder drag the publc_html/index.html folder on the server side inside your root/itis3135/archive folder
5. After you have done that move your index.html in the root of your website anditis3135 folder into the public_html folder on the server side.
After you have successfully set up your university webspace go to GitHub Desktop and commit your changes
1. First type in a summary message of what you changed/add/updated
2. Click commit # files
3. Click push origin

Frequently Asked Questions

Office of OneIT Resources
- Personal Webpages Guide
- How do I login to VPN?
GitHub Resources

Submission

Please submit the following
Note: your university webpage and GitHub webpage should/need to be identical.

A screenshot of the entire FileZilla application showing your computer's files and server's files.
The URL for your UNCC webpage's itis3135 page.
Example: https://webpages.charlotte.edu/aprechte/itis3135/
The URL for your GitHub repository.
Example: https://github.com/alexandernc0043/alexandernc0043.github.io