Build a Personal Website in 5 Minutes: No Coding Required

Having a personal website is one of the best ways to share your work, whether you are a researcher, student, or developer. But building one from scratch can feel intimidating, especially if you do not write HTML or CSS regularly. In this tutorial, I walk through how to go from zero to a live website in about five minutes using the myst-website-template and GitHub Pages, all for free and no coding required.

What You Will Need¶

• A GitHub account (free).

• That is it for the basic setup. If you want to customize your site locally before pushing changes, you will also want a code editor like VS Code or Cursor, plus Node.js (version 18 or later) for local preview.

Create Your Repository¶

1. Go to the myst-website-template repository on GitHub.

2. Click the green Use this template button in the upper right corner, then select Create a new repository.

3. Choose your GitHub account as the owner and give the repository a name. Pick something short and memorable, as this will become part of your website URL (e.g., username.github.io/repo-name).

4. Optionally add a description.

5. Set the repository to Public if you want others to see the source. You can also choose Private; the deployed website will still be public, but the source code will not be.

6. Click Create repository and wait a minute or two while GitHub copies the template.

Enable GitHub Pages¶

Once the repository is created, you need to tell GitHub how to deploy it:

1. Go to your new repository’s Settings tab.

2. In the left sidebar, click Pages.

3. Under Build and deployment, change the source to GitHub Actions.

4. Go back to the Actions tab. If the initial deploy failed (it often does because Pages was not enabled yet), click into the failed run, then click Re-run jobs to trigger a fresh build.

5. After a minute or two, your site will be live at https://username.github.io/repo-name.

Customize Your Site¶

Clone the repository to your local machine to start making it your own:

git clone https://github.com/username/repo-name.git
cd repo-name

Open the project in your preferred code editor. The key files to update are:

• myst.yml: Controls the site title, subtitle, navigation menu, and theme settings. Update the title and description fields to match your name and purpose. The toc (table of contents) section defines the sidebar navigation; add, remove, or reorder entries to match your content.

• logo.png and fav.ico: Replace these with your own logo and favicon. The logo appears in the site header, and the favicon shows up in the browser tab.

• Content pages: All pages are Markdown files. Edit the existing ones or create new ones. The template includes sample pages under the book/ directory organized into parts (part01/, part02/, etc.).

Add Pages and Components¶

To add a new page:

1. Create a new Markdown file (e.g., book/part01/new-page.md).

2. Add the file to the toc section in myst.yml so it appears in the navigation.

MyST Markdown supports rich components beyond standard Markdown. Here are a few useful ones:

Dropdown (collapsible content sections):

:::{dropdown} Click to expand
Hidden content goes here.
:::

Grid of cards (responsive layout with clickable links):

::::{grid} 2 2 4 4

:::{card} Card Title
:link: https://example.com
Description text here.
:::

::::

The grid numbers (2 2 4 4) control the number of columns at different screen sizes (extra-small, small, medium, large). For example, 2 2 4 4 shows two columns on small screens and four on large screens, making the layout responsive automatically.

Source code blocks: MyST can render executable code cells from Jupyter notebooks, allowing readers to launch a kernel and run code directly on the page.

For the full list of available components, check the MyST Markdown guide.

Preview Locally¶

Before pushing changes to GitHub, you can preview the site on your local machine:

pip install -r requirements.txt
npm install -g mystmd
myst start

This starts a local development server at http://localhost:3000. Changes to your Markdown files will be reflected in the browser automatically.

To build the static HTML output (useful for hosting on other servers):

myst build --html

The output goes to _build/html/.

Deploy Your Changes¶

Once you are happy with your edits, commit and push:

git add .
git commit -m "Update website content"
git push

GitHub Actions will automatically rebuild and deploy your site. The update typically takes a minute or two to go live.

Optional: Custom Domain¶

By default, your site lives at username.github.io/repo-name. To use a custom domain like yourname.com:

1. Add a file called CNAME to your repository root containing your domain name (e.g., yourname.com).

2. Update your domain’s DNS settings to point to GitHub Pages. GitHub’s documentation on custom domains has the specific DNS records you need.

3. In your repository’s Settings > Pages, enter your custom domain and click Save.

After DNS propagation (which can take a few minutes to a few hours), your site will be accessible at your custom domain.

What is Next¶

This tutorial covers the quickest path from zero to a live website. For a deeper look at what the template includes (GitHub Actions workflows, pre-commit hooks, Netlify PR previews, and more), see A Reusable Template for Building Websites with MyST Markdown. To learn about how I use this same approach for my own website with automatic CV generation, check out Launching My New Website with MyST Markdown and Typst.

The MyST Markdown guide is the best resource for learning what directives and roles are available. If you build a site using the template, feel free to share it on social media and tag me. I would love to see what you create!