Ah, the joy of creating a new website! Seriously, one of the greatest things about the web is how easy it is to start something new. There are numerous tools letting users easily create their own websites, such as Sidengo and Wix (which, incidentally, no longer requires Flash). Many of these tools are aimed at new users creating their first websites. Spinto is a new service that tries a different angle.
It is developer-friendly, with support for Git and SSH, and it is based on Jekyll, a static website generator Ruby coders love. While doing all of this, Spinto also tries to stay appealing to newer users – so you could say this is a service that basically tries to keep everybody happy.
Spinto is currently in beta and can be used freely, but even after they start charging, they say it’ll be easy to export your site and take it elsewhere if you don’t want to pay them.
Getting Up & Running
After logging onto Spinto with your Google account, the first thing the service wants to know is whether or not you’re a “tech person”. Assuming you are, you probably know what Git is, and have a public SSH key. I indeed have a public SSH key, which I pasted into this text box. But Spinto won’t give you any grief if you don’t have such a key, which is nice.
Next, it’s time to create our first website:
Spinto also lets you create a website with the Blueprint or Skeleton CSS frameworks, or a blank website with no code in it at all. Since I just want to kick the tires here, I went with the Example Restaurant website.
Editing Your Website Visually
The site is created instantly, and can be accessed immediately. Above you can see the web interface of Spinto’s editor. On the right sidebar, Spinto lists the Git URL you need for checking out site sources, as well as site information and collaborators. On the left you can see the pages and blog posts.
Let’s edit the Welcome page:
Ooh, a visual editor! Pretty neat for non-technical users. But note that for all of its impressive chrome, the editor’s capabilities are limited. I was unable to move images around by dragging them. The editor did make it easy to change text, as well as replace images. This is nice, because it means you can have a non-technical user edit the text for the website, while a more experienced developer does the CSS.
Spinto’s web interface also lets you edit the HTML directly, but if you’re a developer, I think the chances of you manually editing HTML in the browser are very slim.
Working With Git & Editing Locally
Now let’s look at Spinto from an experienced developer’s perspective. The service makes it very easy to clone your website and work on it from the comfort of your own machine with Git. The Git command line above is lifted directly from Spinto’s documentation, and basically downloads your Spinto website for work. Inside, it looks like this:
The README file makes it clear that we’re working with something based on Jekyll and on the Bootstrap framework (created by Twitter). Now let’s fire up gVim and edit some files:
Inside we see pretty vanilla HTML. Note the top four lines defining the title and layout for Jekyll. Another interesting aspect here is that the stylesheets aren’t in CSS – they’re written in LESS:
This makes it easy to change colors, since LESS supports variables. Just for the heck of it, I changed the body background color to pink. Now it’s time to commit and push the changes to see them on the website:
Now, let’s go to the Spinto website:
Indeed, that is appallingly pink. Pretty easy stuff! There’s also a Ruby gem for previewing changes locally, so you don’t have to keep pushing to the Git repo every time you want to see your changes in the browser.
Spinto is a brave and innovative attempt at creating a system that would appeal both to newbies and seasoned developers. If you’re working on a website all on your own, I can’t really think of a compelling reason to use Spinto instead of Jekyll itself (or PieCrust and the many other static website generators). But if you need to collaborate with others, especially users who care deeply about textual content and images but can’t really help out with the CSS, Spinto offers some interesting benefits.
Let us know what you think of it in the comments, and whether you prefer this or a similar website generator.