Scouting Tech: Building Your Unit Website with Classic Google Sites

This tutorial teaches Scouters how to develop a Unit website utilizing
Classic Google Sites.

Click here to view my tutorial for New Google Sites.

According to the BSA’s 2018 Annual Report, there are 2,021,615 registered Scouts (kindergarten-aged thru 17 years old) in Cub Scouts and Boy Scouts here in the United States alone. They are members of tens of thousands of Packs and Troops across the country, and if you visit BeAScout.Scouting.org right now and enter your zip code, you’ll probably be amazed by the number of units serving your local community.

So how do you set yourself apart from the rest? How do you share your recruitment details? How do you attract new membership and provide existing members with easy access to the kind of information they need to stay in the loop?

There’s always social media, which most parents already have for personal use. Scouts BSA outlines in detail how platforms such as Facebook and Twitter can and should be used, to include Youth Protection, and I highly suggest reading through their Social Media Guidelines before creating a Pack or Troop page or group as it’s rightfully Youth Protection heavy. The problem with social media is that one Facebook Pack or Troop page looks exactly like the next one, so it’s hard to stand out. You’ve seen one and you’ve seen ’em all.

A personalized website is your opportunity to truly shine, and there are countless free website builders out there that provide wonderful Scouting themed templates and designs. Some of the available options don’t even require much if any web development experience and can be built in minutes with very little effort. Convenience is key, especially when you’re trying to cram all kinds of Scouting into that single hour we’re allotted each month. 🙂

I have a Bachelors Degree in CIS with a major in Web Development and Design and have built or supported hundreds of websites in my career. When I joined my Pack’s leadership team, I knew that I’d be taking over our online effort and that my first priority would be to develop a site that could be easily transferred to a future leader who might not have my kind of web experience. I decided to use Google Sites because of its simple templates, ease of use, and that it’s accessed using a Google login. I’ll reference my Pack’s website and reference customizations that you can see in action at www.Pack521.com throughout. So, where do we start?

Get A Pack Google E-mail Account

You’ll want to create a Google e-mail account for your Pack, even if you already have an existing email for communication purposes. You’ll use this account to login to Google Sites, and since it’s not your personal e-mail address, it can be passed on to the next leader to fill the webmaster role. Share the account information with your Committee Chairperson and Cubmaster!

Consider Your Basics

Make a list of what you consider to be the basics you want to share on your website. You’ll need to describe your Pack, focusing on the program you offer and how that sets you apart from other local Packs, and your meeting schedule. You’ll also need to provide a way for potential families to communicate with you, be that a Google Form or a simple paragraph providing your contact information. Do you want to link your social media accounts to your website? Maybe share newsletters or announcements? Think about what you would want to see on a Units website as a potential member.

Using that list of basics, create a simple wireframe of your site. A wireframe is essentially a blueprint of your site, a schematic or skeletal view of how information will be organized on your site jotted down on paper. Think of it like a flow chart of information! Remember that we’re supposed to Keep It Simple in Scouting.

If you open our Pack website at www.Pack521.com, you should be able to see how this wireframe ultimately became a website.

Create A Google Site

To create a Google Site, you’ll need to make sure you’re logged in to Google using your Pack Google account before you visit https://sites.google.com and click the red “CREATE” button on the left hand side of your screen. From here you can choose to build off of a blank template or select one from hundreds of available sites. If you choose to select one from the available templates, simply search for “Cub Scouts” or “Boy Scouts” and look through the options that are generated.

The first option that pops up, “Cub Scouts Website” seems to be the most popular. Our first iteration of our website was created using this template, and I would suggest it or another like it for folks without a lot of web development experience. It gives you everything, down to the graphics, which is a pro and a con. It’s nice to have everything at your fingertips, and it’s also difficult to wade through it all to find what works best for you.

I suggest starting with a blank template because you’re starting with a totally clear canvas that you can make your own without having to start your project with a major purge of graphics, bells, and whistles. You can always use a template as a reference later!

Determine what you will name your site. Short and sweet is best (we used “pack521va”, which is also our Facebook page ID, our Google e-mail address, and more). What you name your site will become your site location, or URL.

Next, choose the “Select a theme” dropdown to choose a color scheme and basic site format. I chose “Ski” for www.Pack521.com, but there are many more to choose from. The good news is that you can always change your theme later if you decide you don’t like it. You can choose the “More options” dropdown to write a brief site description now, or you can update that later. All that’s left is clicking the reCAPTCHA box to confirm you’re not a robot, and click the red “CREATE” button at the top of your screen to confirm.

CONGRATULATIONS! You have a Google Site!

Customizing Your Site

You should be directed to your new homepage, which is no more than a blank template right now. You’ll want to make some back-end customizations before you begin, so click on the “More Actions” link (gray gear icon) at the very top right of your screen, selecting “Manage Site” from the dropdown.

Enter a meaningful Site name and click the “Show site name at top of pages” checkbox. You can also enter a brief Site description that states the purpose of your website and helps search engines find you. It’s here on the Manage Site page that you’ll also find the “Themes, Colors, and Fonts” link on the left hand side. This is where you can edit the theme you’ve chosen entirely or edit pieces of the theme like color, your site header graphic, and more. Once you’ve finished poking around and making changes, click the red “SAVE” button at the top.

You’ll notice that your site name appears at the top of the links on the left hand side of your page. You can click that to return to your website homepage, where you can start adding content.

From the “More Actions” link at the top right of your screen, choose “Page Settings” from the dropdown and uncheck the “Show page title” checkbox before saving. There is a Edit page (gray pencil) icon on your homepage that you can click to start editing content here. You’ll notice that the page changes and “Home” becomes editable with a text box beneath it. I decided that this layout wasn’t going to work for my site, so my first step was to click on the Layout menu at the top of the screen. I chose “Two Column” from the dropdown (not “Two Column (Simple)”) and clicked “Save”. Removing your page title simplifies your site and the two column layout allows you to organize your website in a way that best suits a linked Google calendar.

Next, you’ll want to open the BSA Brand Identity Guide and Brand Center for official colors, logos, and other graphics. You can use these images to create a header graphic for your new website. The Cub Scout “Billboards” section of the Brand Center has images in the right dimensions for this.

Download or create a header graphic, then click on the Edit page (gray pencil) icon at the top of your page. You’ll notice that your page title appears here as “Untitled”, but it won’t once you click “Save”. (I suggest changing it to “Home” so it appears as such in the sidebar navigation.) Click on the long gray box directly below your page title and click Insert > Image from the links at the top of your screen. Navigate to the image you just downloaded or created and insert it into your site. At first, it will be enormous, but have no fear because Google Sites has several image sizing options for you. You’ll see a box has appeared below your image that has a “Go to link” and some image options. Click “Remove” next to the link, re-select your image, and click “100%” to resize the image to fit that box in your template.

Next, you’ll want to add some Upcoming Events to your page. Review your Pack calendar and work from there. ** If you’re new to web development, there is a simple way of handling this particular section of your website. Open Microsoft Word and click Insert > Table at the top of your screen. Create a table that’s two columns and two rows, then choose a color design from the options under the Design tab at the top of your screen. Enter a month or so worth of dates and events to your table, using your Tab button to create as many rows as you need, then copy the entire table (highlight it, Ctrl+c). Beneath your new header graphic, you’ll see two empty boxes. Click on the left most box and paste your table here (Ctrl+v). The table will automatically resize to fit the space. ** If you have some html experience, you can click on the left most box and select <HTML> from the tools at the top of your screen and create a table to suit your needs and color scheme. There are numerous online resources to help you learn the basics of html. My favorite is w3schools.com, which is an easy-to-navigate, easy-to-understand resource.

Do you have a Twitter account? Visit https://publish.twitter.com/ and enter your Twitter URL into the “What would you like to embed?” box. This will produce a single line of code that you’ll copy by clicking the “Copy Code” button. Go back to your Google site home page and click on the right most empty box, directly next to your upcoming events, and click Insert > Gadgets > HTML Box. Paste your Twitter code into this box, resize the height and width to 600 pixels and click “Save”.

This particular feed will update a few minutes after you create a new Tweet!

Next, you’ll want to embed your Google Calendar. Why do you want to do this? Well, you can sync your Google Calendar with your ScoutBook calendar and share Pack events on your website in a few easy steps. I talk all about that in my post, “Scouting Tech: Syncing Your ScoutBook and Google Calendars“. Once you have synced your Google Calendar and ScoutBook, open Google Calendar and click on the top right Settings link, which looks like a gray gear icon. On the left hand side of the screen, you’ll click the name of the calendar you want to embed on your website. In the “Integrate calendar” section, copy the iframe code displayed in the grayed “Embed Code” area, OR click Customize and hoose the options you want for your calendar and copy the HTML code displayed at the top of the screen. Back on your site, click on the long blank field at the bottom of your screen and go to Insert > HTML Box. This is where you’ll paste your calendar code.

You may want to change the default color of your header bar (this is where your page title and search box are). To do this, you’ll click on the “More Actions” link (gray gear icon) and click “Manage Site”. Navigate down to “Themes, Colors, and Fonts” and “Site Header”. Click “Background” and then the paint bucket icon, where you can either choose a color from the palette or enter a hex value. Page 51 of the BSA Brand Identity Guide provides you with the hex values of the official BSA colors, and Scouting Blue is #003F87. Enter this into the hex value box on the Background screen. The header background will change, but the text will remain black, making it difficult to see. So next you’ll click on “Title” (which is below “Background”) and change the color to white using the palette. You can change the font used in the header here, as well, and there are hundreds of fonts available to choose from. Click “Save” and go back to your homepage.

Building Pages

Hopefully I haven’t lost you yet! If you’ve made it this far…

You have a site, now you need some content, and to make that content you’ll need to go back to your homepage and click on the icon at the top that looks like a page with a plus on it… “Create Page.” Name your page something logical, like “About Us“, check that the template is set to Web Page, and click the red “Create” button. Repeat this process for the other general pages in your wireframe. You’ll notice that they appear on your left hand navigation as you go!

To create a page for document storage (like our Forms, Flyers, and Guides page at www.Pack521.com), you’ll click “Create Page,” name the page, and then choose File Cabinet from the template dropdown. You can add files and organize them into subsections once this kind of page is created; plus, once a file is added to this page, you can click “View” and use the URL as a link to your document in email, on social media, and anywhere else you might want to share it.

The Announcements template can be used to create a site blog. This is a great way to share Pack information like upcoming service projects, special public events like parades, and more. If you have a monthly Cubmaster’s Minute to share with the public, this is the perfect spot!

If, after all of your web pages are created, you want to edit the sidebar navigation, simply click the “More Actions” link (gray gear icon) and select “Edit Site Layout“. Click anywhere on your sidebar navigation and a configuration window will open. It’s here that you can remove the navigation title and sitemap link. You can also click the plus sign icon on the Sidebar header to add another navigation bar below the existing bar. By clicking anywhere in your new sidebar navigation pane, a configuration window will open that gives you the option of adding any page from your website and/or URL’s to external sites like your Council or District websites, your online application site through My.Scouting.org, and ScoutShop.com, for instance. Click the blue “Close” button at the top of your screen to exit “Edit Site Layout” mode.

And… You’re Set!

You should have a great website ready to share! Use that Twitter feed to your advantage, posting to Twitter regularly about upcoming events and announcements, and get double-duty out of your effort. Include your website URL on your Facebook page, reference it on printed materials, and share it with friends and family.

But Wait, There’s More!

You can purchase a personalized domain and forward it to point to your new Google Site. For instance, our Google Site URL is https://sites.google.com/site/pack521va/. That’s a lot to remember and print on flyers and other promotional materails. But http://www.Pack521.com is shorter, logical, and easier for a busy mom or dad to remember.

We purchased the Pack521.com domain through GoDaddy. To do this, you’ll need to create an account, then visit their domain name search page and look for your desired domain. The search will let you know if it is available and give you pricing plan information for the .com extension as well as many other available extensions. We chose .com and registered it for two years for right around $30.00

Once you purchase the domain, you’ll need to set it to forward to our new Google Site. Sometimes GoDaddy will take around 24-hours to process and “stand up” your domain, so patience will be a virtue. But once it’s up and ready, just log back in to your GoDaddy account, click on your name at the top of the screen, and choose “Manage Domains” from the Quick Links window. It will open to your “My Domains” page, where you’ll need to click on your domain name to view the “Domain Settings”. On this page, click “Manage Connection”, which will bring you to a new page showing your domain name, its status and expiration, if it’s set to auto-renew, and privacy setting. Check the box next to your domain, click the “Forward” button and click “Forwarding Domains“. This opens a window with a “Forward To” dropdown and blank text field. Choose ‘https://&#8221; and paste in your Google Site url (again, ours was sites.google.com/site/pack521va/) before clicking “Save”.

This step might also require a 24-hour or so stand up period where GoDaddy processes the new domain forwarding. By the next day you should be able to type your domain name into your browser address bar and it will forward to your Google Site like magic!

Okay, Now You Really Are Done!

This is a LOT to digest, but I hope that I’ve made it as straight forward as possible and saved you some first-timer missteps along the way. Do you have a Pack or Troop website? What provider did you use? Have you used Google Sites or Domain Forwarding through a vendor like GoDaddy? Share your website in the comments below!

Yours in Scouting,
Rebekah