This is an adaptation of this set of instructions; making them Nitrous-Charged.
Firstly, if you are not [yet] familiar with Nitrous.IO this will be a terrific introduction. For a great video overview of Nitrous.IO check out this video on Learnable.
The remainder of this article assumes you have created a FREE account at Nitrous.IO.
The Autoparts helps you quickly add features and services to your box.
There are dozens of available Packages and the library continues to grow.
Anyone can contribute a part to the Nitrous Autoparts
Using the 'Filter Packages' to limit the list. Enter "Apache" Then click the install button for Apache Web Server...nitrous1.
When the installation is finished, click the Done button. Be sure to click Start before Close.
Link Nitrous to your Github account
By clicking on the Nitrous Guage at the top of the Boxes screen, you can access the "Get More N20" screen. N20 is the commodity that fuels your Nitrous account; it helps you increase the resources allocated to your box(es). There are many ways to increase the N20 on your account.
Next you need to add the SSH key for this box in your Github profile. But Nitrous has provided a simple "one-click" method to accomplish this.
From the Boxes screen, open your box (by clicking on the title). Click on "Reveal Public Key".
This reveals the contents of the server's SSH [Public] key and you could copy it from here to paste anywhere. But by clicking the "Add to Github" link that has appeared - because you previously connected your Github account - the key is automatically added to your Github profile!
Click the "IDE" button to return to your box.
The apache server exists simply to aid the iterative process of building the project. It added its default www directory. Since you may wish to create multiple projects it is recommended you construct sub-directories in that location; one for each project. This means during the preview process you need to append the project directory in the URL.
The initial publishing and any future updates of the Gist will be performed with Git. A simple git push is all that is required.
Git is already provisioned on every Nitrous box. It needs to be initialized for use on each project. Change Directory (cd) into the project and issue these commands:
$ git init
$ git config --global user.email "[email protected]"
$ git config --global user.name "Your Name"
Initialize Git because you will be using it to push to a gist.
Now, you can verify the setup for Git and Github is correct and complete with this command:
$ ssh -T [email protected]The expected response is something like this:
Hi Githubber! You've successfully authenticated, but GitHub does not provide shell access.
For reference, use the Github instructions for SSH Keys
And now comes the fun part! In the project directory you created, construct the data for your Blocks Gist.
To take advantage of Mike Bostock's Bl.ocks.org you need a landing page named index.html.
In order to perform an initial 'smoke test' just create an index.html page with the bare minimum content:
<!DOCTYPE html>
<html>
<head><title>Half of Infinity</title></head>
<body>
<h1>It Works!</h1>
</body>
</html>All references (to Images, CSS files or Javascript files) will be relative. If you are loading a common library (like JQuery) you may link to the online reference.
Using the Nitrous 'Preview' menu item you can test your work (remember, Apache is already running)
Mike Bostock developed GistUp, which is a utility to create Gists from the command-line and then update them with a simple git push command.
Since the Nitrous box you created is preloaded with Node.js it has npm installed and configured for your use.
npm install -g gistup is all it takes.
There are many additional options in GistUp that are worth exploring
Armed with the confidence that all the pieces are in place, it is time to turn to the REAL task of creating some Gists!
The default file - in a Bl.ock - is index.html so that should be your primary focus. It is a Landing Page for your Gist-Based Website.
Adding images is something that can ONLY be accomplished with a Git Push. You can upload image files to the Nitrous box with the Upload button at the bottom of the File Explorer area.
When you are satisfied with your work after the Edit - Preview - Update cycle, just call gistup.
{You can include a Description for your Gist with the Git convention of adding -m "Description Text" to the gistup call}
The first time you run gistup you will be required to set up a personal access token. {The only required permission is "gist", but I simply accept the defaults}
Enter personal access token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Reinitialized existing Git repository in /home/action/workspace/www/blocks/.git/
[master (root-commit) d5e399c] Initial gistup commit.
1 file changed, 5 insertions(+)
create mode 100644 index.html
gist 11549774 created!We setup the SSH keys in an earlier step so we can perform a
git push. If, at this point, you are having touble refer to the gistup troubleshooting guide.
Utilize the gist number by adding it to this URL (along with your Github/Gist username):
http://bl.ocks.org/GITHUB_USER_NAME/11549774
This is the URL to view your work in Bl.ocks.org.
Adding raw/ just before the gist number will supress the display of the HTML source.
git commit -am 'Made some changes.'
git pushThere are some advanced features of Bl.ocks.org to explore once you have a little practice.
As you go through the Edit/Preview/Edit cycle you, if you need to start or stop the Apache server in Nitrous, use these commands:
To start the Apache server:
$ parts start apache2
To stop the Apache server:
$ parts stop apache2
===
Best of luck in your future Gists, Bl.ocks and Websites.
This Gist was constructed using the technique described here. You may be confident in the fact that this process has been 'field tested'.
