Pushing Your Code to GitHub

Create a "New Repository" on GitHub

Follow the steps on GitHub's Documentation to create a new repository.

Once you are have a new empty repository, come back here.

Protecting Your Secrets

Let's look at your code again.

If you open up config/cloudinary.yml, you will see that it contains credentials to your Cloudinary account. In the real world, it's not considered a best practice.

Let's see how we can fix this.

First, let's add this to Gemfile, and then run bundle install. (You should already have a group :development, :test in your Gemfile, so feel free to reuse that.)

group :development, :test do
  gem 'dotenv-rails'
end

Next, create a .env file in the root folder of your project, and copy the credentials in config/cloudinary.yml over.

CLOUDINARY_CLOUD_NAME=cloudname
CLOUDINARY_API_KEY=12345
CLOUDINARY_API_SECRET=abcde

Then, modify config/cloudinary.yml to become:

---
development:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME']="" %="">
  api_key: <%= ENV['CLOUDINARY_API_KEY']="" %="">
  api_secret: <%= ENV['CLOUDINARY_API_SECRET']="" %="">
  enhance_image_tag: true
  static_image_support: false
production:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME']="" %="">
  api_key: <%= ENV['CLOUDINARY_API_KEY']="" %="">
  api_secret: <%= ENV['CLOUDINARY_API_SECRET']="" %="">
  enhance_image_tag: true
  static_image_support: true
test:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME']="" %="">
  api_key: <%= ENV['CLOUDINARY_API_KEY']="" %="">
  api_secret: <%= ENV['CLOUDINARY_API_SECRET']="" %="">
  enhance_image_tag: true
  static_image_support: false

Do you notice what this is <%= ENV['CLOUDINARY_CLOUD_NAME'] %>?

Yes. These are erb tags common in views. You can use them in config Yaml files too.

Restart your server and everything should still work as per normal.

Finally, let's make sure that the .env will not be monitored by Git. Add .env to .gitignore:

# See https://help.github.com/articles/ignoring-files for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
#   git config --global core.excludesfile '~/.gitignore_global'

# Ignore bundler config.
/.bundle

# Ignore all logfiles and tempfiles.
/log/*
!/log/.keep
/tmp

.env

Push to GitHub.com

Now, commit your code with:

$> git add .
$> git commit -m "Protect my credentials"

Next, add the GitHub URL as an origin remote for your code.

If you have SSH keys set up previously, user the SSH URL:

$> git remote add origin [email protected]:<yourgithubname>/<githubproject>.git

Otherwise, use the HTTPS URL:

$> git remote add origin https://github.com/<yourgithubname>/<githubproject>.git

Then we can now push your code to GitHub.

$> git push -u origin master

Refresh GitHub and you should see your code now available on GitHub!

Deploy to Heroku Again

Since we have made some changes, you can deploy to Heroku once more:

$> git push heroku master

At this point, the image upload on your app would no longer be working.

That's because the credentials to Cloudinary are no longer available (We took it out and replaced it with .env, remember? But we also omitted .env from Git!).

To add the credentials to Heroku, do this:

$> $> heroku config:add CLOUDINARY_CLOUD_NAME=xxx CLOUDINARY_API_KEY=xxx CLOUDINARY_API_SECRET=xxx

That's it! The image upload should work again!