Stage 1: Set Up

Get started

Set Up will help you configure the necessary tools and files to begin building your own website. This tutorial uses GitHub Pages to deploy and store files for free. GitHub allows coders to stay organized and have access to the project's versioning history. With the help of Visual Studio Code, you will be able to edit and publish your changes in one place.

The provided folder contains template HTML and CSS files and other placeholder elements, like images and a resume. Content will be customized in Stage 2 of this tutorial.

1. Go to this repository with the template files.
2. Click the green Code button, Download ZIP, and drag it into your desktop for now.

3. Double click on templates-main.zip to uncompress the folder on your desktop and make sure it contains the correct 4 items: index folder, page1 folder, page2 folder, and a style.css file.

If you already have a GitHub account, skip to step #4 in this section. Keep in mind that your username will appear in your website's URL. To change your username: click on your profile picture in the top, right > Settings > Account > Change username.

1. Go to github.com and click Sign Up.

2. Enter your email, create a strong password, and enter a username.

⚠️ Consider using your personal email, rather than a University-given email that will eventually expire.

⚠️ The username you choose will appear in your website’s URL...so make sure you like it!

3. Complete account verification steps and click Create repository.

ℹ️ The repository will store all your project’s files and each file’s revision history.

4. In the repository name field, enter [yourusername].github.io, where you replace [yourusername] with the username you chose during account setup. For example:

example username

5. Ensure the privacy settings are set to Public, click Add a README file, and create the repository.

6. Click Add file and Upload files.

7. Drag and drop the 4 folders inside of the templates-main folder on your desktop.

⚠️ Do not drag and drop the entire templates-main folder, but rather the 4 items (3 folders and 1 css file) it contains. There should be a total of 16 files that are uploaded.

8. Add a commit message, like “blank templates,” and click Commit changes.
commit msg

Visual Studio Code allows coders to edit files and publish changes to a github.io site from the app.

1. If you already have VSCode installed, then skip this step. Go to Download Visual Studio Code and install the correct version of Visual Studio Code (VSCode) for your system.
vscode app

Git is a DevOps tool used for source code management. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to.

2. If you already have Git installed, then skip this step. Go to Install Git to install git on your system. To check if it has installed, run git version in your terminal.

Cloning a repository pulls down a full copy of all the repository data that GitHub.com has to your local machine.

1. Go back to your repository’s home page in GitHub, click the green Code button and copy the HTTPS address to your clipboard.
clone

2. Open the VSCode application and open a new terminal.

ℹ️ Terminal > New Terminal or use the command palette with cmd + shift + P and type/select the option Terminal: Create New Terminal.

3. Enter cd Desktop and hit return.

4. Enter git clone, paste the HTTPS address from GitHub, and hit return.

ℹ️ git clone https://github.com/{your-username}/{your-username}.github.io.git

5. Authenticate to your GitHub account with your username and password. VSCode may open a window in your browser to further authorize your account.

ℹ️ Now your GitHub repository is stored locally on your machine on your desktop and all changes will be saved to this location. You should see a new folder in your desktop called {your-username}.github.io.

6. Go back to Visual Studio Code and click File > Open. Select the new folder (the clone of your repository) on your desktop.

ℹ️ Now you should see the 3 folders (index, page1, and page2) and a README.md file in the Explorer menu on the left-hand side of the screen. The right-hand side of the screen is where you will be editing the files.

As you make edits, it's important to push your changes to GitHub to keep your website up-to-date. The Source Control icon in the Activity Bar will show you the details of your current repository changes.

1. Open the README.md file from the Explorer menu on the left-hand side of the screen.

2. Replace the text with the following:
[My Website](https://{your-username}.github.io/index/index.html)

ℹ️ Your README file is written in Markdown. The Markdown syntax for adding a link is [text](hyperlink) Make sure there is no space between the parenthesis () and the curly brackets [].

3. Save the file by clicking File > Save or cmd + S.

4. Click on the Source Control widget on the left-hand side of the screen. It will show that the README.md file has been changed.

5. Add a commit message like “update readme,” and click the blue Commit button.
commit

⚠️ If committing your updates through the Source Control menu ever lingers, try committing an update manually from the terminal instead. Copy and paste this line of code to commit an update from the terminal (without fail): git commit -m "message-here" (replace message-here with your commit message of choice).

6. Push the changes to your GitHub repository by clicking the blue ↑ button. Don’t worry about adding a message here.

ℹ️ "git commit" updates your changes locally. "git push" actually updates those local changes to your GitHub repository. "commit" must come before "push"!

push

⚠️ If pushing your updates through the Source Control menu ever lingers, try pushing an update manually from the terminal instead. Copy and paste this line of code to push an update from the terminal (without fail): git push or git push origin main.

7. Click OK, Don’t Show Again if a popup window, like this, shows up:

8. Go back to your repository’s home page on GitHub. You may need to refresh the page.

ℹ️ Your repository has been updated with the most recent changes you committed from Visual Studio Code. You can check the status of your latest commit and view all of your past commits.

popup window

9. Click on the blue "My Website" link in the README section.

readme link

🎉 If you see the page below, congratulations! You have successfully completed the Set Up steps. Switch between the About (index), Page1, and Page2 tabs in the top navigation bar to view the different pages. This is what your website looks like with no customization or stylization (pretty boring, right?). Now let’s move on to the fun stuff!

blank site

10. Begin Stage 2: Customize