How to create an RSS feed for your site
A couple days ago I wrote up a guide on how to start using RSS feeds (and why you should be using them!) but I think it's also equally important to explain how you can start your own RSS feed for your own site. Because while Neocities does have native RSS, allowing anyone to get notified whenever your site updates without you needing to update the RSS feed manually, the Neocities native RSS is very basic and not very detailed. Which may not be a problem for you, perhaps you don't care about that. In which case there's no need to create a custom RSS feed! But if you want to be able to customize what your RSS feed followers see in their feed when your site updates, then this guide is for you.
How to create a feed
Creating an RSS feed is really very simple. It's based on XML, which is similar to HTML in terms of structure. If you're familiar with the basics of HTML, it should be easy for you to get the basics of XML. Even if you aren't, learning is not too difficult. But if you really hate writing code, you can use the free app RSS builder (found here on SourceForge) to create your feed. This guide will focus on writing the XML manually, since that's how I do it, and RSS builder is already quite intuitive, but I recommend reading this section even if you're using RSS Builder, because it will provide helpful info on the different fields you see within RSS Builder.
Basic XML structure
XML looks quite similar to HTML, but it has some structural differences. Let's start with the absolute bare bones you need for your XML RSS document. First we have to declare that we are using XML, then we have to declare that we are using RSS.
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
Feed information and entries go here!
</channel>
</rss>Everything you add from here on is going to go within the channel tags. You can only have one channel per RSS XML document, in the same way you can only have one body to your HTML document.
Next, you need to add some information about your RSS feed. The following are required fields:
<title>The title of your feed</title>
<link>the URL of your website on which the feed is found</link>
<description>A short description of the feed</description>The following are some optional fields that you might want to also include. You don't have to include these if you don't want to. For a full list of optional fields you can choose to include in your feed information, click here for the RSS board specifications.
<webMaster>Your email address</webMaster>
<language>The language your feed is in (e.g. en-us for American English)</language>
<copyright>Copyright information for your feed.</copyright>Once you have the information for your feed, then you can start adding entries. Entries are surrounded by <item></item> tags. Entries should be placed within the channel tags, underneath the feed information, and are typically placed in reverse chronological order. Here's an example of a couple of entries:
<item>
<title>Entry 2 Title</title>
<pubDate>Wed, 15 Feb 2023 15:36:07 GMT</pubDate>
<link>https://mayfrogs.neocities.org/</link>
<description>Entry 2 Content</description>
</item>
<item>
<title>Entry 1 Title</title>
<pubDate>Wed, 14 Feb 2023 13:25:45 GMT</pubDate>
<link>https://mayfrogs.neocities.org/</link>
<description>Entry 1 Content</description>
</item>Please take special note of the formatting of the date. It should be: three letter abbreviation of the day, followed by the day of the month, following by a three letter abbreviation of the month, followed by the year, then time in HH:MM:SS format, and the time zone abbreviation OR UTC offset.
For the link, I usually like to link to the page that was updated. If I updated more than one page, I link to the one that received the most major update. Otherwise, I default to linking to the front page of my website.
For a full list of information you can include in an entry, see the RSS board specifications.
One thing worth noting is that the <description> tag does not by default allow use of HTML. But let's say you want to include an unordered list in the content of your feed entry; to do that, you'll need to use a <![CDATA[]]>tag. For example:
<description>
<![CDATA[<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>]]>
</description>The CDATA tag essentially tells the XML that anything within the double brackets is to be parsed as text instead of as XML code. From there, feed readers will be able to pick up the HTML and parse it as HTML.
Once you have all your feed information and entries, save the file with the extension .xml, and upload the file to your site! Whenever you want to add a new entry, you can simply edit the XML file.
But you're not quite done yet; Once you've created and uploaded your RSS feed, you need to provide a way for people to find it!
Adding the RSS feed to your website
There are two ways to make an RSS feed available for people to subscribe to: first, you can make the feed discoverable in the page itself for feed scanners, or you can add a link to the RSS somewhere in your menu, sidebar(s) or footer so that people can add the link to their readers manually. I recommend doing both in order to make it easy for people to subscribe to your feed no matter how they prefer to add it. Adding a link is self explanatory, but here's how you make your feed discoverable:
Making your feed discoverable by feed readers is very easy, it only requires adding one line of code to the HTML of the page or pages you want to make it discoverable on. The following line of code should be placed within your <head> tags:
<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="Feed title">Simply replace the href content with the location of the xml file on your site, and the title content with the default title you want your RSS feed to have when people add it to their feed readers. And that's it! Your feed is now discoverable on your page.
Syncing your feed with the updates section on your website
Say for example you have a section on your website that details all the updates you've made, and you have an RSS feed, but you don't want to be bothered writing up info to go in both the RSS feed AND the updates section. In that situation, you can do what I did: embed the RSS feed into my updates section. To do this, I slightly modified the code from the RSS news feed project on Github, found here.
The first thing you'll want to do is put the following code in the spot where you want your site updates to go:
<div id="feed-textarea">
<span></span>
</div>Next, go to this link here, right click, and select "Save page as". Save the file, then upload it to your site. Put the following code in the same HTML document that your updates section is in, and make sure to place it somewhere after the above code, either at the end of the document, or immediately after it.
<script src="/scripts/feednami-client-v1.1.js"></script>Replace the src content with the location of the feednami js file on your site.
Next, create a new .js file. You can call it whatever you like, I called mine rssapp.js. Insert the following code:
let url = '(https://(your site domain).neocities.org/rss.xml)'; // replace this with the FULL url of your rss feed
const textarea = document.querySelector('#feed-textarea');
feednami.load(url)
.then(feed => {
textarea.value = '';
for(let entry of feed.entries){
//create a list element
let span = document.createElement('span');
//add HTML content to list items
span.innerHTML = `<p><a href="${entry.link}">${entry.title}</a></p>${entry.description}`;
//append HTML content to list
textarea.appendChild(span);
}
});The above code displays the title of each entry as a link to the entry's link, followed by the entry content. However, you can customize the formatting of your feed by changing the html inside the backticks under span.innerHTML. To add other information from the entry, you can also add more tags for entry fields, for example, if you wanted to include the pubDate, you could add an ${entry.pubDate} tag.
Once you've finished creating your javascript file, saved it as a .js file, and uploaded it to your site, you'll want to add the following code underneath the feednami script src:
<script src="/scripts/rssapp.js"></script>Replace the src content with the location and name of the js file you just created on your site.
Adding styling to your feed
Technically, you don't really need styling on your RSS feed. Most people aren't going to see it unless they go directly to the rss link, because the styling doesn't affect the actual entries as they appear in a feed reader. But if you're like me and compulsively need to make everything look nice, there are ways to add styling to your rss feed.
XML has it's own special styling language called XSL, but you can also attach a css stylesheet to an XML file. I'm going to be focusing on CSS, because it's what I already know, and it's not really worth the effort to learn a whole new styling language for something that's not going to be seen by the majority of users.
Writing the CSS for the RSS feed is about the same as writing CSS for HTML, the only thing you really need to learn how to do is link the stylesheet to your XML file. To do that, simply put the following code underneath the XML declaration in your XML file.
<?xml-stylesheet type="text/css" href="/styles/rss-styles.css"?>Once again, you'll want to replace the href content with the location of the stylesheet on your site.
Conclusion
While Neocities does have native feeds, making your own feed for your site allows you to create a more detailed and personal feed that you can customize how you like. It's also very easy, especially if you keep it really simple and skip the optional stuff. If you can do it, I highly recommend it, and I'm not even just saying that because RSS feeds are my favorite way to follow things (okay, maybe I am a little bit)