Some questions to common Jekyll on Cloud9 problems:
I don’t understand why we have to do stuff in Cloud9 and then download it. Why are there so many folders?
Think of Cloud9 as your laboratory. It’s a place where you can play with your site, make changes, and experiment. When you create a workspace in Cloud9, what you are doing is defining space on your domain that saves the files you are experimenting with. When you create a jekyll site in Cloud9, you are creating a folder within that experimental workspace to hold your site.
However, that space is not public-facing. In our laboratory model, it has swipecard access, and you are the only person permitted. In order for other people (i.e. me, your classmates) to see your website, it has to be posted publicly.
This is where File Manager comes in. File Manager is a way for you to see all of the files in your domain. It also contains a folder called public_html, which is where you put things that you want to be publicly visible on the internet. When you create a folder (called something like DCS106) in Cloud9, you are creating a functional subdomain (i.e. yourname.catapult.bates.edu/subdomain) that holds your site.
I’ve followed all of the instructions, but my site looks like this!
You’re almost there! When you make experimental sites in Cloud9, Jekyll does not know where you will ultimately be putting your site. (It does not know about File Manager and public_html).
HTML sites work using things called file paths (which work like links). File paths show the route to your files. So, if your blog folder is called DCS106, the file path would be /public_html/DCS106.
Basically a file called index.html contains a bunch of links that specify where different parts of the website can be found. It contains information about the title of your site, a link to the styling information (i.e. color, font) and also links the various parts of your website together.
Because you are storing your website in a folder called something like DCS106, we need to tell the index.html file that file paths should contain DCS106. Also, because the index file is in the _site folder, it gets re-written every time you save your site in Cloud9.
This is where the _config.yml file comes in. This file contains a bunch of information about your site that doesn’t get overwritten every time you save your site. So, in order to get your page to look like a “normal” Jekyll site, you need to make sure that baseurl: “” in your _config.yml folder is edited to baseurl: “/folder” where folder is replaced by the name of the folder in your public_html folder. So, if your folder is called DCS106, then you would use baseurl: “/DCS106”
OK. I’ve done all of the right things, and saved my files in Cloud9, but my website doesn’t work!
Every time you make changes in Cloud9, you have to follow these steps.
Step 1: Save the file you were working in (command+s, or File > Save)
Step 2: Navigate to your terminal. It probably looks something like this:
Step 3: Make sure that any commands you enter in the terminal are being applied to your experimental site. To do that, you have to use the command cd (which stands for change directory) and the name of the folder in your cloud9 workspace that contains your website files. I named my Jekyll instance demo_site, so I would use:
Step 4: After I make any changes (adding new posts, for instance), save the files you were working in.
Remember that Jekyll works by bundling all of the markdown files you created or edited and converting them into HTML. So before we can download the files from Cloud9 and upload them to public_html, we need to rebuild the site. Do that by going to your terminal and using the following command:
Bonus Step: If you want to look at your website to see if the changes worked, you can use the preview menu. However, you have to tell Cloud9 that you want to see your website as if it were live and on the internet. To do that, first run the code
jekyll serve --host=0.0.0.0 --port=8080
Then go to the preview menu, and click on the long URL.
Step 5: Once the site looks like you want it to, download the contents of the _site folder, upload them to your blog folder in public_html, and extract the files.
What is the deal with posts?
Posts in Jekyll work like this: First you write a post in markdown (the file type is .md). Then you save that post in the _posts folder. When you build the site, those posts are converted to HTML. Follow the directions here on posting, but there are several things to remember:
- The file name should always be in the format of YYYY-MM-DD-the-name-of-the-post.md. So, if I was writing a post on February 1, 2019, and it was called Hello World, my file name would be 2019-02-01-hello-world.md
- The post always needs a header that looks like this:
- You can edit the title (but keep it inside of quotation marks) and the text under the three dashed lines, using markup
- Probably the easiest way to make new posts is to duplicate ones that already exist, and then edit the file name and the contents of the file