Use as a template¶
If you want scroll-zoom-thing as the starting point for a project of your own - rather than a fork that tracks the upstream - GitHub's template feature is the right tool. This page covers when to template, when to fork, when to clone, and which three files you should edit first.
Use this template vs fork vs clone¶
These three actions look similar in the GitHub UI but produce different results.
Use this template creates a new repository under your account with no fork relationship to scroll-zoom-thing. The new repo starts with a single initial commit (or a flattened history, if you choose) and behaves as if you had created it from scratch. You will not see "forked from" in the header, and you will not get notifications about upstream activity.
Fork creates a copy with a tracked relationship to the upstream. You can pull future changes from scroll-zoom-thing into your fork, and you can open pull requests back to the upstream easily. The header shows "forked from nirholas/scroll-zoom-thing".
Clone copies the repository to your local machine. It does not create a GitHub repo - you would need to create one separately and push to it.
For most users, Use this template is the right choice. You are unlikely to want to merge upstream changes into a heavily-customized site, and a clean history is easier to reason about.
Creating a repo from the template¶
- Open github.com/nirholas/scroll-zoom-thing.
- Click Use this template (top right, next to the Fork button).
- Choose Create a new repository.
- Pick the owner (you or an organization), give the repository a name, and set the visibility (public or private).
- Leave Include all branches unchecked unless you specifically need the
non-default branches. The default
mainis enough. - Click Create repository.
GitHub provisions the new repo within a few seconds. You can now clone it locally if you want to develop against it:
The three files to edit first¶
Once you have your own repo, the changes that have the biggest visual impact are concentrated in three files.
overrides/home.html¶
This is the Jinja2 template for the parallax hero. It extends Material's
base.html and overrides the tabs and content blocks to render the
four parallax layers, the headline, the subheading, and the call-to-action
buttons.
The lines you will most often touch:
- The
<h1>and<p>inside the hero. - The two
<a class="md-button">elements - their text and theirhref. - The
style="--md-parallax-depth: ...; --md-image-position: ..."attributes on each layer, if you want to retune the parallax.
A full walkthrough of hero customization lives in Hero copy.
src/index.md¶
This is the home page content. The first line - the front matter - is what attaches the parallax template to the page:
The template: key tells MkDocs Material to render this page using your
override instead of the default main.html. Anything you write below the
front matter appears below the hero in Material's normal content area, so
this is where you put your "below the fold" copy - feature lists, social
proof, secondary call-to-action, and so on.
mkdocs.yml¶
The site configuration. The lines you will edit on day one:
site_name: Your project name
site_url: https://your-domain.example/
site_description: One-line description for SEO and social cards.
repo_url: https://github.com/<you>/<your-repo>
repo_name: <you>/<your-repo>
theme:
name: material
custom_dir: overrides
palette:
- scheme: default
primary: indigo
accent: pink
extra_css:
- assets/stylesheets/home.css
nav:
- Home: index.md
- Overview: overview/index.md
- Getting started: getting-started/index.md
site_name appears in the header and the browser tab. site_url is used by
MkDocs to generate canonical links and the sitemap. repo_url and
repo_name populate the "Edit on GitHub" link in the page footer.
For deeper coverage of palette and color customization, see Theme. For navigation structure, see Pages and nav.
What to do next¶
You have a repo. You have edited the three high-impact files. There are two reasonable next steps:
- If you want to iterate locally with hot reload, follow
Local development. It covers the Python virtual
environment, the
mkdocs serveworkflow, and a few debugging tips for when the parallax does not render correctly. - If you would rather edit on GitHub and deploy on every push, return to Quickstart and connect your new repo to Vercel, Cloudflare Pages, or GitHub Pages.
Either path works. The template does not assume one over the other.