Unveiling the RSS Medium Blog Viewer: Transform Your Medium Blog into a Personalized Website

Home Screen of RSS Medium Blog Viewer

Introduction

Discover the RSS Medium Blog Viewer, an innovative tool transforming Medium blogs into personalized, self-hosted websites. This application is perfect for bloggers seeking to merge Medium’s audience reach with unique personal branding on their sites.

The Need

Medium offers a vast audience and a user-friendly interface, but its options for personalization are limited. The RSS Medium Blog Viewer tackles this issue by allowing users to showcase their Medium content on their personal websites, blending Medium’s simplicity with their unique style. Additionally, to add a personalized touch such as your own domain, users typically need to pay for this feature on Medium. This tool provides an alternative, more customizable approach to personal branding for bloggers.

In-Depth Technology Overview:

1. Ember.js: At the core, it provides an efficient, scalable single-page application framework, enhancing user experience and app performance.
2. Bootstrap: The UI framework for the tool to make it responsive and aesthetically pleasing.
3. rss2json: Converts Medium RSS feeds into JSON format, making integrating and displaying blog posts on the website easy.

Blog View of RSS Medium Blog Viewer after clicking on Read More

Detailed Setup Guide

Installation

Clone this repository and install the required dependencies using the commands below:

git clone <repository-url>
cd rss-medium-blog-viewer
npm install

Configuration

The app requires some configs in the environment variable file (.env) that are required for retrieving the blogs:

PAGE_TITLE (required)

• This is needed for setting the page title.

ICON_URL

• This is only needed to set an image as your logo on the page.
• It can be a local file that is uploaded to the public folder or an online link.
• If not set, it will use the title of the page as the default.

MEDIUM_URL (required)

• Used to open the original blog on your Medium page.
• Link Examples:

https://medium.com/@zfir

or

https://zfir.medium.com/

MEDIUM_FEED_URL (required)

• Used to retrieve the Medium feed in RSS format.
• NOTE: It is not the same as the MEDIUM_URL.
• Link Example:

https://medium.com/feed/@zfir

RSS_2_JSON_API_KEY (required)

• This is used to convert the blogs retrieved from the feed to a JSON format.
• Sign up for a key on this link.

.env File

The .env file should be located at the root location of the project. Your .env file should be like this:

PAGE_TITLE="Zafir's Blogs"
ICON_URL=https://miro.medium.com/v2/resize:fill:64:64/1*NxSbBQe2m7Hab7G4KljJhA.jpeg
MEDIUM_URL=https://zfir.medium.com/
MEDIUM_FEED_URL=https://medium.com/feed/@zfir
RSS_2_JSON_API_KEY=<YOUR_API_KEY>

Deployment

Local

npm exec ember build

Production

npm run build

Contributions

Whether it’s improving the code, suggesting features, or reporting bugs, your input is invaluable. Join us in enhancing this tool and making it more versatile for bloggers worldwide. Read the README on how to deploy this tool locally on your machine.

Conclusion

The RSS Medium Blog Viewer is an excellent resource for enhancing the personal branding of your Medium blogs. This tool gives bloggers the autonomy to display their content in a way that combines the ease of Medium with their unique style, offering a personalized blogging experience.

Github

GitHub - zfir-dev/rss-medium-blog-viewer: Convert your medium blog to your own personalised blog

Demo

RssMediumBlogViewer