Use case: Create your own CSS styled blog with Amplenote

If you're tired of the janky WYSIWYG editor provided by your blogging platform of choice, you might be curious how to use Amplenote to author blog posts that update in real time. In this article, we'll showcase the steps to publish a note from Amplenote to Wordpress or your blogging platform of choice, using a custom stylesheet that emulates the look and feel of Medium.com.


Expect it to take around 10-15 minutes to get your blog fully setup for publishing styled notes from Amplenote, depending on your fluency with uploads and blogging platforms. We'll walk you through the process below.


linkExamples

Here are a few example blogs that use Amplenote for publishing:

GitClear blog. A developer learning and productivity tool that has used Amplenote for all its blogs since 2019.

bill.harding.blog. A developer interest blog, best known for its "Linux touchpad like a Macbook Pro" project.

Noteapps.info blog. A note app feature comparison index.

Amplenote's own blog. Of course our own blog is also powered by notes, though this implementation is a setup differently than will be described below, since it relies on server-side rendering

The biggest benefit to using Amplenote as a blogging platform: when you realize a link or screenshot needs to be updated, or some other material change needs to happen to the blog, the process of updating the blog post is as simple as opening a note in one's notebook and changing the link/image/word in question. There is no process of logging in to Wordpress, finding one's list of blog posts, opening it for edit, publish, edit, publish, edit, as you polish it to final form.


linkAdd the custom stylesheet as a file hosted on your blog

To publish an embedded note with Medium-inspired styling, you need a stylesheet file that exists on your blog's domain with the proper CSS rules. Here is the content of the stylesheet you will be adding:


/* Extracted from Medium in 2020 */
.ample-editor.readonly {
  width: 100%;
  margin: 0 auto;
  padding: 35px 20px 25px;
  border-top: 1px solid #e0e4eb; /* $default-border-color */
  line-height: 1.5;
}

@media only screen and (min-width: 600px) {
  .ample-editor.readonly {
    width: 95%;
    max-width: 750px;
    padding-left: 0;
    padding-right: 0;
  }
}

.ample-editor.readonly .ProseMirror {
  font-family: Georgia, Helvetica, Arial, "Helvetica Neue", sans-serif; /* $blog-font-family */
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  white-space: normal;
}

@media only screen and (min-width: 600px) {
  .ample-editor.readonly .ProseMirror {
    font-size: 21px;
  }
}

.ample-editor.readonly h1, h2, h3, h4, h1.heading, h2.heading, h3.heading, h4.heading {
  font-family: Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

.ample-editor.readonly h1, h1.heading {
  font-size: 26px;
}

.ample-editor.readonly h2, h2.heading {
  font-size: 24px;
}

.ample-editor.readonly h3, h3.heading {
  font-size: 21px;
}

.ample-editor.readonly h4, h4.heading {
  font-size: 18px;
}

.ample-editor.readonly b, strong {
  font-weight: 600;
}

.ample-editor.readonly p, .paragraph {
  margin: 0; /* Since AN inserts duplicate p tags between paragraph */
  letter-spacing: -0.004em;
}

.ample-editor.readonly blockquote {
  border-left: 3px solid #e0e4eb;
  padding-left: 20px;
  color: #757575;
}

.ample-editor.readonly ul li {
  display: block; /* Default display for AN is "list-item" which duplicates the li's disc for reasons WBH doesn't understand */
  margin-top: 1.05em;
  margin-left: 15px;
  margin-bottom: -0.46em;
}

.ample-editor.readonly a.link {
  display: inline;
  align-items: center;
}

.ample-editor.readonly a.link > span {
  margin-right: 0;
}

.ample-editor.readonly a.link > .icon {
  position: relative;
  top: 5px;
  height: 22px;
  margin-left: 0;
}

.ample-editor.readonly .promo-banner {
  width: 100%;
  margin: 0 auto;
  padding: 35px 20px 25px;
  line-height: 1.5;
}

@media only screen and (min-width: 600px) {
  .promo-banner {
    width: 95%;
    margin: 0 auto;
    max-width: 750px;
  }
}


You can also download this stylesheet as a file from GitClear.


This stylesheet content needs to be uploaded to your blog host. This can be accomplished by using the File Manager or an FTP/SFTP tool provided by your host. The exact path through which a stylesheet gets uploaded will vary by domain host, but we'll review a typical upload process in the following section.


linkUpload the stylesheet file to your host

Almost all blog hosts, like GoDaddy, offer a "File Manager" or "FTP Upload" tool. This will often be hosted from within a utility called "cPanel." It might look something like this:




Once you're in the File Manager, you want to navigate to a public directory (or a public/stylesheets directory, if it exists). It might look something like this:




So in this example case, if you had named your stylesheet file blog_style.css (like the GitClear stylesheet) and uploaded it to the stylesheets directory, then the full path to your CSS file would be https://www.my-web-domain.com/stylesheets/blog_style.css. This is the path you will need to enter when you publish your note, so save it somewhere easy to find later.


linkSet up the embedded note

At this point, you've done with the hard part. 💪 Now you just take the path to the stylesheet you uploaded, and enter it into Amplenote's "Embed" Note Content" dialog. Assuming that your domain is www.my-web-domain.com and your stylesheet is located at stylesheets/blog_style.css, then this is how your embed options would be configured:




linkPost the blog

To post the blog, just paste the HTML that you had copied from the Amplenote embed dialog. If you're using the default Wordpress editor, you'll need to ensure that the text you're pasting is interpreted as HTML. This requires changing the block to be "Custom HTML":




Which lets us paste the the final result:



From there, hit "Publish" and the note you created will be published as a live-updating blog post! From that point forward, any time you make a change to the note in Amplenote, your blog post will automatically update in real time. 🎉