portfolio website

We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

go live

Time to publish your website to the web.

First, push your code to GitHub.

Then, publish it to the web.

buy-me-coffee-javascript

Sign Up For Coffee

Sign up for buy me a coffee.

Add Coffee Button

In index.html, add the following a tag at the bottom of the top div that has the id attribute set to pageWrapper.

For the href, replace the value in the example below with your Buy Me A Coffee link.

<a href="https://www.buymeacoffee.com/thacash" class="coffee-button">
  Support Me On Buy Me A Coffee
</a>

In styles.css, add the following css class definitions.

.coffee-button {
  background-color: #ffdd00;
  border-radius: 10px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 10px 20px;
  text-decoration: none;
}

.coffee-button:hover {
  opacity: 0.8;
}

Save and refresh.

Look for the button on the page.

Click it to make sure it take you to your coffee page.

Open Terminal

Open the terminal in VS Code by selecting the View dropdown menu at the top of your computer and then select Terminal. You should see a terminal session open in VS Code.

vs-code-terminal

Make sure you see your project folder name in the terminal session.

That way you know the terminal is pointed to your project folder.

If you do not see the terminal pointing to your project folder, type in your terminal cd followed by a space . Then, drag your project folder to the terminal. You should see after the cd a filepath for your folder. Hit enter.

Check Git Situation

Check the git situation for your new folder.

With your terminal pointing to your project folder, type git status and hit enter.

You should see a list of filepaths, which means you need to initiate a local git repository for your project.

../../../../../../.CFUserTextEncoding
../../../../../../.DS_Store
../../../../../../.Trash/
../../../../../../.cups/
../../../../../../.local/
../../../../../../.netrc
../../../../../../.npm/
../../../../../../.ssh/
../../../../../../Applications/
../../../../../../Desktop/
../../../../../
../../../../../../Downloads/
../../../../../../Library/
../../../../../../Movies/
../../../../../../Music/
../../../../../../Pictures/
../../../../../../Public/

When you initiate a local git repository, it creates a hidden file in your project folder called .git.

List all contents of your project folder in the terminal, including the hidden folders and files. Look for the absence of a .git folder.

ls -al
The . means that it is hidden in your folder.

Initiate Git

Initiate a local git repository in your project folder.

Type in your terminal git init and hit enter.

Your terminal should say that you initialized an empty git repository.

Initialized empty Git repository in /Users/jonathangrossman/Documents/Developer/ITC/Work/git/github_exercises/.git/
Only do it once. You should generally avoid having multiple git histories in your projects.

Do two things to confirm.

First, list all the contents in your folder to see the .git file now exists.

You should see a .git file listed in the terminal.

total 16
drwxr-xr-x   4 computer_user  staff   128 Sep 30 14:07 .
drwxr-xr-x   4 computer_user  staff   128 Jun 21 15:35 ..
drwxr-xr-x  12 computer_user  staff   384 Sep 30 14:49 .git

Second, check that git is tracking your folder. Enter the terminal command git status.

git status

It should print out something like the following.

On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        01_getting_started.md

nothing added to commit but untracked files present (use "git add" to track)

Before initiating git, the git status command returned a list of filepaths. Now the terminal output is different. It confirms you successfully initiated a local git repository.

Add To Git

Save a copy of your project folder to the local git history. It does not happen automatically like in Google Docs or Microsoft Word.

First, move your files from your project folder to the git staging area using git add -A.

git add -A
Nothing should happen in the terminal after you hit enter. To check that it worked, enter git status again.

The staging does not actually save the changes to your git history. You need to commit for the changes to save to the local git repository.

Commit To Git

Second, use git commit -m "a short descriptive message about the changes" to save the files to your local git repository.

The terminal should return a message like the following.

[master (root-commit) 1d49d54] first commit
 1 file changed, 60 insertions(+)
 create mode 100644 01_getting_started.md

You successfully saved your project folder to a local git repository.

Create GitHub Repo

Create a new or use an existing GitHub account.

Create a repository.

On the New Repository page, enter the details of your repository.

  • Template: No template
  • Owner: your GitHub account
  • Respository name: same as your project folder
  • Description: okay to leave blank
  • Visibility: public

create-github-repo

Read the instructions on the page that GitHub redirects you.

Do not do them yet.

quickstart-github-repo

The GitHub Quickstart instructions have six git commands.

Skip the first three: git init, git add README.md and git commit -m "first commit".

You already did them.

Entering git init again might cause problems.

Only do the last three and remember to use your repo url instead of https://github.com/thacash/example.git`.

git branch -M main
git remote add origin https://github.com/thacash/example.git
git push -u origin main

Create Git Main Branch

The fourth git command sets the name of your primary working branch to main.

Enter in your terminal the following:

git branch -M main

Add Git Remote

The fifth command has you connect your local git to GitHub by storing the GitHub address in your git files.

Before doing that, confirm that your local git does not yet have a remote.

In your terminal, type git remote.

git remote -v
When you add a remote, you are telling the local git repository the address of where to find your remote repository.

To add a remote repository to your local git, enter the command from the Quickstart page for your repo.

git remote add origin https://github.com/your-github-name/your-repo-name.git

Check again your local git remote reference using git remote -v.

This time you should see the terminal print origin and the GitHub address.

git remote -v

Push To GitHub

Now that you connected the local and remote repositories, save the local git history to your GitHub repo.

Remember above when you committed changes to the local git?

Now you are going to push those committed changes to your GitHub repository.

When first connecting local to remote, the command is git push -u origin master.

git push -u origin main

The output in the terminal should be something like the following.

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 770 bytes | 770.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com-yourname:yourname/your-repo.git
 * [new branch]      master -> master
Branch 'main' set up to track remote branch 'main' from 'origin'.

The current version of your project folder from your computer should now be saved to GitHub.

From here on out, you only need to use the command git push instead of git push -u origin main to push your local to the remote.

Visit your GitHub repository in a browser.

Refresh the browser showing your your GitHub repo.

You should see your commit in the repository.

Your project folder from your computer should now be on GitHub.

Publish Online

In your GitHub repository, on the top right of the page click the Settings button.

On the Settings page, click the Pages link in the left sidebar.

On Pages, configure it the following way.

  • For Source select deploy from a branch.
  • For Branch, select main and root
  • Make sure your repo is public

Save.

Visit your site live!

Last updated Sept 24, 2022 at 9:18