{"id":15013448,"url":"https://github.com/buttercms/meteor-cms-blog","last_synced_at":"2026-03-05T17:44:02.537Z","repository":{"id":147580738,"uuid":"80472092","full_name":"ButterCMS/meteor-cms-blog","owner":"ButterCMS","description":"Meteor CMS-powered blog example code for https://buttercms.com/blog/meteor-cms-blog-tutorial","archived":false,"fork":false,"pushed_at":"2022-12-19T16:13:54.000Z","size":9,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T03:15:56.600Z","etag":null,"topics":["cms","meteor","meteorjs","nodejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ButterCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-30T22:53:19.000Z","updated_at":"2022-12-19T16:13:58.000Z","dependencies_parsed_at":"2023-05-31T16:45:33.197Z","dependency_job_id":null,"html_url":"https://github.com/ButterCMS/meteor-cms-blog","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.4,"last_synced_commit":"2b48766b0330f98f6d2c69c55b389e4b7acc4c74"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fmeteor-cms-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fmeteor-cms-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fmeteor-cms-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fmeteor-cms-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ButterCMS","download_url":"https://codeload.github.com/ButterCMS/meteor-cms-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519468,"owners_count":21117757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","meteor","meteorjs","nodejs"],"created_at":"2024-09-24T19:44:17.820Z","updated_at":"2026-03-05T17:44:02.472Z","avatar_url":"https://github.com/ButterCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MeteorJS CMS-powered blog\n\nYou know the story, you've built a great MeteorJS website for your client and they want a blog that lives in a subdirectory (not a subdomain) for SEO purposes.\n\nIn this tutorial I’m going to show you how to build a CMS-powered blog using MeteorJS and ButterCMS. The finished code for this tutorial is [available on Github](https://github.com/buttercms/meteor-cms-blog).\n\n[ButterCMS](https://buttercms.com) is a hosted API-based CMS and blog engine that lets you build CMS-powered apps using any programming language. You can think of Butter as being similar to WordPress except that you build your website in your language of choice and then plug-in the dynamic content using an API. If you want to try Butter for yourself, [sign in with Github](https://buttercms.com/github/oauth).\n\n## Important Notice\nThis project was created as an example use case of ButterCMS in conjunction with a blog article, [How to Build a CMS-Powered Blog with MeteorJS](https://buttercms.com/blog/meteor-cms-blog-tutorial/), and will not be actively maintained. \n\nIf you’re interested in exploring the best, most up-to-date way to integrate Butter into javascript frameworks like Meteor, you can check out the following resources:\n\n### Starter Projects\n\nThe following turn-key starters are fully integrated with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.\n- [Angular Starter](https://buttercms.com/starters/angular-starter-project/)\n- [React Starter](https://buttercms.com/starters/react-starter-project/)\n- [Vue.js Starter](https://buttercms.com/starters/vuejs-starter-project/)\n- Or see a list of all our [currently-maintained starters](https://buttercms.com/starters/). (Over a dozen and counting!)\n\n### Other Resources\n- Check out the [official ButterCMS Docs](https://buttercms.com/docs/)\n- Check out the [official ButterCMS API docs](https://buttercms.com/docs/api/)\n\n## Getting Started\n\nIf you're new to MeteorJS, check out their [quick start guide](https://guide.meteor.com/#quickstart) or follow the steps below.\n\nInstall Meteor:\n```\ncurl https://install.meteor.com/ | sh\n```\n\nCreate a new app and make sure it runs:\n```\nmeteor create meteor-cms-blog\ncd meteor-cms-blog\nmeteor npm install\nmeteor\n```\n\nOpen your web browser and go to `http://localhost:3000` to see the app running.\n\n## Creating the blog\n\nFirst install the [ButterCMS Node.js API client](https://github.com/buttercms/buttercms-node):\n\n```\nmeteor npm install buttercms\n```\n\nWe'll also use [Iron Router](https://github.com/iron-meteor/iron-router/) to setup our blog routes:\n```\nmeteor add iron:router\n```\n\nWe'll then create some basic routes and templates. We're using an API token for a ButterCMS test account. [Sign in with Github](https://buttercms.com/github/oauth) to create your own account and API token.\n\n`client/main.js`:\n\n```\nimport Butter from 'buttercms';\nimport './main.html';\n\nconst butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd');\n\nRouter.route('/', function() {\n  this.render(\"Home\")\n});\n\nRouter.route('/blog', function() {\n  let that = this;\n\n  butter.post.list({page: 1, page_size: 10}).then(function(response) {\n    that.render('Blog', {data: {posts: response.data.data}});\n  });\n});\n\nRouter.route('/blog/:slug', function() {\n  let slug = this.params.slug;\n  let that = this;\n\n  butter.post.retrieve(slug).then(function(response) {\n    let post = response.data.data;\n\n    that.render('Post', {data: {post: post}});\n  });\n});\n```\n\n`client/main.html`:\n\n```\n\u003chead\u003e\n  \u003ctitle\u003eMeteor Blog\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c/body\u003e\n\n\u003ctemplate name=\"home\"\u003e\n  \u003ca href=\"/blog\"\u003eView blog\u003c/a\u003e\n\u003c/template\u003e\n\n\u003ctemplate name=\"blog\"\u003e\n\u003ch2\u003eBlog Posts\u003c/h2\u003e\n{{#each posts}}\n  \u003cdiv\u003e\n    \u003ca href=\"/blog/{{slug}}\"\u003e{{title}}\u003c/a\u003e\n  \u003c/div\u003e\n{{/each}}\n\u003c/template\u003e\n\n\u003ctemplate name=\"post\"\u003e\n  \u003ch2\u003e{{post.title}}\u003c/h2\u003e\n  {{{post.body}}}\n\u003c/template\u003e\n```\n\nLet's take a closer look at one of our routes to see what's happening.\n\n```\nRouter.route('/blog/:slug', function() {\n  let slug = this.params.slug;\n  let that = this;\n\n  butter.post.retrieve(slug).then(function(response) {\n    let post = response.data.data;\n\n    that.render('Post', {data: {post: post}});\n  });\n});\n```\n\nIn the code above, we create a route for the URL `/blog/:slug` which takes a post slug as a URL parameter, and then uses the slug to make an API request to [ButterCMS](https://buttercms.com) to fetch the post and render it.\n\n## SEO\n\nOur blog is setup, but crawlers from search engines and social networks do not execute Javascript so our blog has terrible SEO.\n\nFirst we'll install the [ms-seo helper package](https://atmospherejs.com/manuelschoebel/ms-seo) and make sure we have good HTML titles, descriptions, and meta tags.\n\n```shell\nmeteor add check\nmeteor add manuelschoebel:ms-seo\n```\n\nms-seo provides a simple `SEO.set` method for configuring tags. You can verify that tags are getting set properly by inspecting the DOM.\n\n```javascript\nRouter.route('/blog/:slug', function() {\n  let slug = this.params.slug;\n  let that = this;\n\n  butter.post.retrieve(slug).then(function(response) {\n    let post = response.data.data;\n\n    SEO.set({\n      title: post.seo_title,\n      meta: {\n        description: post.meta_description\n      },\n      rel_author: 'https://www.google.com/+ButterCMS',\n      og: {\n        'title': post.seo_title,\n        'description': post.meta_description,\n        'image': post.featured_image\n      }\n    });\n\n    that.render('Post', {data: {post: post}});\n  });\n});\n```\n\nFinally, we want to server render our blog so that its crawalable by search engines and social networks like Twitter.\n\nThe easiest way to do this is to use [Meteor's hosting platform, Galaxy](https://www.meteor.com/galaxy/), which provides an integrated pre-rendering service (Prerender.io). The Prerender.io service is included as part of Galaxy at no additional cost.\n\nFollow Meteor's [guide](https://guide.meteor.com/deployment.html#galaxy) for deploying to Galaxy. To turn on the built-in Prerender.io integration, add the [Galaxy SEO](https://atmospherejs.com/mdg/seo) package:\n\n```\nmeteor add mdg:seo\n```\n\nIf you don't want to use Galaxy, you can manually integrate Prerender.io. Another option is implementing server-side rendering into your app. At the time of this writing, server-side rendering isn't natively supported by Meteor, but you can check out [Meteor SSR](https://github.com/meteorhacks/meteor-ssr) or [Flow Router's](https://github.com/kadirahq/flow-router/tree/ssr) alpha release of SSR support.\n\n### Other\n\nView Meteor.JS [Full CMS](https://buttercms.com/meteor-cms/) for other examples of using ButterCMS with Meteor.JS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fmeteor-cms-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttercms%2Fmeteor-cms-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fmeteor-cms-blog/lists"}