Let's cut our footprint, not our forests

You must first have a Google Calendar API Key:

1. Go to the Google Developer Console and create a new project (it might take a second).
2. Once in the project, go to APIs & auth > APIs on the sidebar.
3. Find "Calendar API" in the list and turn it ON.
4. On the sidebar, click APIs & auth > Credentials.
5. In the "Public API access" section, click "Create new Key".
6. Choose "Browser key".
7. If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
8. Your new API key will appear. Copy and paste it in the top field to the right, then reopen this window to complete the instructions.

Make your Google Calendar public:

1. In the Google Calendar interface, locate the "My calendars" area on the left.
2. Hover over the calendar you need and click the downward arrow (or create a new calendar with the settings below).
3. A menu will appear. Click "Share this Calendar".
4. Check "Make this calendar public".
5. Make sure "Share only my free/busy information" is unchecked.
6. Click "Save".

Obtain your Google Calendar's ID:

1. In the Google Calendar interface, locate the "My calendars" area on the left.
2. Hover over the calendar you need and click the downward arrow.
3. A menu will appear. Click "Calendar settings".
4. In the "Calendar Address" section of the screen, you will see your Calendar ID. It will look something like "randomlettersandnumbers@group.calendar.google.com".
5. Close this window and paste your ID in the remaining field to the right.

If you haven't already, sign up at GitHub (free) using your organization name as your username. Check your email and verify your account -- this is required to publish your site.

In the upper-right corner of any page, click +, and then click "New repository."

Name your repository you.github.io, replacing you with your username as shown in the example below. Check "Initialize this repository with a README." Adding a description is optional.

On the next page, click the + shown below to add a new file.

Name your file index.html (see below). Now find the index.html file you downloaded here earlier, right click on it and open in a plain text editor (such as Notepad on Windows -- please don't use Word). Alternatively, you may open in your browser and press Ctrl + U to view page source. Copy all the text (on Windows you can use Ctrl + A to select all, Ctrl + C to copy) and paste everything in the large text area on GitHub. Finally, click the button at the bottom of the page (not shown in the image) to commit the file.

Congratulations!

It may take up to an hour to publish (in the meantime a GitHub 404 page will show, this is normal), but your site will soon be online at yourusername.github.io!

While waiting, I'd greatly appreciate it if you'd star this tool on GitHub at this page.

If you've waited over an hour, have verified your address, and your site still doesn't show, email me at hank@henrygd.me. I will do what I can to help.

Submit Your Site to Search Engines

When your site is up, you can invite search engines to index it by submitting your address here:

Google: https://www.google.com/webmasters/tools/submit-url

Bing: http://www.bing.com/webmaster/SubmitSitePage.aspx

One Last Thing

Please enter your email address in the first field and website URL in the second field below. This gives me a way to contact you with information and instructions so you can update your site if something no longer works.

Submit

If you haven't already, register your .com or .org site at Namecheap.

Now sign up at GitHub (free) using your organization name as your username. Check your email and verify your account -- this is required to publish your site.

Head over to Namecheap and find the "All Host Records" options page for your domain. At the time of this writing, you can hover over your username in the top bar, click "Manage Domains", click your website, and find All Host Records on the left. But Namecheap will soon be updating their layout, so it may be different for you.

Set the @ row's IP ADDRESS/ URL field to 192.30.252.153 and add a second @ row with 192.30.252.154 making sure both RECORD TYPE fields are set to A (Address)

Set the www row's IP ADDRESS/ URL field to you.github.io. replacing you with your GitHub username. Don't forget the trailing period. Set the RECORD TYPE to CNAME (Alias)

Compare your settings with the screenshot below, then click the 'save changes' button at the bottom.

Now head back to GitHub. In the upper-right corner of any page, click +, and then click "New repository."

Name your repository you.github.io, replacing you with your username as shown in the example below. Check "Initialize this repository with a README." Adding a description is optional.

On the next page, click the + shown below to add a new file.

Name your file index.html (see below). Now find the index.html file you downloaded here earlier, right click on it and open in a plain text editor (such as Notepad on Windows -- please don't use Word). Alternatively, you may open in your browser and press Ctrl + U to view page source. Copy all the text (on Windows you can use Ctrl + A to select all, Ctrl + C to copy) and paste everything in the large text area on GitHub. Finally, click the button at the bottom of the page (not shown in the image) to commit the file.

Click the + once again to add a second file.

Name the file CNAME and in the larger area simply type the name of the website you registered at Namecheap in the format below. Click the button at the bottom to commit the file. (It says you.org but if you registered a .com it should obviously be changed to you.com, you being your own website.)

Most of the hard work is done now. We just need to route the site through Cloudflare because they provide free verified SSL certificates. So sign up, add your site as below, and wait for Cloudflare's scan to finish.

When the scan finishes, delete the A records and add one CNAME record that points to you.github.io. Enter one @ symbol in the first field like below. After you add it, click the cloud to activate it if it's not already orange. Make sure you have no A records, and do have the two CNAME records as below. Any other records are also fine. If so, click through and use the default settings (free SSL should be on by default). Note the two DNS server addresses you are shown, Open a new tab or window and go back to Namecheap. Select your domain name again, and find the Transfer DNS to Webhost link on the left. On that page, paste in the two DNS addresses that Cloudflare displayed and save your changes. (The ones below are examples; yours will likely be different.)

Congratulations!

It may take up to an hour for your site to show up (in the meantime a GitHub 404 page may show, this is normal), but it will soon be online at the URL you registered with Namecheap!

While waiting, I'd greatly appreciate if you'd star this tool on GitHub at this page.

If you've waited over an hour, have verified your address, and your site still doesn't show, email me at hank@henrygd.me. I will do what I can to help.

Submit Your Site to Search Engines

When your site is up, you can invite search engines to index it by submitting your address here:

Google: https://www.google.com/webmasters/tools/submit-url

Bing: http://www.bing.com/webmaster/SubmitSitePage.aspx

One Last Thing

Please enter your email address in the first field and website URL in the second field below. This gives me a way to contact you with information and instructions so you can update your site if something no longer works.

Submit

Finding and optimizing your image

I highly recommend using either a photo you produced yourself or a photo that you know for sure is royalty free. Two of my favorite places for beautiful royalty free images are PEXELS and Unsplash. Check this list for other great sites.

After you find your image, you should optimize it for web use. This is a quick process and can drastically reduce load times. Go to this site or this site, upload your image, set the width to 1800, and submit. Download the resulting image. This is what you will upload to Cloudinary.

Cloudinary

It's free so sign up here. After that, click "Media Library" in the left panel and upload your image by dropping it on the square or browsing your computer. Once you see it below in your library, click it and copy the URL shown directly under the image (see example below). Paste that URL into the field in the panel to the right and click "Test Image."

When you reach the screen below, click "Get API Keys."

On the next screen, click "+Add API Key".

Edit your key (can be done at any time on the settings screen), click "Only Allow This Key To Use Certain API Calls," and check ONLY the "Send" option.

Save your key, copy it, and paste in the field in the sidebar to the right.

Note: One drawback to free serverless hosting on GitHub is that your Mandrill API key will be visible to others. In theory, a malicious user can find your key and use it to send their own emails. As long as you don't enter your credit card information, the worst outcome is that your 12,000 free monthly emails will be used up and your contact form will, for the rest of the month, display an error message asking the user to email directly. I've never encountered this issue, but keep in mind that it is possible. You may set up custom alerts (Account>Alerts) to notify you if your usage is higher than normal.