What are you using for a blog?

Just wondering what everyone is using as an add-on blog should a client request one?

Medium is the best option

2 Likes

I think we need to make a feature request ha ha!!

4 Likes

Sadly external stand-alone solution (wordpress in my case).

After years with Wordpress I switched to Ghost, Hugo Eleventy and Gatsby is an option also.

Hi @antony_northcutt you could always create a blog using something like Medium and embed the RSS feed on your Readymag project using an RSS to JSON API.

The feed would take you to the blog externally but it would give you the overall blog feed that you can embed on your project and would update automatically. I’ve attached a link to a test project along with the code — I hope this is solution to your question.

I’ve marked up some of the different bits in the script but adjusting the styling. To adjust the number of posts displayed in the feed, see the ‘RETURN K’ at the end of script that controls the number of posts displayed so adjust this to make it fit your project page.

There are ways to show this blog in columns but this is just the basics to get it working!

<section id="blog" class="section blog">
  <div class="container">

    <div id="blogContent" class="section-content">
      <div id="jsonContent" class="row"></div>
    </div>
    <!-- /#blogContent-->

  </div>
  <!-- /.container-->
</section>
<!-- Blog-->

<style>
  .blog {
    padding: 20px;
    font-family: courier, monospace;
    font-size: 12px;
  }

  .blog .blog-post {
    margin-bottom: 100px;
    width: 100%;
  }

  .blog .blog-post .blog-element {
    overflow: hidden;
  }

  .blog .blog-post .blog-element .img-responsive {
    width: 100%;
  }

  .blog .blog-post .blog-content h3 {
    color: black;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .continue {
    margin-top: 30px;
  }

  .continue a {
    border: 1px solid black;
    padding: 10px;
    background: 0;
    color: black;
    text-decoration: none;
  }

  .continue a:hover {
    text-decoration: underline;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(function() {
    var $content = $('#jsonContent');
    var data = {
      rss_url: 'https://medium.com/feed/@readymag'
    };
    $.get('https://api.rss2json.com/v1/api.json', data, function(response) {
      if (response.status == 'ok') {
        var output = '';
        var posts = $.map(response.items, function(post, i) {
          var postCategories = response.items[i].categories
          if (postCategories.length !== 0) {
            return post;
          }
        });
        $.each(response.items, function(k, item) {
          var visibleSm;
          if (k < 12) {
            visibleSm = '';
          } else {
            visibleSm = ' visible-sm';
          }
          output += '<div "' + visibleSm + '">';
          output += '<div class="blog-post"><div>';
          // output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
          var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
          var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
          var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
          var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
          var src = item.description.substring(srcStart, srcEnd); // Extract just the URL

          output += '<div class="blog-element"><img class="img-responsive" src="' + src + '"></div></div>'; //IMAGE
          output += '<div class="blog-content"><h3>' + item.title + '</h3>'; // TITLE
          output += '<div class="post-meta"><span>By ' + item.author + '</span></div>'; // AUTHOR 

          var yourString = item.description.replace(/<img[^>]*>/g, ""); //replace with your string.
          var maxLength = 120 // maximum number of characters to extract
          var trimmedString = yourString.substr(0, maxLength); //trim the string to the maximum length
          trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))) //re-trim if we are in the middle of a word

          output += '<p>' + trimmedString + '...</p>';
          output += '<p class="continue"><a href="' + item.link + '" target="_blank"> Continue Reading </a></p>'; // CONTINUE READING TEXT
          output += '</div></div></div>';

          return k < 5; // RETURN NUMBER OF BLOGS CHANGE THIS NUMBER TO MAKE IT FIT YOUR PROJECT PAGE LENGTH
        });
        $content.html(output);
      }
    });
  });
</script>
5 Likes

Oh wow this is amazing. Thank you so much for taking the time on this. I think I will go down this path where the client is not so much worried about SEO but just providing content for their site users.

I’m thinking that RM + blog for SEO isn’t a good mix right now? Unless one exports the code and manually adds a blog.

Thanks again!!

1 Like

I once set up a blog with the flat-file-cms grav.
Its free, fast and you dont have to deal with sql databasestuff.
I then implemented it into a 100%wide/height centerfixed iframe on the RM project.

This worked quite good but there for sure is some work to do on the gravsite to fit the blog onto the RM styling of your page. But its basic css work, allthough a bit confusing to dig through it and find the right values.

2 Likes

Nice will check this out!

Hi all. I just wanted to see if anybody has found any newer options for blogging since this topic was created?.. Seeing that RM blog migrated from Medium to something else, makes me wonder 1. What is RM using for blogging now? (I can’t figure out) 2. Will RM introduce something for creating blogs anytime soon? I appreciated any feedback. Thanks!