This is the basic JavaScript template for Mastro. If you're not already viewing this on github.dev, open it in your browser.
- Click Install in the small dialog in the bottom right that says "Do you want to install the recommended extensions from mastro and FAST for this repository?"
- Click Trust Publishers & Install
- Close the two tabs of the just installed extensions (Mastro and FAST Tagged Template Literals) and switch back to the Explorer view by clicking the topmost icon ⧉ in the activity bar on the left. Now you can see your files and folders again.
On your keyboard, hit Ctrl-Shift-P (Windows or Linux) or Command-Shift-P (Mac), type mastro, and when the mastro: Preview and Generate Website item appears, hit enter.
Using Firefox?
In Firefox, this keyboard shortcut unfortunately opens a new incognito window. Instead, you need to hit Ctrl-P (Windows or Linux) or Command-P (Mac) and type >mastro (note the >).
Try to remember how to open the Mastro preview pane, as you might sometimes close it.
While you can play around in the template repository, if you want to save your changes, you need to create your own copy of the repo – if you haven't done so already.
- Open this template's GitHub repo
- Click the green button Use this template on the top right, select Create a new repository and choose a name for your project. (On the free tier, your repo needs to be public.)
- On your repo's GitHub page, press
.on your keyboard to again open Visual Studio Code for the Web.
Congratulations! If the above worked, you can skip the "Setup" chapter of the Mastro guide and continue with learning HTML, CSS, or JavaScript. Or if you know all that already, skip ahead even further to one of the following chapters:
- Publish your website to GitHub Pages
- Client-side vs server-side JavaScript, SPA vs MPA
- Mastro components and routing
If instead of following the guide, you just want a condensed overview of the Mastro web framework and static site generator, then head straight for the Mastro Docs.