Copied to clipboard

Displaying a Dreamwidth blog on your site

Because of the nature of static websites, it’s not the easiest thing to make a blog. You can do it manually by making each blog entry its own page, and you can speed up the process by copying a template for each page.

But here’s a much easier way! The kicker is that your blog isn’t really on Neocities – it’s on Dreamwidth which is free and lets you just blog, without worrying out about the code management.

Limitations:

  • Dreamwidth feeds are only checked for updates once an hour – which means your feed is updated once per hour and if you go back and make a change, it won’t update until it checks again.
  • Only the most recent 14 entries you create will appear.
  • Individual post formatting isn’t saved (like bold, italics, etc.)

Advantages:

  • You get to work with an actual blogging interface rather than coding each page manually.
  • There are less steps to post an entry (than manually making pages).
  • You also get to be a part of the dreamwidth community.

Sign up for Dreamwidth and grab the RSS feed

  1. Sign up for a free account on Dreamwidth
  2. Hover over Create and choose Post Entry to make a test entry.
  3. Visit your blog at username.dreamwidth.org to make sure your post is there. Don’t worry about formatting it because none of that will come through.
  4. Open a new browser tab and visit this URL but change username to your dreamwidth username: https://username.dreamwidth.org/data/rss
  5. This is an RSS feed which contains your Dreamwidth blog entries. Keep this tab open because we’re going to need this URL in a bit.
  6. Open a new tab and go to FeedRoll’s RSS Viewer.
  7. Paste your Dreamwidth RSS feed URL into the URL field.
  8. Select the Preview Feed button on the right to preview the feed in a pop-up window.
  9. In the current window, settings will appear for you to customize the feed.

FeedRoll settings

  • Show channel? - These options determine which parts of the feed to display.
  • Number of items to display - This determines how many entries to display.
  • Show/Hide item descriptions - "Descriptions" refers to the content of your entries. If you choose to hide them, it will only show links to your entries on Dreamwidth.
  • Show item author? - Display your Dreamwidth username.
  • Use HTML in item display? - This should be set to Yes
  • Show item posting date? - Display the date of the post.

Remember that you can select the Preview button at any time to preview the changes you've selected. The preview does not update automatically. To update it, select the button again.

When finished making changes, select the Generate Javascript button to generate the code.

Placing the Javascript on a webpage

  1. Create a new HTML file.
  2. Paste in the FeedRoll generated Javascript someplace on your page. Here is a CodePen demonstrating how that would look:

    3. See the Pen RSS Guide 1 by Sadness (@sadness97) on CodePen.

    It's looking a little messy, but we can clean it up with CSS.

Styling the feed

I created some very basic styles to clean things up a bit. Here is the CSS code I used:

                /* hides the feed title */
p.rss-title {
    display:none;
}

li.rss-item {
    list-style-type:none;   /* this removes the bullet points */
    margin-bottom:20px; /* adds spacing under entry content */
}

/* this styles the blog title link */
li.rss-item a {
    font-weight:bold;
    font-size:20px;
    text-decoration:none; /* removes underline */
}

/* this styles the date */
.rss-date {
    display:inline-block; /* need this to add padding around each number */
    padding-top:10px;
    padding-bottom:10px;
    font-style:italic;
}

/* hides the weird # of comments (displayed as 0 in demo) */
a.rss-item:last-child {
    display:none;
}

Remember that CSS goes inside of <style></style> tags when used in an .html file.

Here is a preview:

See the Pen Sadness' RSS Guide 3 (No Comments) by Sadness (@sadness97) on CodePen.

You can build on this existing CSS to tweak the style further, if you wish.

How it works

  • You create a new journal entry via Dreamwidth.
  • Once an hour, a service checks your blog to see if you've updated. If so, it adds the entry to your RSS feed.
  • As soon as the entry reaches the RSS feed, it is displayed on your website via the FeedRoll code.
  • Only entries from the previous 14 days will be included in the feed. Entries older than that, will not.