Styling Jekyll with Cloud9

Warning: Undefined variable $num in /home/shroutdo/public_html/courses/wp-content/plugins/single-categories/single_categories.php on line 126

Warning: Undefined variable $posts_num in /home/shroutdo/public_html/courses/wp-content/plugins/single-categories/single_categories.php on line 127

First, make sure that your instance of Jekyll is installed. Your site should look like this:

If it does, great! Move on to the next section. If not, make sure that you’ve:

1. Followed the instructions here
2. Edited baseurl in your _config.yml folder. It should be “/yourfolder” but replace yourfolder with the name of the folder you created to hold your jekyll instance.
3. Saved your files in Cloud9
4. Updated your jekyll instance, by running jekyll build (make sure you are working inside the folder that holds your jekyll instance)

Style!

1. Start by logging into Cloud9.
2. Then, navigate to the folder that contains your Jekyll instance (use cd yourfoldername)
3. Then, update your site, running the code jekyll build
4. You should see a folder called “assets” inside of your jekyll instance (NOT inside of your_site folder). If not, run the code mkdir -p assets
5. Highlight the “assets” folder
6. Click the plus icon and select new file
7. Save the new file in the “assets” folder. Title it main.scss
8. Navigate to https://www.color-hex.com/ and pick a color that works for you, copy the .
9. Paste in the following text, but replace #NNNNNN with the hex code you selected above.

---

---

@import "minima";

body { background-color: #NNNNNN; }

10. Save your file. Run jekyll build. Download the contents of the _site folder, and upload it following the steps in the Jekyll on Cloud9 tutorial.