Jasmine Web Starter

Areas to check before deploying your website

If you have followed our tutorial you will have seen and learnt how to build and publish a website.

You did this using a set of files that were included in the template repository. Some of these files we gave you short explanations about within the tutorial, while others were only mentioned briefly.

So we are going to explain a little bit more about these below. Plus some other areas we feel you should check, to make sure your users get the best viewing pleasure.

Content

The text and images for your website.

Its a good idea to make sure that each page of the website has a title, meta description and that the headings are in descending order within the page.

Make sure your images have meaningful names and within the webpage the image has a meaningful alt tag describing the image.

You should also make sure your text is of a readable size, with a good contrast between background and foreground colours, which will mean the widest range of people will be able to read your content.

Hosting

This allows you to share your website with others.

We have so far only covered hosting using GitHub Pages which you can find here on our Set up GitHub Pages docs page, but we do plan to cover more soon.

Though hosting varies so much, with many options to choose from. But typically you are paying a month fee for an account that offers you disk space to store your website on, which is then served to your users.

Web Hosting accounts offer many other features too, though key ones to look for are a CDN (Content Delivery Network) and free SSL (Secure Sockets Layer).

Hosting is also where you can configure your domain email within, so you can send email as you@yourdomian.com and not a free email provider. Which gives your customers more trust in your company.

Most hosting packages today offer a free SSL certificate which will auto renew every three months. You can also set the hosting account to always use SSL which is best.

Domain Name

The Domain Name is a friendly name that users can use to view your content.

A domain name is purchased per year basis and remembering to renew it is important, but you can set auto renewal up to help with this.

We now have a Domain Name section in our docs with pages on Domain Names Explained also how to Register a Domain Name plus Domain Name Tasks

favicon.ico

The sites Favicon is a small icon which shows up in the browser tab or when you bookmark the page.

We have found this free tool from realfavicongenerator.net really useful. It converts your PNG, JPG or SVG image into a set of favicon files necessary for using on all the different platforms, browsers and technologies.

You can read more on Favicon's in our Expectations and The Unknown of the web Sprout of Wisdom Tip.

Robots.txt

A robots.txt file tells search engine crawlers which URLs the crawler can access on your site.

It can also show the location of the sitemap.xml and be used to block or allow AI type crawlers.

For more information about Robots.txt files take a read of Googles guide also in our Sitemaps for your users and for search engines Sprout of Wisdom.

Sitemap.xml

A sitemap tells search engines which pages and files you think are important in your site, and also provides valuable information about these files.

For more information about Sitemap files take a read of our Sprout of Wisdom tip Sitemaps for your users and for search engines and also Googles guide.

Custom Errors

If your user finds a page that does not exist, then you can serve up a friendly page with some helpful tips. Which can be styled the same as your website so that a user still feels they are on your site.

Its typical to make a 404 page not found, and a 500 page which means something has gone wrong with the server.

So you will need to make two webpages, and configure the error pages in the website hosting console.

If you have used our template files you will have a basic 404 error page ready for you to customise to your website which we show you the steps to do here in our Lets Make an Edit doc. Also on our Set up GitHub Pages docs page we explain how to test your error pages are working.

Testing

Once you have configured hosting and uploaded the contents, its always a good idea to browser test each page in turn. Looking for any issues such as missing images with the wrong source paths, incorrect internal (other pages) or external (other websites) links. As well as manually looking for errors you can also use the dev tools network tab, which will highlight any 404 errors on each page. 404 errors are also reported in the dev tools console tab.

You could then further test your site for any accessibility and performance issues in the browser by running Google's Lighthouse audits on each page, you can read more about Using lighthouse to performance and Accessibility test and also about Common lighthouse errors explained in these Sprouts of Wisdom tips.

We have plans to release some more short tips to build on these points highlighted, plus other general tips to running a website. Their links will be added here when published.