未加星标

Building a CMS-powered blog in Meteor with a headless CMS

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Building a CMS-powered blog in Meteor with a headless CMS

You know the story… you’ve built a great MeteorJS website for your client and they’d like a blog that lives in a subdirectory (not a subdomain) for SEO purposes.

In this tutorial we are going to show you how to build a CMS-powered blog using Meteor and a headless CMS. The finished code for this tutorial is available on Github .

What is a headlessCMS?

A headless CMS is an API-based CMS that lets you build CMS-powered apps using any programming language. You can think of a headless CMS as similar to WordPress except that you can build the front-end of your website in your technology of choice and then plug-in dynamic content using an API.

In this tutorial we’ll use ButterCMS , a headless CMS and blogging engine. You can try ButterCMS yourself by signing in with Github .

Getting Started

If you’re new to Meteor, check out theirquick start guide or follow the steps below.

Install Meteor:

curl https://install.meteor.com/ | sh

Create a new app and make sure it runs:

meteor create meteor-cms-blog cd meteor-cms-blog meteor npm install meteor

Open your web browser and go to http://localhost:3000 to see the app running.

Creating theblog

First install the ButterCMS Node.js API client :

meteor npm install buttercms

We’ll also use Iron Router to setup our blog routes:

meteor add iron:router

We’ll then create some basic routes and templates. We’re using an API token for a ButterCMS test account.

First we’ll add routes to client/main.js :

import Butter from 'buttercms'; import './main.html'; const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd'); Router.route('/', function() {
this.render("Home")
}); Router.route('/blog', function() {
const resp = await butter.post.list({page: 1, page_size: 10}
this.render('Blog', {data: {posts: resp.data.data}});
}); Router.route('/blog/:slug', function() {
const slug = this.params.slug; const resp = await butter.post.retrieve(slug)
const post = resp.data.data; this.render('Post', {data: {post: post}});
});

Next we’ll add templates to client/main.html :

<head> <title>Meteor Blog</title> </head> <body> </body> <template name="home"> <a href="/blog">View blog</a> </template> <template name="blog"> <h2>Blog Posts</h2> {{#each posts}} <div> <a href="/blog/{{slug}}">{{title}}</a> </div> {{/each}} </template> <template name="post"> <h2>{{post.title}}</h2> {{{post.body}}} </template>

Let’s take a closer look at one of our routes to see what’s happening.

Router.route('/blog/:slug', function() {
const slug = this.params.slug; const resp = await butter.post.retrieve(slug)
const post = resp.data.data; this.render('Post', {data: {post: post}});
});

In 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 to fetch the post and render it.

SEO

Our blog is setup, but crawlers from search engines and social networks do not execute javascript so our blog has terrible SEO.

First we’ll install the ms-seo helper package and make sure we have good HTML titles, descriptions, and meta tags.

meteor add check meteor add manuelschoebel:ms-seo

ms-seo provides a simple SEO.set method for configuring tags:

Router.route('/blog/:slug', function() {
const slug = this.params.slug; const resp = await butter.post.retrieve(slug)
const post = response.data.data; SEO.set({ title: post.seo_title, meta: { description: post.meta_description }, rel_author: 'https://www.google.com/+ButterCMS', og: { 'title': post.seo_title, 'description': post.meta_description, 'image': post.featured_image } }); this.render('Post', {data: {post: post}});
});

You can verify that tags are getting set properly by inspecting the DOM.

Finally, we want to enable server-side rendering of our blog so that its crawl-able by search engines and social networks like Twitter.

The easiest way to do this is to use Meteor’s hosting platform, Galaxy , which provides an integrated pre-rendering service (Prerender.io). The Prerender.io service is included as part of Galaxy at no additional cost.

Follow Meteor’sguide for deploying to Galaxy. To turn on the built-in Prerender.io integration, add the Galaxy SEO package:

meteor add mdg:seo

If 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 or Flow Router’s alpha release of SSR support.

Wrap Up

Meteor is a powerful development platform that solves a lot of pains of building Javascript apps for web, mobile, and desktop. However there aren’t many CMS options available for building CMS-powered features in Meteor like blogs, FAQS, and templated pages. A headless CMS like ButterCMS let you easily build CMS-powered apps in Meteor.

We hope you enjoyed this tutorial. If you have any questions about setting up your ButterCMS-powered Meteor app reach out to me at [email protected] or on Twitter .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: SEOGitJavaHTMLNode.jsTwitterWord
分页:12
转载请注明
本文标题:Building a CMS-powered blog in Meteor with a headless CMS
本站链接:http://www.codesec.net/view/535045.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(86)