View on GitHub

markdown-only-website

Make a website using only Markdown

Make a Website with Only Markdown

Learn how to use Markdown on GitHub to make a nice-looking website without the use of a special editor or command line tools.

If you’re new to Markdown, take a look at GitHub’s Markdown Guide.

Step 1. Edit your Markdown file

Put all of your Markdown in a file with a simple name such as index.md or home.md.

Add the following lines to the very top of the Markdown file, replacing Make a Website with Only Markdown with the title you want to use for your website:

---
title: "Make a Website with Only Markdown"
permalink: /
layout: default
---

These special lines are known as Front Matter and they tell GitHub the title and location of the page on your website.

Make sure to save your changes. 😉

Step 2. Create a GitHub repository

If you don’t already have one, create a free GitHub account at github.com.

Once you’re signed in, click the icon in the top navigation bar to create a new repository.

Name your repository and select Public access so your website will be viewable by anyone.

Press the Create Repository button.

Step 3. Upload your Markdown file

Click the Uploading an existing file link in the Quick setup section of your new repository.

Drag your Markdown file onto the new page or click the Choose your files link to select the file from your file system.

Press the Commit changes button.

Step 4. Turn on GitHub Pages

Navigate to the Settings tab of your repository on GitHub, then scroll down to the GitHub Pages section of the page.

Select master branch as the Source option. Then click the Choose a theme button in the section.

Use the carousel to choose and preview a theme for your website, then click the Select theme button to apply that theme to your repository.

Step 5. Behold your website!

If all went well, your website should be live!

To view it, click the link to your website in the GitHub Pages section on the Settings tab of your repository on GitHub.

The URL is also structured in a specific way:

https://<user>.github.io/<repository>/

If you replace <user> and <repository> with your GitHub login and repository name, you can also type the address directly into your browser’s address bar.

Step 6. Use your own domain name

If you have your own domain name, you can also tell GitHub to host your Markdown website at that domain.

On GitHub

Go to the GitHub Pages section on the Settings tab of your repository on GitHub, type your domain name (e.g. www.markdownwebsite.com) in the Custom domain text box, then click Save.

On your domain registrar

Login to your domain registrar’s website and configure your domain name settings (DNS).

Create a CNAME record that points your domain name (the exact same text typed in GitHub’s Custom domain field) to <user>.github.io (replace <user> with your GitHub login).

Save your DNS settings.

After the DNS change propagates (this can take seconds, minutes, or hours), you’ll be able to visit your domain and see your beautifully-rendered Markdown website! 😎

Where to learn more

This feature of GitHub is known as GitHub Pages and there’s much more to it than demonstrated here.

If you want to take a deeper dive into GitHub Pages, visit pages.github.com.

For more information about Jekyll, the underlying technology that GitHub pages uses, visit jekyllrb.com.