Chapter 2 Complete end-to-end example

This chapter exposes you to the entire methodology to create, publish, and analyze websites through a quick example. If you complete the steps described in this chapter, you will end up with this basic website. In later chapters, you will make edits to this basic website to create a customized version with your own original content.

Let’s get started!

2.1 Install software

Begin by installing these free, open source tools. My recommendation is to download the latest versions, which at the time of this writing are R 4.0, RStudio 1.4, Git 2.31.1.

2.2 Create accounts

Create free accounts with GitHub, Netlify, Google Analytics, and Formspree. Start with GitHub, then use your GitHub registration to sign up for a Netlify account. To sign up for Google Analytics, click the link below and locate “Start for free” on the landing page.

2.3 Generate a website

The blogdown R package makes it remarkably easy to generate websites that use the Hugo framework behind the scenes. The steps to create a website include the following:

  1. Launch RStudio and install the blogdown package by running install.packages("blogdown") in the R console.

  2. Create a new RStudio Project by going to File > New Project > New Directory > Website using blogdown. Image.

  3. Using the RStudio New Project Wizard, generate a website using the Hugo Anatole theme by inserting xndrblz/anatole in the Hugo theme parameter. Click Create Project to generate the website. Image.

  4. Confirm that everything is working properly by running blogdown::serve_site() in the R console. A local, live, and fully functional preview of your website will appear in the Viewer pane in RStudio. Image.

2.4 Make some edits

You will notice that the default website contains placeholder text such as “My Blog” and “Call me Jane” on the home page. The steps to edit these placeholder text examples include the following:

  1. Edit “My Blog” on the home page by navigating to config/_default/languages.toml and changing the title parameter. </> Code.

  2. Edit “Call me Jane” on the home page by navigating to config/_default/params.toml and editing the description parameter. Feel free to experiment with editing other parameters including title, profilePicture, and social media links. </> Code.

2.5 Integrate Formspree

The contact form on the Contact page is powered by Formspree. Contact forms are a handy feature for collecting user emails and feedback from your users. The steps to create a Formspree contact form “endpoint” and link it to the contact form on the website include the following:

  1. Sign in to Formspree.

  2. Click “New Project” to create a new project for your website. Image.

  3. Click “New Form” to create a new contact form. Image

  4. Copy the form’s “endpoint.” Image

  5. Open config/_default/params.toml and insert the form endpoint into the contactFormAction parameter. </> Code.

  6. Fill out the contact form on the website and click “Send.” Sign in to the Formspree, locate your newly created form, and select “Submissions” to view your submission. Image

2.6 Push the website to GitHub

Once your site is working locally, the next steps are to create a remote GitHub repository for your website, configure a local Git repository, and push your website files from your local environment to the remote repository.

  1. Create a remote GitHub repository by signing in to GitHub and clicking “New” in the Repositories section. Configure the repository accordingly, then click Create repository. Image

  2. Launch a Git terminal (e.g. Git Bash on Windows, Terminal on Mac/Linux) and run the following Git commands to push files from the local environment to the remote GitHub repository:

# Change the directory to your website's root folder
cd path/to/your/website/files

# initialize a local Git repository
git init

# add your website files to the local Git repository
git add --all

# commit your website files to the local Git repository
git commit -m "first commit"

# point the local Git repository to the remote GitHub repository
# change your_username and your_repo to your GitHub username and repository name
git remote add origin https://github.com/your-username/your-repo.git

# push your files to GitHub
git push -u origin master

2.7 Deploy the website on Netlify

Now that your website files are stored in a GitHub repository, follow the steps below to configure Netlify to deploy your website to the internet:

  1. Log in to Netlify and click “New site from Git.” Image

  2. Select GitHub as the Continuous Deployment provider, then select your website’s GitHub repository.

  3. Accept the suggested site settings and click “Deploy site” to publish your website to the internet. Image

  4. Locate your website’s URL by returning to the Site Overview section. By default, Netlify generates a random domain name with an extension of .netlify.app. Though the domain name extension cannot be changed (unless you purchase a custom domain), the domain name prefix can be changed by navigating to Site settings > Change site name. Image

2.8 Integrate Google Analytics

Google Analytics is a tool for collecting user traffic and activity on your website. Create a free Google Analytics account to begin using Google Analytics, then proceed with the following steps:

  1. Sign in to Google Analytics and navigate to Admin > Create Account. Image

  2. Under Account setup, provide an appropriate name (e.g. my-example-site) and configure the Account Data Sharing Settings to your liking. Click “Next.”

  3. Under Property setup, provide an appropriate name (e.g. example-site-property).

  4. Under Property setup, click on “Show advanced options” to create a Universal Analytics property. For the Website URL, insert the URL provided by Netlify when you deployed your website. Click “Next.” Image

  5. Under About your business, configure the settings to your liking. Click “Next” and accept the terms of service.

  6. Locate the Tracking Code by returning to the Google Analytics home page and navigating to the Admin console. Select the Account and Property that were created in the previous steps. Under Property, click on Tracking Info > Tracking Code. Copy the Tracking ID, which should appear in the form of UA-XXXXXXXXX-1. Image

  7. Return to your RStudio Project. Open config/_default/params.toml in the main directory and create a googleAnalytics parameter. Insert your tracking code as the parameter value. </> Code.

2.9 Push updates to GitHub

After having pushed the website to GitHub, we made changes to the code base by adding Google Analytics integration in the previous step. To complete the Google Analytics integration, push the updates to GitHub. Doing so will force Netlify to deploy a fresh copy to the internet with Google Analytics fully integrated.

To push changes to GitHub, use the add > commit > push Git workflow.

# add all files to the local Git repository
git add --all

# commit files and include a brief message
git commit -m "brief message describing your changes"

# push files to GitHub
git push origin master

2.10 Analyze Google Analytics data

googleAnalyticsR is an R package for analyzing Google Analytics data in R. This topic is discussed in more detail in the chapter Integrating Google Analytics.

The R code below exemplifies the workflow for authenticating, collecting, and analyzing Google Analytics data in R.

Note: The website created in this chapter is not used in the following script because it has not received sufficient user traffic. My personal blog, Abnormal Distributions, is used instead.

# R packages
library(googleAnalyticsR)
library(googleAuthR)
library(dplyr)
library(leaflet)

# Authenticate your Google Analytics account
ga_auth()

# List your Google Analytics accounts
ga_accounts <- ga_account_list()

# # Obtain the "view Id" associated with your website account
view_id <- ga_accounts %>%
  filter(accountName == "abndistro", webPropertyName == "Abnormal Distributions") %>%
  pull(viewId)

# Query geographic location of website users
users_location <- google_analytics(
  viewId = "198103217",
  date_range = c("2019-01-01", "2020-12-31"),
  metrics = "users",
  dimensions = c("latitude", "longitude"),
  anti_sample = T
) %>%
  as_tibble() %>%
  mutate_at(vars(latitude, longitude), list(as.numeric))

# Plot map of website users by location
map_plot <- users_location %>%
  leaflet() %>%
  addTiles() %>%
  addCircleMarkers(
    lng = ~longitude,
    lat = ~latitude,
    radius = ~log(users),
    stroke = FALSE,
    fillOpacity = 0.5
 )

Map of Abnormal Distributions users by location

map_plot

2.11 Next steps

This chapter presents the steps to create, publish, and analyze personal websites with very little detail. To get into the details of each step, start with discovering your style.