If you know your way around HTML & CSS, you may want to skip to the section for creating a custom theme.
Creating your first
After logging in you’ll be greeted to your
Spaces, though since you’re new here you’ll need to create one first. To do so, click the + New Space button.
You can think of a
Spacelike a website. Once it’s created, you’ll be able to visit it at
username.rusic.com. Pro tip: You can create multiple spaces within your account and even use your own domain names!
Space a name and add a short description so it has some character. Don’t worry too much if you can’t think of anything right away.
Next you’ll need to choose a
Theme, this is what will determine the behaviour and look of your
Themewill determine whether your
Spaceis a competition, an idea generator or a landing page. Pro tip: If you’re after something a little different, you can create your own custom theme to do pretty much anything!
When you’re ready, hit the Create space button. Ta-da! You should now see your newly created
Space. Next you’ll want to check your
Space out (remember it’s at
username.rusic.com) and begin to customise it to make it your’s.
Space with a custom
To create a custom
Theme you’ll need your developer chops at the ready and your computer setup with a few things to make creating one a breeze. But first lets run over how a theme works.
How themes work with Rusic
Anything you can do in Liquid you can do within the Rusic Liquid templates.
The thing that makes a Rusic
Theme is the Liquid data that your are able to play with, like the current user that is logged in or the dynamic name of your
Space. Find out all the available Liquid attributes. Also have a look at our Object and variable reference documentation to see a list of objects and variable data you can access within your Rusic theme.
Things you’ll need before creating a
We’ve created a few tools that’ll help get you off the ground quickly, including a
yeoman generator to scaffold a
Theme and the
rusic gem to make deployment a cinch.
Once these are all installed it’s time to get building your
Create a new
Theme with Rusic
First you will need to create a blank
Theme from your Rusic dashboard, you can do this by doing to
Themes and clicking the + New Theme button. Give your
Theme a name, select the “Blank theme” option and hit the Create theme button.
Theme will now appear in your list of
Themes, you’re nearly ready to dive into some code! But you’ll need your
Theme’s ID and your API key before you do. You can find a
Theme’s ID by clicking “Edit” on a
Theme from within your list of
Themes and looking for it’s ID in the URL
http://rusic.com/themes/<theme-id>/edit. Your API key can be found under the “Manage Community” then “API Access”. You’re good to go, time to scaffold out a theme!
Scaffolding a barebones
Back on your machine, open your CLI of choice and head to your preferred directory that you keep your sites in and create a new directory named after your theme (I’ll stick with
demo-theme for this).
cd ~/Sites mkdir demo-theme
Enter the directory you just created an run the
yo generator. This will take you through the setup process and ask you various questions about how’d you like your
Theme setup including your
Theme’s ID on Rusic and your API key.
cd demo-theme yo rusic-theme
yo has finished up your next step will be to deploy your theme and start development on it.
Theme to Rusic
To deploy your theme simply run the following command. This will send all your files up to Rusic’s servers and your
Space will be ready to view.
rusic deploy production
To being developing your
Theme you’ll need to tell
rusic to watch your theme and sync any changes you do locally with Rusic. You can do this with thw following command.
rusic deploy production --watch
If you are using Sass and CoffeeScript you’ll always want to run the provided
gulp tasks. You can check the Gulpfile for all the available tasks but the default taks should get your assets compiling for you.