Unit 01 · lesson

Create the First Site Without a Theme

Themes are useful.

We are not using one yet.

If you hide the HTML, build path, layouts, and generated output behind a theme on day one, you can make something attractive without understanding what Jekyll actually did.

We are doing the opposite.

Project structure

Start with:

my-portfolio/
├── Gemfile
└── index.html

Use the index.html from Lesson 1 or create a simple equivalent.

Then install the bundle if needed:

bundle install

Run a build

From the project root:

bundle exec jekyll build

A successful build normally creates:

_site/

Inspect it.

ls _site

On Windows PowerShell you might use:

Get-ChildItem _site

You are looking for evidence, not trying to prove loyalty to a particular shell.

Compare source and output

Open:

index.html
_site/index.html

At this stage they may be nearly identical.

Good.

That gives you a clean baseline.

Create a small comparison table:

QuestionSourceGenerated output
Where is it?project root_site/
Should I edit it directly?yesnormally no
Who writes it?you/editorJekyll build
Who receives it later?Jekyllserver/browser

Serve the result

The official tutorial also introduces:

bundle exec jekyll serve

This builds the site and runs a local development server.

The terminal will report the local address. A common default is:

http://localhost:4000

Open the address shown by your terminal rather than blindly assuming a port.

Controlled change

Change one visible sentence in the source index.html.

Before saving, write:

Expected browser change:

Save.

Watch the terminal.

Refresh the browser if needed.

Write:

Observed browser change:
Match? yes / no
Evidence that Jekyll rebuilt:

That Expected → Observed loop is going to follow you through the whole course.

Do not edit _site as your solution

Try this thought experiment:

You change _site/index.html directly and the browser looks correct.

Then Jekyll rebuilds.

What happens?

Your direct edit can be overwritten because _site is generated output.

That is why "I fixed the HTML" is incomplete. Which HTML did you fix?

Portfolio checkpoint

Your first local portfolio should now have:

  • source index.html;
  • Gemfile;
  • likely Gemfile.lock after bundle resolution;
  • generated _site/;
  • a working local preview; and
  • one recorded Expected/Observed test.

Do not add a theme yet.

You have not earned the abstraction until you understand what it is abstracting.