Working with MyST Websites
Create a website like this one
🛠 Throughout the tutorial, whenever you're supposed to do something you will see a 🛠
🛠 Install the MyST CLI
🛠 Install the MyST command line tools, with
node greater than version v16:
npm install -g myst-cli
See the first quickstart tutorial for installation walk-through and installation prerequisites.
🛠 Download quickstart content
We are going to download an example project that includes a few simple markdown files and some Jupyter Notebooks.
Our goal will be to try out some of the main features of
myst to create a website like this one, improve the structure of the metadata, share it between pages, and improve the website theme.
🛠 Download the example content, and navigate into the folder:
git clone https://github.com/executablebooks/mystjs-quickstart.git cd mystjs-quickstart
Initialize MyST 🚀¶
Next we will create a
myst.yml configuration file that is required to render your project.
myst command is a shortcut for
myst init, which has a few more options for writing specific parts of the configuration file and a table of contents for your site.
> myst Welcome to the MyST CLI!! 🎉 🚀 myst init walks you through creating a myst.yml file. You can use myst to: - create interactive websites from markdown and Jupyter Notebooks 📈 - build & export professional PDFs and Word documents 📄 Learn more about this CLI and MyST Markdown at: https://myst-tools.org 💾 Writing new project and site config file: myst.yml
🛠 When prompted, type
Yes to install and start the default theme (takes about 15 seconds)
? Would you like to run "myst start" now? Yes
If you cancelled the command, you can start the server with
Starting the server requires a theme, this will download the default
book-theme, which you can change later.
The theme will now install using
npm, this can take up to a minute the first time, and then will be cached in the
🐕 Fetching template metadata from https://api.myst-tools.org/templates/site/myst/book-theme 💾 Saved template to path _build/templates/site/myst/book-theme ⤵️ Installing web libraries (can take up to 60 s) 📦 Installed web libraries in 13 s 📖 Built interactive-graphs.ipynb in 21 ms. 📖 Built paper.md in 32 ms. 📖 Built README.md in 35 ms. 📚 Built 3 pages for myst in 82 ms. ✨✨✨ Starting Book Theme ✨✨✨ ⚡️ Compiled in 524ms. 🔌 Server started on port 3000! 🥳 🎉 👉 http://localhost:3000 👈
🛠 Open your web browser to
The example site in this tutorial only has three pages and by default the
01-paper.md page is seen in Figure 1, which has minimal styles applied to the content.
If you are using a text editor, for example VSCode, open up the folder to explore the files:
quickstart/ ├── 🆕 _build │ ├── exports │ ├── site │ │ ├── content │ │ ├── public │ │ └── config.json │ ├── temp │ └── templates │ ├── site/myst/book-theme │ └── tex/myst/arxiv_two_column ├── images │ ├── image.png │ └── image.gif ├── 01-paper.md ├── 02-notebook.ipynb ├── README.md └── 🆕 myst.yml
myst init added:
myst.yml- the configuration file for your myst project and site
_build- the folder containing the processed content and other
siteassets, which are used by the local web server.
_build folder also contains your templates (including the site template you installed) and any exports you make (when we build a PDF the exported document will show up in the
_build/exports folder). You can clean up the built files at any time using
If we open and look inside our
myst.yml we will see a basic configuration like this:
# See docs at: https://myst-tools.org/docs/mystjs/frontmatter version: 1 project: # title: # description: keywords:  authors:  # github: # bibliography:  site: template: book-theme # title: # logo: projects: - slug: myst path: . nav:  actions: - title: Learn More url: https://myst-tools.org/docs/mystjs domains: 
There are two important parts to the
- The project holds metadata about the collection of files, such as authors, affiliations and licenses for all of the files, any of these values can optionally be overridden in a file. To see all of the options see Frontmatter, which includes which fields can be overridden by files in the project.
- The site holds template information about the website, such as the logo, navigation, site actions and which template to use. The site has a list of projects, in this case the
path: .looks to the current configuration file for the project, which will be "mounted" at the
/myst/); sites can have multiple projects.
myst.yml: Change the "
# title:" comment in site to "
title: Fancy Title 🎩" and save
myst.yml will have triggered a "full site rebuild" and in about ⚡️ 20ms ⚡️ take a look at the browser tab:
Separating Project and Site Configurations
You may use separate the
site configurations into multiple
myst.yml files to configure your website. Each website needs a single
site configuration at the root level; then any subdirectory with content may have its own
project configuration with project-specific frontmatter. For example, given a
content directory with all your markdown and notebooks,you can create a
content/myst.yml file with project frontmatter:
version: 1 project: title: ... authors: ... ...
and a root-level
myst.yml file that references the project in the
version: 1 site: template: book-theme projects: - slug: my-content path: content ...
Doing this will keep the
_build directory at the root level, but everything else outside of the
content folder will be ignored.
More Coming Soon™
- table of contents (Table of Contents)
For now, that's it for this quickstart tutorial, we will add more about changing logos, themes, the table of contents, and much more soon! As for next steps you can export MyST Markdown as traditional documents like PDFs and Word, take a look at:
Learn the basics of MyST Markdown, and export to a Word document, PDF, and !
See an overview of MyST Markdown syntax with inline demos and examples.