BETA

Setting Up Your New Indivisible Template Website

A guide to creating a free website for your Indivisible Guide chapter with the Indivisible Template.

What Chapters are Saying

“Thank you, thank you, thank you! Our new website is a fantastic tool for keeping our members informed of events and actions, and for attracting new people to our chapter. Thanks to the Indivisible Template, it only took me a few hours to get it up and running.”

Jen Roberts, Indivisible Colusa

Introduction

The purpose of the Indivisible Template is to make Indivisible Guide chapters more effective by providing them with a fast, free, and easy to use website and CMS (Content Management System).

Follow the steps in the Setup Instricutions below to set up your site.

Setup Instricutions

Support and Other Notes


Get Updates

Sign up for email updates about changes and improvements to the Indivisible Template.


Examples

The Indivisible Template creates a website that, by default, looks like this. You can see a live, interactive Indivisible Template site at IndivisibleTemplate.com.

It's optimized for desktop, tablet, and mobile usage.

It's fully and completely customizable for developers via Jekyll.

Desktop site
Mobile site

Design Philosophy

The Indivisible Template is designed to maximize the positive effect Indivisible chapters can have in congress. It does this in a few ways.

Fast Setup

The Template is designed to get chapters up and running with a new website without a lot of fuss. Once you get the template set up, all you have to do is edit your chapter name, tweak the title, and start posting.

Little-to-No Tech Overhead

There are no servers to set up, no software to update, and no bandwidth limits to worry about for normal usage.

Effective Defaults

The Indivisible Template pushes chapters by be effective in promoting positive action, getting media attention, and recruiting new members by putting content front and center. Rather than rely on verbose descriptions and about pages, the Indivisible Template pushes chapters to publish actionable content and success stories.


1. Getting A Domain

If you don't already have a website domain name like IndivisibleSF.org, you'll need one. Go to Google Domains to purchase a domain name.

Once you've completed the purchase of your domain name move on to the next step.

If you already have a domain name move on to the next step.


2. Getting The Template

The Indivisible Template is hosted on GitHub.com, a popular open source hosting service. GitHub makes it easy for you to copy the Invisibile Template and provides you with space to host your new Indivisible Template website. Don't worry, you don't need to manage any servers or administer any software or look at any code.

1. Create a free GitHub.com account

GitHub is the service that will host your new website. Visit GitHub.com in your browser and click the "Sign Up" button in the top right of the page. Fill out your basic info in Step 1 of the GitHub sign up form. In Step 2 of the GitHub sign up form select Unlimited public repositories for free in the plan options. Do not check the "Help me set up an organization next" box during step 2.

After filling out your info you should end up on a page like this:

IMPORTANT: GitHub will send you an email to verify the email address you signed up with, make sure to click the link in their verification email before going to the next step.

2. "Fork" the template

Click the "Fork" button below to copy the Indivisible Template to your the GitHub account you just created. You'll be taken to GitHub's webiste to begin the process setting up your copy of the Indivisible Template.

Forking, for our purposes, just means to copy the Indivisible Template to your account so only you can edit it.

After clicking the "fork" button above you'll be taken to GitHub.com. There you'll be asked which GitHub account you want your new website to be associated with. Select the account you set up in Step 1.

The name and icon of your account may be different than the sceenshot above above

GitHub will then tell you that it is copying the Indivisible Template to your account. This should only take a minute.

3. Edit your copy of Indivisible Template

Once GitHub finishing copying the Indivisible Template to your account you'll be taken to your new copy. Click the Settings link in the top right of the page so we can connect your copy of the Indivisible Template to the internet and to your domain.

In the Repository name field toward the top of the settings page change the name BasicTemplate to YourUsername.github.io. Your username is listed at the top left of the page before /BasicTemplate. So, if your username was IndivisibleSF you'd enter IndivisibleSF.github.io into the Repository name field.

4. Tell GitHub to connect your Indivisible Template to your domain

In the same settings page where you just edited the name field, scroll down to the GitHub Pages section. GitHub Pages is the GitHub feature that turns the Indivisible Template into a website.

First, in the Source section, click the None dropdown under Source, select Master branch, and then click the Save button.

The page should automatically refresh after you click Save. Scroll down to the GitHub Pages section of the settings page again and you'll see two new features. First, there should be a notification saying your website is published (the green highlighted area). This might take a few minutes to happen. Second, a new Custom domain field should be present.

Enter the website domain you want to use for your website in the Custom domain field and click Save. For example, if you had purchased IndivisibleEB.com you would put in IndivisibleEB.com in this field and click Save.

You're almost done!

5. Tell your domain registrar that GitHub is hosting your website

Now that you have GitHub hosting your new Indivisible Template website, you need to tell your domain registrar to point your domain name to GitHub's servers so that your domain (e.g. IndivisibleEB.com) points to your new website.

The following steps will show you how to log into your domain registrar, find the DNS section, and add the following A records: 192.30.252.153 and 192.30.252.154. A records are like street addresses, and those long A records numbers just mentioned are where GitHub's servers live.

Note: The instructions below are for Google's domain registrar - Google Domains. If you used a different domain registrar to purchase your domain name you'll need to ask them how to update your A records.

In Google Domains, this is the icon you click to edit your domain's DNS settings:

Ignore all the domain settings except for the Custom resource records section of the DNS settings tab:

In the form above:

  • First type in @ for the name field, then enter 192.30.252.153 into the IPv4 address field and click the Add button.
  • Repeat the above step and enter 2 for the name field and 192.30.252.154 into the IPv4 address and click Add again.

That's it for this step.

6. All done

Wait a few minutes and go to yourdomainname.com (where yourdomainname.com is the domain you purchased in Step 1) and your new site should be up and and ready to start editing.


3. Connect the CMS

Just as GitHub.com hosts your new copy of the Indivisible Template, Siteleaf.com makes it easy to update and administer your new Indivisible Template website. Siteleaf is the CMS (Content Management System) - like Wordpress - that allows you to create blog posts, edit your site, add pages, and everything else you'd expect to be able to do. When you want to edit the content of your site you'll go to Siteleaf.com, not GitHub.com.

NOTE: Indivisible Template only officially supports Siteleaf. It does not currently work with Wordpress, Weebly, or other CMS tools that don't directly integrate with GitHub. Don't worry, Siteleaf is great.

1. Create a free Siteleaf account

Visit Siteleaf.com and click the Sign up button at the top right of the page.

2. Connect Siteleaf to GitHub
  • Go to manage.siteleaf.com/sites and click Create new site button.
  • In the right hand column click the Connect existing repo button
  • Select Public repo
  • In the Repo Name field, type in your GitHub username (the username part of username.github.io) and your Indivisible Template name should appear in an autosuggest field. Click the name of your GitHub Indivisible Template (e.g. IndivisibleSF.github.io) to connect Siteleaf to your GitHub account so that you can use Siteleaf to edit your new template.
3. All done

You should now be able to edit your live Indivisible Template powered website, start posting, and take on the world.


4. Updating Your Website

Now that your website and Siteleaf CMS are set up, here are some basic things you'll want to update to get your site up and running:

1. Settings

In Siteleaf, click the Settings icon from the left nav. This is where most of your site-wide settings are kept.

  • Change your chapter name by editing the SITE TITLE field at the top of the settings page.
  • Change the subtitle to edit the title at the top of your website's homepage.
  • Change the email field to your email address. This is the email address people will see when they click the Contact link in your website header.
  • Change the twitter_username and facebook_username fields to your social media accounts. For example, if your Facebook page lives at Facebook.com/IndivisibleAustin put IndivisibleAustin into the Facebook field.
  • The background-image is where the background image on the homepage lives.
  • Include a Google Analytics tracking code in google_analytics if you want to track your website traffic.
3. Posts

In the left nav click Posts. This is where you can post blog post, action posts, and event posts. These are all just blog posts and will show up on your site's homepage.

IMPORTANT: To get a blog post to include your representatives contact information and a call script you must add the category Action to your post.

IMPORTANT: To get a blog post to include event details and the custom event styles you must include the category Event in the blog post.

4. Become a Member

Click the pages link in the left nav, then click the Become A Member page in the list of pages in the middle of the page. Edit the main Content field at the top of the page to include a short description of your group. Copy and paste your Mailchimp signup form embed code from Mailchim into the mailchimp-form-embed field. This will allow members to join your group.

4. Successes

Click the Successes link in the left nav. To create a Success post publish a new post from this section of this site. These will show up in the right column of the homepage and the Successes page on your website. Here are detailed instructions on how to get a signup form embed code from Mailchimp.

5. Calendar

Click the Pages link in the left nav. Click the Calendar page. You can embed a Google Calendar embed code into the embed-code field on this page and your Google Calendar will show up on your website's calendar page.

6. Representatives

Click the Representatives link in the left nav. From here you can add and edit your representatives and their contact info.

A note about Siteleaf plans

Siteleaf includes one free plan that lasts forever. It's called the Developer plan. This is all you need to get up and running and to edit your site forever. If Siteleaf tells you your trial is ending soon go to the purchase page and select the free developer plan. This plan, does not include features like milti-autor editing. If you want those features please do purchase the more advanced Siteleaf plans.


Privacy and Security

"Pull Requests"

Because your Indivisible Tempalate website is hosted on GitHub, people can send you code updates with what is called a "Pull Request". Do not accept any pull requests form anyone except the official IndivisibleTemplate.

Privacy

You should consider every piece of content hosted on your Indivisible Website to be public. There are no password protected pages. Do not try to store and information on your website that contains personal information about you or any of your members. You should even consider your draft blog posts to be public. This is both because your website code is stored on GitHub and because nearly every piece of software is vulnerable to hacking.

Security

Please take these precautions when setting up and use any online account, including the Github and Siteleaf accounts that are required for the Indivisible Template.

  • Enable Two-factor authentication for your GitHub account.
  • Enable two-factor authentication for your Mailchimp account. This one is especially important if you use Mailchimp to store your member list.
  • Don't share your usernames or passwords with anyone via email, Facebook message, Slack message, or any other digital method that does not involve strong encription. Ideally meet in person to share this kind of information.

Support

If you're still having trouble setting up your Indivisible Template website after following the above instructions, need help with a problem you're having related to Indisibile Tempalte, or want to report a bug, visit the support forum:

Support Forum


About

Indivisible Template was created and designed by Sahadeva Hammari in 2017 in California. You can email him at sahadeva@sahadeva.com or follow him at @sahadeva.


Contributing

The Indivisible Template is hosted on Github, so it's easy to make improvements. Pull requests are welcome.

If you have design changes, copy changes, or feature suggestions feel free to email sahadeva@sahadeva.com with them.


Thanks

Thanks to members of the Indivisible SF and East Bay chapters for their feedback on early drafts of this template. Thanks especially to the Indivisible Farmington, CT chapter for providing early testing and feedback.

Thank you to Peg Hunter for licensing their cover photo under a Creative Commons license.

Thanks to Jekyll, Bootstrap, GitHub, and the many other open software tools used to make Indivisible Template.