Mastro 👨‍🍳
GitHub   Bluesky
Menu

Setup: GitHub, VS Code and Mastro

The Mastro Visual Studio Code for the Web extension lets you run the Mastro static site generator (SSG) right in your browser.

No need to install anything or mess around with the command line. Never wait for a slow deployment pipeline again: you’ll know immediately if the generation failed for whatever reason.

Since all the processing happens upfront, and the generated files are served from a CDN close to your users, a static site is extremely fast and secure. We’ll be using GitHub Pages, which hosts your static site for free.

Create a new GitHub repository

If you want, you can buy and configure a custom domain later. But by default, GitHub Pages will publish your website for free under:

https://your-user-name.github.io/your-repository-name/

  1. Create a free GitHub account. Choose your username wisely, because it will show up in lots of places. Ideally, something relatively short that’s still available.

  2. Create a new GitHub repository to store your project’s files:

    • Open Mastro’s basic template repository.
    • In the upper right, click the green button Use this template, and from the dropdown select Create a new repository.
    • Choose a repository name (something short and descriptive like blog, or cooking-website, or even the domain name of your future website), and click Create repository.

Open Visual Studio Code for the Web

Now that you’re on your repository’s page on GitHub:

  1. press the . key on your computer’s keyboard to open the Visual Studio Code for the Web editor. Alternatively, you can go to https://github.dev/your-user-name/your-repository-name/ (this is the same address you’re already on, but instead of github.com, it uses github.dev).
  2. When prompted about signing in using GitHub, click the Allow button.
  3. To select your GitHub user, press enter in the small dialog that opens.
Using Firefox?

If you’ve selected “Strict” in the “Enhanced Tracking Protection” preferences, you need to temporarily disable it, in order to connect VS Code with GitHub the first time around.

See also VS Code for the Web’s browser support.

Install the Mastro extension

  1. 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?”
  2. Click Trust Publishers & Install
  3. Close the two tabs of the just installed extensions (Mastro and FAST Tagged Template Literals).

Done? Congrats, you’re all set up now! You can switch back to the Explorer view (the topmost icon in the activity bar on the left) to finally write some HTML.