Publish a Static Website in a Day with MkDocs and Netlify

By Sean Stewart

A nice feature of Markdown is that it’s a superset of HTML, so all HTML code is valid. This means we have the flexibility to choose to insert some raw HTML into our docs if we have the need. Below are some extra things you can do to take your personal website to the next level.

Add a Feed for Your Medium Posts

If you’re a Medium user and you’re thinking about starting a blog, Medium is a natural choice, as it comes with a built-in audience and a fantastic CMS. However, what do you do if you also want a personal website with your blog posts made available? After a sufficient amount of research I found two viable options:

  1. Write your blog posts on your website and manually import them to Medium.
  2. Write your blog posts on Medium and use pixelpoint.io’s Medium widget to create a live feed of your posts.

I went with Option 2 and created a page on my website dedicated to my published posts. This option was ideal for me because it means less manual intervention in the long run. I just publish my words once and they’re available everywhere I want them to be!

Add a Contact Form

A very nice feature of Netlify is automatic detection of forms on your website and capture of the submissions. No need to spin up a database or notification system!

Forms are easy to write in HTML, but we will likely need to add additional CSS to make it look pretty. For my purposes, I wanted something that followed the same Material Design principles as the rest of the website, so I hack&pasted some CSS that does the job (credit to this pen for getting me most of the way). You can see the final result here and the source HTML here.

Including extra CSS for your site is as easy as adding the extra_css block to your mkdocs.yml, which you can see in the gist I linked above. Once you’ve done that, you’ll be all set.