Class 6 - Editing our Blog

September 21, 2022

Last Week

We got setup in CodeSandbox
We found the “Hello World” posts in our class-notes repos…

This Week

Let’s edit the “Hello World” post
Let’s push our edits to Github
Let’s get a solid workflow going. This is amazing.

Edit the Hello World Post

First things first, search for “Hello World” in Code Sandbox. Code Sandbox’s search tab will return all results in your code where the string “Hello World” appears. IMO that’s the fastest way to find pieces that you want to change & anytime I see something on my website that I don’t like… I search for it.

1.0 Find your previously imported Sandbox

You can find your previously imported Repo here: https://codesandbox.io/dashboard/repositories.

You should have a repo like yourGithubName/class-notes-2 or yourGithubName/class-notes like mine below:

If you don’t have a repo import it by clicking the import repository button.

2.0 Search for Hello World

The search icon (it’s on the top left)

Search Results… These results show there is (1) file named index.md that includes the string “Hello World” on (2) lines.

3.0 Edit the Hello World file

If you click one of the lines the index.md file will open, BUT IT’s NOT EDITABLE… annoying

You can make it editable by clicking on this weird little icon at the top right of the file <>

Now it’s editable

Edit the text from “Hello World” to “My Name is Whatever”

4.0 Run your website

Open a terminal

Do you remember how to start your server?

Oh no the directory error again

Fix it by changing into the correct directory

# remember you can start typing class & press tab to autocomplete it
cd class-notes

Then try npm run start again

Ahhh! npm install (you shouldn’t always have to npm install when you start a new CodeSandbox … maybe this is a nuance of CodeSandbox or something we’re doing wrong)

You’ll know npm install is working when you see this