Lesson 4 - Adding More Files

So far you’ve worked with a single file. Real projects have more. In this module you’ll add a style sheet, handle files in different states, and stage several files at once. The sandbox starts with the repository from the previous modules.

Adding a Stylesheet

The web page needs a style sheet. Create the file style.css:

cat > style.css <<'CSS'
* {
  box-sizing: border-box;
}

body { background-color: #aaa; }
CSS
cat style.css

Then link the style sheet from index.html by inserting a <link> tag before the closing </head> tag:

sed -i 's|  </head>|    <link rel="stylesheet" href="style.css">\n  </head>|' index.html
cat index.html

Files in Two States

Check the status of the repository:

git status

You have files in two states. You modified index.html by adding a line to it. Git doesn’t track style.css because you haven’t added it yet.

Look at the diff:

git diff

The diff shows the change to index.html but says nothing about the style sheet. Git only compares tracked files, and it only tracks files you’ve added.

You could commit the change to index.html with git commit -a, but that won’t pick up the new style sheet. The -a flag only stages files that Git already tracks. Stage the style sheet explicitly:

git add style.css
git status

Now style.css appears as a new file in the staging area, but index.html still isn’t staged. Stage it too:

git add index.html
git status

Both files are ready. Commit them:

git commit -m "Add stylesheet"

The output reports that 2 files changed and that Git created style.css.

Staging Several Files at Once

You’ve staged files one at a time, but git add accepts a list of files or a folder. Create a couple of pages and a folder of scripts:

echo "<h1>About</h1>" > about.html
echo "<h1>Services</h1>" > services.html
mkdir js
echo "console.log('hello');" > js/app.js
git status

Stage all three in one command. When you give git add a folder, it stages everything inside it:

git add about.html services.html js/
git status

Commit them:

git commit -m "Add about and services pages with scripts"

You can also use git add . to stage everything in the current folder. Review the status first so you don’t stage files by accident.

The Workflow

The workflow is always the same with Git:

1. Make changes to your code.
2. Use git status to see what you need to do.
3. Use git diff to review what you changed.
4. Use git add to stage the files you changed.
5. Use git commit -m "your message" to take a snapshot of your code.

Commits are cheap. They take up little space, so commit as often as you like. Commit whenever you get something working.

Using Git on an Established Project

You can start using Git on a project whenever you like, even on a project that’s almost done. Follow these steps:

1. Navigate to the folder that contains your project.
2. Use git init to initialize the repository.
3. Use git add . to stage every file.
4. Commit the files with git commit -m "Initial import".

From then on, follow the workflow.

Your Turn

Create a folder called images with two files in it. Stage the folder with a single git add command and commit it:

mkdir images
echo "logo" > images/logo.txt
echo "banner" > images/banner.txt
git add images/
git commit -m "Add images"
git status

What You Learned

• A repository can hold new, modified, and staged files at the same time
• git diff only shows changes to tracked files
• git commit -a never picks up new files
• git add accepts several files or a whole folder

In the next module you’ll share your repository with another location.