Deploy Jekyll on Cloud9

Step 1 - Sign-up for a free C9 account

Note that C9 might ask for a credit card but it won’t charge you anything.

Just enter a valid email address and click on Sign Up.

cloud9-website.png

Step 2 - Create a new Workspace

Log-in and you should see your Dashboard containing all your Workspaces (none at the moment) at a similar URL to this one https://c9.io/your-username-here

Just click on Create New Workspace.

cloud9-new-workspace.png

Enter a Workspace Name. ie. Jekyll-Blog

This will be used to differentiate from other C9 Workspaces and will also be present in the URL for this Workspace.

ie. https://ide.c9.io/your-username/Jekyll-Blog

c9-workspace-name.png

The Workspace Description is optional.

ie. All Jekyll-based Projects

c9-workspace-name.png

You can always edit Descriptions later, but this is where they show up in your Dashboard:

c9-workspace-description-dashboard.png

By default, your Workspace is Public and Hosted. No need to change anything.

Cloning from Git or Mercurial URL is optional. Leave that blank.

c9-public-workspace.png

You can create different types of environments, but leave it Custom and click on Create workspace

c9-workspace-template.png

Step 3 - Install Jekyll

You should now see a screen similar to the one below, README.md file should be open by default:

https://d33wubrfki0l68.cloudfront.net/bcfe0b844ba3a3b48a09a1e211bf2bc699c71d8a/e58b4/assets/c9-inside-new-workspace.png

Notice the blue bottom terminal window, just enter the following command in it:

gem install jekyll

https://d33wubrfki0l68.cloudfront.net/1e0318d0645fe0a01fef9512b186b244acda1bde/3f80d/assets/c9-terminal-jekyll-install.png

Give it a minute to finish installing all the dependencies and you should see a message similar to this, if successful:

https://d33wubrfki0l68.cloudfront.net/4058404a03e9c7e00f5630021100960a6a7af22a/c9e35/assets/c9-terminal-jekyll-success.png

Step 4 - Create a new Jekyll project

Next, just create a new Jekyll project by typing this into the terminal:

jekyll new example-site

Note that you can name your project whatever you like, just replace example-site with something more relevant to your needs.

You should see this message in the terminal:

https://d33wubrfki0l68.cloudfront.net/e38099c569af6f476afebbcaabb89fc5af29ad90/c9302/assets/c9-jekyll-project-installed-message.png

In the left panel, you should now see a new folder that Jekyll has created for you, click on the small arrow next to example-site (or whatever name you gave your project) to expand that and see all the files inside it:

https://d33wubrfki0l68.cloudfront.net/20a9d2389ad37562104d1db4fb4e35a0768d8162/f507e/assets/c9-new-jekyll-site-folder.png

Step 5 - Serve and Enjoy!

Now we’re going to change directory to the project folder (replace example-site with your project name, if you named it differently) like so:

cd example-site/

And finally type this into the terminal (hint - you’re going to use this command a lot, whenever you wish to make live changes to your Jekyll site):

jekyll serve --host $IP --port $PORT --baseurl ''

You should see something similar to this in your terminal:

https://d33wubrfki0l68.cloudfront.net/273d9ce602c5a6eb63db8e3e0fb600776595f033/45050/assets/c9-jekyll-serve-terminal-output.png

And more importantly, this message in the top-right side:

https://d33wubrfki0l68.cloudfront.net/cfe2fa13635f50c77d1737d63c446a2347884d04/9c99e/assets/c9-code-running-message.png

Just click on that link to preview your Jekyll site in a new window.

ie. https://workspace-name-your-username.c9users.io/

If you wish to put your site offline, just click anywhere inside your terminal window and press CTRL + C.

Congratulations, you’ve done it!

Keep exploring