Morpheus

The next generation web publishing platform

[](http://travis-ci.org/vesparny/morpheus) [](https://david-dm.org/vesparny/morpheus#info=devDependencies "Dependency status") [](https://david-dm.org/vesparny/morpheus#info=dependencies "Dependency status")

The idea is to create a new isomorphic web publishing platform, with the speed of a single page application, but server side rendered on the first load.

Built with React, express and browserify.

Working demo

You can see Morpheus running on my own website.

Articles

• Introducing Morpheus

What and Why

At the time being, developers are building entire applications in the browser using JavaScript. The big part of the logic is living on the client and it talks to the server to an API.

Once the application is fully loaded, the user can gain a good experience navigating between pages without the need of fully reloading each time.

This is good, what happens when your website is run by a crawler (google bot or whatever)? If the website can only be executed on the client it won't be able to serve HTML to crawlers, and this will have negative impacts on SEO.

This is why Morpheus is totally rendered on the server on the first load. Once done, React will attach events to the DOM, and the user will feel the benefits of a single page application, without having to wait for tedious spinners before seeing the content.

Getting started

Morpheus doesn't need a database, it just renders static markdown files.

• Choose a name for you website, for this example we will call it my-website. Replace it with your name in the following commands.
• Create a directory for your blog and create a new git repo

mkdir my-website && cd my-website
git init

• Checkout the Morpheus repository

git remote add morpheus -m master https://github.com/vesparny/morpheus.git
git pull -s recursive -X theirs morpheus master

• Install the dependencies, create the example post and run the application

npm install
gulp install #this is important, it will create an example post.
gulp watch

• Access your fresh-new website at http://localhost:3000

• Create a new post or page inside the content/posts or content/pages folder, then commit changes. Please note that the filename structure must follow the convention yyyy-mm-dd-HHmmss-post-title.md Any page or post that contains a YAML front matter block will be processed by Morpheus as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Take a look at the example post and page for more details.

If you have an existing repository

• Add the Morpheus remote to your local repository, then merge its master branch with your local branch.

git remote add morpheus https://github.com/vesparny/morpheus.git
git fetch morpheus
git checkout master
git merge morpheus/master

What’s done

• The basic technology stack (React express and browserify)
• Post and pages displaying, markdown render, posts pagination.
• Server side rendering.
• Comments managed with Disqus.
• Configurable permalinks.
• fully working default theme (it's called blablabla)
• RSS support

What’s next

Below is a list of the things to work on immediately, with links to the relevant discussion.

• Logo design (#3)
• Sitemap generation (#5)
• Authors page (#6)
• Tag listing page (#7)
• Setup testing (#8)
• Reserve some routes for future development (#9)
• Split react components (#10)
• Create wiki taking inspiration from Jekyll (#11)
• Create beautiful 404 and 500 pages and handle error also on the frontend (#12)
• Split Morpheus in smaller npm packages (#13)
• Publish to npm (#14)

Please feel free to join the discussions ;)

Run in production

• build the app for production, commit your production ready build, and run it.

gulp build --env=production
git add -A
git commit -m "ready"
NODE_ENV=production node server.js

Configuration

You can also override configuration in the proper environment-specific configuration file inside the config folder. Below the production config file I use for hosting my website on OpenShift PaaS.

'use strict';

var path = require('path');

module.exports = {
  log: {
    level: 'error',
    file: path.resolve(process.env.OPENSHIFT_DATA_DIR || '', 'log.log'),
  },
  debug: false,
  siteUrl: 'https://alessandro.arnodo.net',
  useSSL: true,
  port: process.env.OPENSHIFT_NODEJS_PORT || 3000,
  ip: process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1',
  disqusComments: 'arnodo',
  siteTitle: 'Alessandro Arnodo',
  siteDescription: '- Just another code monkey -',
};

Contributing

PR and issues reporting are always welcome :) See more in CONTRIBUTING.md file.

Contributors

All this wouldn't have been possible without these great contributors! So THANK YOU!

License

Morpheus is open-source software released under the MIT license.

Changelog

See CHANGELOG.md file.

Stability

Currently Morpheus is in its very early stages, and it isn’t pretty. It is far from usable. Set it up only if you know what you’re doing, and expect it to break a lot.