Contents  >

Updating your Website Content

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Updating ‘Mary Smith’ and the meta tags

Updating your social media contact points

Adding your CV

Adding your website logo

Creating a website logo

Adding your Google Analytics ID

Adding your cookie privacy code and message

Updating your contact form endpoint

Adding a favicon

Adding more web pages

Uploading your files to GitHub

Introduction

In this project you will update your personal website, based on the material you covered in these previous Tutorials:

Updating ‘Mary Smith’ and the meta tags

Here are the first steps you need to take:

  1. In VS Code, open all six web pages.
  2. Replace the name ‘Mary Smith’ with your own name, or the name of your organisation.
  3. Are you happy with the content of the title and description tags (the so-called 'meta tags') in the head of each web page? sample image If not, feel free to change the sample text within the tags in each web page.

You may find the links below helpful:

Updating your social media contact points

In the footer of all six sample web pages are a number of social media contact points with icons.

  1. Delete the social media contact points and their icons you do not want to use.   To remove the Facebook link, for example, delete the relevant <li> ... </li> tag pair and everything inside it. website customise
  2. For the contact points you want to use, replace the hyperlink destination of "#" with the actual hyperlink. See the example below for Linkedin. website customise
  3. For your GitHub account, enter your hyperlink in the format https://github.com/mywebsite as shown below. website customise

Adding your CV

In the website template there is sub-folder named assets/pdfs. This is intended for storing any Adobe Acrobat files you may want to link to on your website.

In this folder is a file named cv-sample.pdf. There is a link to this file on your website 'home page'.

website customise

Replace this PDF fle with your own CV. You can name your CV file with the same cv-sample.pdf filename. If your want you CV file to have a different file name, you will need to change the link to your new file name, such as mary-smith-cv.pdf, for example.

Alternatively, if you don't want to include a CV on your website, delete both the text and link from the template 'home page.'

Adding your Google Analytics ID

In the Setting Up Google Analytics Tutorial, you obtained a unique Google Analytics ID just for your website.

In your template 'home page', just before the closing </head> tag, you can see the Google Analytics code with a placeholder ID inserted twice.

sample image

You need to replace this with your own Google Analytics ID.

All the relevant steps for obtaining your Google Analytics iD are contained in the link below.

Viewing a Google Analytics Tracking Code

In the other five template web pages, you need to paste the full Google Analytics script, and not just the unique ID.

Without the correct ID, Google Analytics cannot track visits to your website.

Adding your cookie privacy code and message

In the Bootstrap Privacy Page Tutorial, you used the online service from Insites to generate a privacy and cookie consent 'pop-up' message in JavaScript.

You copied-and-pasted the two items you need for this code to work to the bootstrap-privacy-template.html file in your websites/bootstrap sub-folder.

These two items are:

You need to copy these two items from your bootstrap-privacy-template.html to all six of your web pages.

Follow these steps:

  1. In VS Code, in the <head> of your bootstrap-privacy-template.html page, copy the stylesheet link that controls the appearance of your cookie pop-up message - its colours and location on your web pages.   The stylesheet link will look as shown below. sample image
  2. Paste this CSS link into all six of you web pages, just before the Google Analytics code.
  3. Next, you need to copy the JavaScript code that creates the pop-up message.   In the bootstrap-privacy-template.html page, copy the JavaScript from the bottom of the page.   It will look as shown below. sample image
  4. Paste the code in all six of your web pages.   Ensure that the last line of the JavaScript code links to the privacy web page on your website.

Because your web pages use Google Analytics, you are legally required to add this cookie privacy message with its link to your privacy web page.

Updating your contact form endpoint

In the Bootstrap Form Tutorial, you created an account with the formspree.io online service to process messages entered to a contact form.

Formspree provided you with a so-called endpoint that is unique to your form and which ensures you receive any messages entered in the form at your email address.

You would have added this unique endpoint in your bootstap-form.html web page in your websites/bootstrap sub-folder.

sample image

You need to update the form in the contact page of your website template.

  1. In VS Code, open the index.html file in your /contact sub-folder.
  2. Update the form’s action value by copying-and-pasting your unique endpoint code. See the example shown below. fa-icons-copy

Adding a favicon

A favicon is a small icon (really a set of icons for different screens) that is displayed within the browser tabs and bookmarks bar of a web browser. See the examples below.

fa-icons-copy

A favicon help users visually identify your web pages more easily within browser tabs, bookmarks, shortcuts, and address bars.

You need to update the form in the contact page of your website template.

  1. Create a square PNG image of at least 70x70. Your image should be 260x260 or more for best results.
  2. Go to the free Fav Icon Generator website at the following web address:   https://favicon.io/
  3. Choose the PNG -> ICO option. fa-icons-copy
  4. On the next screen, drag-and-drop the image you want to use as your favicon, and then click the Download button.
  5. Copy your downloaded ZIP to the assets/img sub-folder of your 'main' website folder.
  6. Unzip the ZIP file to create the following files.
    • android-chrome-192x192.png
    • android-chrome-512x512.png
    • apple-touch-icon.png
    • favicon-16x16.png
    • favicon-32x32.png
    • favicon.ico
    • site.webmanifest
  7. Copy-and-paste the following code to your 'home page' and your privacy page, to just below the description meta tag in the head.
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">    
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img//favicon-32x32.png">    
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img//favicon-16x16.png">    
    <link rel="manifest" href="assets/img/site.webmanifest">
    
    For your other web pages, the links will be slightly different.
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/apple-touch-icon.png">    
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img//favicon-32x32.png">   
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img//favicon-16x16.png">    
    <link rel="manifest" href="../assets/img/site.webmanifest">
    

View the favicon in your web browser to verify it works correctly.

Adding more web pages

To add another web page to your website template, follow these steps.

  1. Create a new sub-folder to store your new web page.   For example, to create an 'About Me' page, begin by creating an about-me sub-folder in your 'main' websites folder.
  2. Use another web page on your site as a template for your new page.
    • For example, if you want your new page to have a hero block with a background image, open your javascript/index.html page in VS Code and save it as index.html in your new about-me sub-folder.
    • If you don't want a hero block on your new page, open your contact/index.html page in VS Code and save it as index.html in your new about-me sub-folder.
    Your new page will have now this web address when uploaded to GitHub:   https://mywebsite.github.io/about-me
  3. Update the content of the web page as required.   To use a multi-column layout, copy-and-paste from the bootstrap-practical-layouts.html file you created in the Practical Bootstrap Layouts Tutorial to help you get started.
  4. You will need to add a hyperlink to your new web page in the menu at the top of all your pages.
    • In your 'home' and privacy pages, located in your 'main' websites folder, the new menu link will look as follows. fa-icons-copy
    • In all your other web pages, which are located in sub-folders of your 'main' websites folder, the new menu link will look as shown below. fa-icons-copy

Upload your website to GitHub

The final step is to upload your website pages and folders to GitHub.

  1. Sign in to your GitHub account and, at the left of the screen, click the name of the repository that holds your web pages.
  2. On the next screen, click the Add file button and then choose Upload files from the dropdown list. Project Animation Google Fonts
  3. In File/Windows Explorer on your computer, display your websites folder and then drag-and-drop the following files and sub-folders to the GitHub tab in your web browser. github-upload-drag-drop
  4. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.   Finally, click the green Commit changes button to upload your files and folders.

Your web pages are now published on GitHub. Your Home page has a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/index.html

or, simply:

https://username.github.io

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.