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:
Launch RStudio and install the blogdown package by running
install.packages("blogdown")
in the R console.Create a new RStudio Project by going to File > New Project > New Directory > Website using blogdown. Image.
Using the RStudio New Project Wizard, generate a website using the Hugo Anatole theme by inserting
xndrblz/anatole
in theHugo theme
parameter. Click Create Project to generate the website. Image.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:
Edit “My Blog” on the home page by navigating to
config/_default/languages.toml
and changing thetitle
parameter. </> Code.Edit “Call me Jane” on the home page by navigating to
config/_default/params.toml
and editing thedescription
parameter. Feel free to experiment with editing other parameters includingtitle
,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:
Sign in to Formspree.
Click “New Project” to create a new project for your website. Image.
Click “New Form” to create a new contact form. Image
Copy the form’s “endpoint.” Image
Open
config/_default/params.toml
and insert the form endpoint into thecontactFormAction
parameter. </> Code.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.
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
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:
Log in to Netlify and click “New site from Git.” Image
Select GitHub as the Continuous Deployment provider, then select your website’s GitHub repository.
Accept the suggested site settings and click “Deploy site” to publish your website to the internet. Image
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:
Sign in to Google Analytics and navigate to Admin > Create Account. Image
Under Account setup, provide an appropriate name (e.g. my-example-site) and configure the Account Data Sharing Settings to your liking. Click “Next.”
Under Property setup, provide an appropriate name (e.g. example-site-property).
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
Under About your business, configure the settings to your liking. Click “Next” and accept the terms of service.
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
Return to your RStudio Project. Open
config/_default/params.toml
in the main directory and create agoogleAnalytics
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_account_list()
ga_accounts
# # Obtain the "view Id" associated with your website account
<- ga_accounts %>%
view_id filter(accountName == "abndistro", webPropertyName == "Abnormal Distributions") %>%
pull(viewId)
# Query geographic location of website users
<- google_analytics(
users_location 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
<- users_location %>%
map_plot 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.