Open-Source Cookbook

Share recipes. Learn git.


HowTo - Text

Getting Started

First, we'll need to head over to the Repository, found here and fork it. The fork button can be found in the upper right hand corner of the repository.

Once we've forked the repository, we'll need to download it our machine by clicking on the Clone or Download button located above where the files are located to the right.

Ok, we've downloaded the repository to our machine. We now need to navigate to the folder and install the required dependencies. To do this, we'll type in npm install in our terminal.

Once this is done, we'll run the command gatsby develop to start our development environment. If our gatsby develop command doesn't work, we'll probably need to install the gatsby-cli by typing the following command: npm install -g gatsby-cli to get everything situated.

Once Installed

Once everything is installed, we're going to type the following into our terminal to create a new branch. We're going to type git checkout -b recipes/name-of-your-recipe. This will create a new branch that we're going to work out of. Next, we're going to navigate to the Content folder, located in the root of the directory. Once we're there, we're going to click on the Blog folder then the Recipe folder.

Once we've selected the Recipe folder, we're going to make a new folder inside of there. We're going to name this folder after our recipe. So for example, if our recipe name is Grilled Chicken, we're going to name the new folder grilled-chicken.

If there's a folder with the name of the recipe we want to make, that's ok and there's no need to panic! We're going to just add something to the end of the new folder to identify it. For example, if we wanted to make a new Grilled Chicken recipe, but there's already one there, we'll just name our new one grilled-chicken-one (or whatever we want) and not worry about it!

Now that we've made our folder, we're going to do 1 more thing before starting on our recipe. We'll need to make a file inside of our newly created folder. We're always going name this file index.md so it's processed properly inside of Gatsby.

Post Folder And File Creation:

Ok, here we go. We've created our folder. We've created our file. We have one final thing to setup before typing out our recipe. We're going to need to add Frontmatter to our post.

FRONTMATTER?! Yeah! Frontmatter! It's going to give us some extra information that Gatsby will process. We'll need the following:

  • title
  • category (this will ALWAYS be recipes)
  • date
  • author
  • description
  • cover (the image we see on the Recipes Page)
  • tags (this will be things like chicken, grilled chicken, etc...)
For each one of our recipes we make, we'll need the above. Most of the things listed are self-explanatory and there will be examples in other files should you need them.

The important one here is the cover. We're going to place our cover image inside of the folder we created earlier so that it can be shown. Note: You can name your image whatever you want but I'd suggest something simple.

After that, you're free to write out your recipe! You can add images by simply type something like this: ![Baked Ziti](bz.jpg) where you want an image to be. You'll have to put the image you want to use inside of the folder as well, but that's pretty much it!

Add, Commit, And Push Our Changes:

Alright! Our recipe is done. Now what? Well, it's time we push it back up to GitHub! From our terminal, we're going to type the following commands:

  • git add .
  • git commit -m "Your Message Here."
  • git push
And that's it! Our changes are now live in our own forked version of the repository. Next we'll go over adding it back to the main repository via pull requests!

Submitting Pull Requests:

This is pretty easy! After we've pushed our code up to GitHub, we're going to submit a pull request. We'll navigate to the Repository, found here and head over to the Pull Request tab. Once there, we're going to click on the 'New Pull Request' button, and then click the 'Compare Across Forks' link. Here, we're going to click on the dropdown menu on the right and select our fork. Once we do that, all that's left to do is click 'Create Pull Request' and that's it. We're done!

Now, we just wait. I'll eventually come along and either merge the Pull Request or deny it with explination. Congratulations, we just made our first open-source contribution!