Editing eclipse.org Web Sites with OrionHub

This post is for fellow Eclipse committers who have recently migrated their Eclipse project web sites to Git. With your web site stored in Git, you can now use Orion to maintain your web site directly from your browser without installing any tools. Here is a quick primer to get you started.

1. Create an OrionHub account

If you don’t already have one, the first step is creating a new account at orionhub. Simply go to orionhub.org and follow the directions to create a new account. You will receive a confirmation email, and you need to click the link in that email to confirm your account.

2. Setup

Although not strictly needed, there are some setup steps you can do with your new account to smooth your Orion experience. Once logged in, click your username in the top right corner, and navigate to the Settings page.

On the User Profile tab, enter your Git email address and user name to be used when creating new commits. If you want, you can also select Enable Storage to allow Orion to cache your Git password or ssh keys in the local browser storage. This saves you from having to enter it on every push and pull. Finally, at the very bottom of this page under Linked Accounts, you can associate your Orion account with a Persona or OpenId (google) account. This is entirely optional, but means in the future you can log into Orion with your Persona or Google credentials, and not have to worry about another password to remember.

Since Eclipse web sites tend to be PHP-happy, you will probably also want to install a plug-in to provide PHP syntax highlighting. By default Orion only highlights HTML, CSS, and JavaScript, but you can teach it to highlight other file types using plug-ins. In the top banner, click Get Plugins to visit the Orion plugin catalog. Find the CodeMirror plug-in, and click Install. This will bring you back into Orion, where you need to click Submit to complete the installation.

3. Get the code

Now we’re ready to pull your web site into Orion. Go to the Repositories page, and click Clone Repository. Paste in the ssh URL of your Git repository, and click Submit.

Once the clone completes, you will see the web site repository added to your repositories list:

4. Edit the site

Click Show in Navigator next to your repository to reveal your site in the Navigator page. From here you can browse around, create/delete/rename files and directories, and import content. Click any file to open it in the Orion editor:

5. Commit your changes

Once you have finished making your changes, you’ll want to commit them. The Related menu is the easiest way to navigate between different Orion pages that focus on the same file or directory. From either the editor or navigator page, open the Related menu, and select Git Status. The status page shows you something similar to git status on the command line, except it shows you a rich compare editor that lets you easily browse between your changes.

All the usual git commands for manipulating your working directory or Git index are available here, such as Stage, Unstage, Commit, Checkout, Reset, etc. The Commits section at the bottom shows any local commits that have not yet been pushed to the remote, and any fetched commits that have not yet been merged into your local working copy.

Simply stage, commit, and push your changes, and you’re done! Visit your web site and bask in the glory of browser-based development. Now that you’re all setup, you can easily maintain your web site from any connected PC or tablet from anywhere in the world. The downside is you now have no more excuses for why your Eclipse project page is always so out of date…

This entry was posted in Tips & Tricks. Bookmark the permalink.

One Response to Editing eclipse.org Web Sites with OrionHub

  1. Mike Milinkovich says:

    Great post. I’m using Orion to maintain my chunks of the eclipse.org website now, and it’s working well. Two things that would improve this workflow a great deal:

    1. It would be really nice if there was some way to actually view/test your website changes before pushing them to the server. There are some instructions on how to set up XAMPP at [1] that are helpful. But I’m sure that we can think of ways to do better. There are lots of web developers who need to deal with PHP, etc. and their work flows could be better supported.

    2. The workflow of staging, committing, and pushing changes could be streamlined. When I’m working on simple web content, having these operations merged in some way would be nice.

    [1] http://wiki.eclipse.org/Git/Editing_your_Eclipse_project_Website_using_Orion#Testing

Comments are closed.