```{include} _templates/nav.html ``` # Template This chapter will show you how to start editing content and customizing your page. ```{contents} Sections :depth: 1 :local: ``` ## Configure the index The contents of the page you see at [localhost:3000](https://localhost:3000) is configured in the `index.html` file found in the repository’s root directory. It uses a templating language [created by James Long](https://archive.jlongster.com/Introducing-Nunjucks,-a-Better-Javascript-Templating-System) called [Nunjucks](https://mozilla.github.io/nunjucks/). You can edit the page by changing what's found inside of the `content` block. Delete everything you see there now and replace it with something simple like: ```{code-block} jinja :emphasize-lines: 2 {% block content %}
Hello World
{% endblock content %} ``` You should see it immediately show up thanks a feature of baker that automatically updates your test site after you make a change.  Now, look closely at the `index.html` file. You will notice that it doesn't include code for much of what you might expect from an HTML page. For instance, you won't see the class `` or `` tags. Nor do you find the stylesheets that typically dicatate how a page looks. That’s because that boilerplate has been moved back into a parent template "extended" by the index file with a line of Nunjucks code at the top of the page. ```jinja {% extends 'base.html' %} ``` That base file, sometimes called the layout, can be inherited by other pages on your site to avoid duplication and share common code. One change to a parent file instantly ripples out to all pages the extend it. This approach to [inheritance](Hello World
{% endblock content %} ```  Now fill in a byline. ```{code-block} jinja :emphasize-lines: 2 {% block headline %}My headline will go here{% endblock headline %} {% block byline %}By me{% endblock byline %} {% block content %}Hello World
{% endblock content %} ```  And let's do the publication date too while we are at it. ```{code-block} jinja :emphasize-lines: 3-5 {% block headline %}My headline will go here{% endblock headline %} {% block byline %}By me{% endblock byline %} {% block pubdate %} {% endblock pubdate %} {% block content %}Hello World
{% endblock content %} ```  ## Commit your work You’ve installed a base template and started in on creating your first custom page. Now is a good time to pause and log our work with GitHub. The first command to learn is [`status`](https://git-scm.com/docs/git-status), which prints out a report card on the current state of your repository. ```bash git status ``` The next step is to instruct `git` to track the new files with the [`add`](https://git-scm.com/docs/git-add) command. Rather than introduce files one by one, you can add more than one file by using a [wildcard character](https://en.wikipedia.org/wiki/Wildcard_character) in your command. One common shortcut is `git add .`, which will add all of the files in your repository at once. ```bash git add . ``` Logging changes also requires using the [`commit`](https://git-scm.com/docs/git-commit) command, which expects a summary of your work after the `-m` flag. ```bash git commit -m "First commit" ``` ````{warning} If this is your first time using Git, you may be prompted to configure you name and email. If so, take the time now. ```bash git config --global user.email "your@email.com" git config --global user.name "your name" ``` Then run the `commit` command above again. ```` The final step is to syncronize the changes we’ve made on our computer with the copy of the repository hosted on github.com. This is done via the [`push`](https://git-scm.com/docs/git-push) command. This complicated `git` command requires two inputs. First, `push` asks for the name of the remote repository where you’d like to send your changes. In the parlance of `git`, the default target is `origin`. Second, you need to provide the [branch](