Introduction: How to Create Webpages & Setup Website Using Joomla CMS

By eDIY
About: A place for DIY projects

This is my experience about how to create webpages & setup my personal website using the Joomla CMS (Content Management System) software. My website is 4 years old now, during this time, I learn how to upgrade my website, improve the webpages loading speed, remove virus/malware from website, and a lot more.....SEO, Google Analytic, Google Adsense, Google Captcha, Google PageSpeed Insights, Google Search Console.

Step 1: Web Server

You need a local web server which is support PHP & MYSQL in order to test the CMS software & preview your work in your computer. WAMP, EasyPHP and Softaculous AMPPS are the free Web Server software which turns your computer into a ready-to-use personal web hosting server. For my case, I'm using WAMP.

********************* Recently I'm using Uniform Server *********************

Step 2: PHP Settings on WAMP Web Server

You may want to turn on or turn off some of the features such as "display errors' on the PHP settings. It is advise to turn on the "display errors" for debuging, error messages will appear on top of you webpage if error found on your webpage.

Step 3: CMS Software

I do not know what is CMS software before seting up my website. After many hours of internet surfing about how to develop webpages & setup website, I get an idea what is CMS software. It is very awesome that there have been so many free CMS software and most of them are very easy to setup and use. I have try out many CMS software to find out the right one for me, finally I choose Joomla and Wordpress. Today I'm using Joomla on my website.

Step 4: Joomla Installation (Local Website)

As mentioned above, I'm using Joomla for my website, hence I'm using Joomla for this tutorial as well. Your web server software must be running on your computer before you can install the Joomla CMS.

Installing Joomla is very straight forward, just download the Joomla (current version is V3.6.2) and extract all the files to the WAMP www folder as shown in figure above.

Step 5: Setup Joomla

  • Open up a browser & navigate to http://localhost.
  • The Joomla setup page should appear on your screen.
  • Follow the on screen instructions to complete the setup, below is the field you must fill in correctly before you can proceed to next step:

Server: localhost

Database: anyName

User: root

Password: Blank (no password)

WAMP have a very nice feature that you do not need to create a MYSQL database before Joomla setup, it just need to provide Database name & the user name (root) during Jooma setup that all. After completing Joomla setup, the last screen will prompt you to remove the Installation folder. Just select "Remove installation folder". Done! Your website is ready without writing any code. Now you have the choice to direct to Frontpage (http://localhost) or Administrator page (http://localhost/administrator)

Step 6: Manage Joomla

You can manage Joomla from the administrator page

  1. Open up a browser and navigate to http://localhost/administrator
  2. Log in with your administrator user name and password
  3. Here you can change your layout, manage extensions and write your new articles.
  4. Make sure the FTP account is disable as shown in picture above, otherwise you will not able to manage Joomla on your computer (local site), instead, you are manage Joomla on the remote site.

Step 7: Joomla Extensions

Once again, Joomla is very awesome, there are many free and commercial extensions from the Joomla official website where you can download and installing on your Joomla website. Be honestly, do not install additional extensions on you Joomla website, more extensions will slow down your webpage loading time & make it difficult to upgrade your Joomla. Here are some extensions you might considered:

  1. Template: A basic foundation design for viewing your Joomla web site.
  2. Joomla Content Editor: Allows you to write artice as similar to Microsoft Word.
  3. Joomla CCK (Content Construction Kit): Extend the features of your Joomla core.
  4. SEO (Search Engine Optimization) Plugin: SEO is the process for a web page to be indexed by search engines.
  5. Google Analytics Plugin: Allows you to tracks and reports website traffic.
  6. Google AdSense Extension: Creates blocks to display advertisements on your website.
  7. Social Network Extension: Allows you to insert social icons on your website or in your article.
  8. Backup Extension: Create a site backup that can be restored on any Joomla!-capable server.

Step 8: Template

I'm using the Neutrino template on my previous Joomla 2.5 website, after upgrading to Joomla 3, I'm chaning to a template which is support responsive (mobile & table). If you own a Google Analytic account, you may need a template which is support additional fields for input script to be loaded at the top/bottom of your site. Additionally you must get a template which is support K2 if you are using K2 for your Joomla website. Finally a SEO ready template is preferable.

If you need a fast loading free template, here is an article written by Andrew Brett Watson.

Step 9: Joomla Content Editor

JCE and JCK both are the free Joomla content editor which is similar to TinyMCE (default editor) but come with more features. After upgrading to Joomla 3, the new TinyMCE editor is now added many new features, therefore I would suggest to stick on TinyMCE.

Step 10: Joomla CCK (Content Construction Kit)

I would suggest to use K2 if you needs CCK for your Joomla website. K2 have some nice features that Joomla core is not included, below list the K2 features using on my website.

  1. Tags & Sub Categories
  2. Click on image (same as click on "Read More" button) for full article
  3. K2 comments below/above articles
  4. Facebook like, Twitter, Google+ button below articles
  5. AddThis Social Network
  6. Google Captcha: Spam protection for comments

Note: Do not install any CCK such as K2 if you don't need it. Not all extensions are supported by CCK, it may slow down your webpage loading time and make it harder to upgrade your Joomla website.

Step 11: SEO Plugin

SEO plugin automatically generates description meta tags by pulling text from the content to help with SEO, making your website easy for search engine robots to understand. My first Joomla website was using the SEOSimple plugin, but now I had abandoned SEOSimple plugin since my K2 template is built with SEO.

Step 12: Google Analytics Plugin

Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic, it has many ways to track your website traffic such as Language; Location; Browser; OS; etc. You need a Gmail account in order to sign-up Google Analytics, please visit here on how to Create a Google Analytics Account.

Step 13: Google Analytics Tracking Code

You will get a Google Analytics tracking code upon sucessful creating the Google Analytics Account, you'll need this in your Joomla setup.

Step 14: Setup Google Analytics

It is easy to setup Google Analytics tracking on my Joomla website since my K2 template support "additional fields for input script to be loaded at the top/bottom of my site". Just copy and paste the snippet of JavaScript into the additional field on my template settings as shown in figure above.

You need to install Google Analytics plugin if your template does not support additional fields for input script to be loaded. I was using Asynchronous Google Analytics for my old Joomla 2.5 website, it adds the required javascript for Google Analytics in my webpages.

To use the Asynchronous Google Analytics plugin, you need to enable the plugin and fill in the Google Analytics tracking ID as shown in figure above.

Step 15: Google AdSense Extension

Google AdSense is a free, simple way to earn money by placing advertisements on your website, you need a Gmail account in order to sign-up Google Adsense. Although it is free, but it is not easy to get approve from Google. Once you're successful, please login to Google AdSense and create your AD units as shown in figure above.

Step 16: Create Ad Units

You can create as many Ad units as you like, each AD unit you create is corresponds to an AD code, you can't delete the AD unit once it has been saved. After creating the new AD units, you must wait for one day before you can use it, otherwise it will show a blank AD block on your webpage.

Step 17: AD Extensions

There are free and commercial AD extensions for Joomla, eg. the free Phoca-GAE which can be configured as a module or a plugin. You must copy and paste the desired AD code (snippet of JavaScript) to the Phoca-GAE settings before you can use this module.

As a module, it shows AD according to the template module position

  1. Select a position from the list.
  2. select "On all pages" from "Menu Assignment" tab.
  3. Enable the module.

As a plugin, it insert AD code in the article, allowing the AD appear inside the article

  1. Enter a new name (eg. GoogleAD) for the position (do not select the existing position).
  2. Enable the module.
  3. Write an article and switch to source code mode (text mode).
  4. Locate the position where you want to insert the AD and put the code {GoogleAD}.

Hints: You can add a custom button to the editor page which allows you insert code in the article without toggle the editor.

Step 18: Social Network Extension

Here are some Social Network Extension tested on my website.

Fast Social Share plugin

Fast Social Share plugin is able to display social share buttons below the article, this is a free extension but not support K2.

Nice Social Bookmark module

This free module shows icons from 12 most known social sites (delicious, digg, facebook, google bookmarks, linkedin, myspace, newsvine, reddit, stumbleupon, twitter, pinterest, and rss feed)

Responsive Social Share plugin

This free plugin is able to display social share buttons below the article, K2 may have problem.

K2 Addthis Social Network

K2 allows you to add social sharing buttons on your Joomla website without installing additional social network extension. K2 integrated the Addthis social network extension which display the social share buttons below the article automatically.

Step 19: Addthis Sharing Sidebar

You can create a Sharing Sidebar with Addthis social network extension, the Sharing Sidebar will display the sharing buttons that is floats on the side of your page.

  1. Signup a new Addthis account.
  2. Choose Tools and select Share Buttons.
  3. You can only select Sharing Sidebar or Sharing Buttons for a free account.
  4. Follow the on screen instructions to select your theme and get your Addthis code as shown in figure above.
  5. Login in to your Joomla administrator page (http://localhost/administrator)
  6. Choose Components>K2
  7. Click on Parameters button on the top right screen.
  8. Click on Social tab.
  9. Copy and Paste the above snippet of JavaScript into the "Social button code" box as shown in figure.

Step 20: Comments Extension

The Comments Extension lets people comment on content on your site. I was using Jcomments for my old Joomla 2.5 website, due to some reasons it is not working in my Joomla 3 website, I give up on using Jcomments. K2 has integrated (built-in) comment system is easy to use and requires little configuration, now I'm using K2 comments.

Step 21: Google Captcha (reCAPTCHA)

reCAPTCHA is a free service that protects your website from spam and abuse, to use reCAPTCHA, you need to sign up for an API key pair for your site. After you have your site registered with Google reCAPTCHA, you get a public and a private key in order for the code to function in your web pages.

Step 22: Setup ReCaptcha

After getting the API key, you need to copy and paste the reCAPTCHA public key and private key to your K2 Anti-spam Settings as shown in figure.

Step 23: Test the ReCaptcha

Now you can test your comment system. When you comment on the article, you must verify you are not a robot before you can submit the comment. As shown in figure is the old reCAPTCHA (V1.0) style and new reCAPTCHA (V2.0) style appear on my old Joomla 2.5 and on my new Joomla 3 website respectively.

Step 24: Joomla Backup

It is suggested to backup a copy of your website to a compressed file before uploading to the remote site. Akeeba Backup is a backup extension which creates a full backup of your site in a single archive, allowing for site transfers or even deploying sites to your clients' servers.

The backup archive is a compressed jpa file, you must download the Akeeba eXtract Wizard and installing to your computer in order to extract (uncompressed) the jpa file.

Step 25: Web Hosting

In order for your website to be available to anyone at anytime, you need to host your webpages with a web host. Additionally you need to register a domain name (eg. ediy.com.my) for your site that allows your visitors to easily access your site by name. The web hosting companies can provide these services for you.

There are basically two different hosting technology, the Linux hosting and the Windows hosting. I'm choosing Linux hosting for my Joomla website, the requirements for hosting Joomla 3 are as follows:

  1. Software: PHP (Minimum: 5.3.10)
  2. Supported Databases: MySQL (Minimun: 5.1), SQL Server (Minimun: 10.50.1600.1), PostgreSQL (Minimun: 8.3.18)
  3. Supported Web Servers: Apache(Minimun: 2.0), Nginx (Minimum: 1.0), Microsoft IIS (Minimum: 7)

After puchased a hosting plan from a web hosting company, you get a domain name and a login ID used to access the control panel. A control panel is a web-based interface provided by the hosting company that allows you to manage their various hosted services in a single place.
The image shows an example of a control panel interface.

Your web hosting company should provide the following informations used to access your website:

  • A URL access to control panel (eg. https://yourDomain.com:2083)
  • Login userName and password used to access control panel
  • A URL access to FTP (eg. ftp.yourDomain.com)
  • Login userName and password used to access FTP
  • A URL access to webmail (http://webmail.yourDomain.com)
  • Login userName and password used to access webmail

Step 26: Create a Database

You must logon to control panel and create a database for your site, after a database has been created, at least a user account must be assigned to that database with full control. Different hosting companies have their own ways to create database, please refer to your hosting company on how to create a new database.

Step 27: Upload Web Files to Remote Site

Basically there are two ways to upload web files from your computer (local site) to the remote site (web hosting server), by using a FTP client software such as FileZilla or using the web-based control panel provided by your web hosting company.

You must upload the backup set (not the current working set on you computer) create by the backup software to the remote site, the current working set will not works for you since the "Installation" folder is missing and is unable to start the installation wizard. As mentioned above, I'm using Akeeba Backup to backup my site, it is a single archive with the jpa file extension. If you upload the jpa to your site, it may not recognized by your web server since most of the software is not supported for jpa file format. Therefore you have two choices:

  • Extract the jpa file to your local computer and then upload them one by one: I would not recommend this procedure since it will spend longer time to upload all your files from local site to remote site.
  • Extract the jpa file to your local computer and then compressed them to a file format which is recognized by your web server: You upload a single compressed file such as ZIP to your remote site, the ZIP file is then extracted from your remote site using the web-based control panel.

You must transfer all you web files to your website root folder. For linux hosting like mine, I'm upload the files to public_html folder.

Step 28: Installation Wizard

Once all the file has been transfered to web server, next step is to open a browser and navigate to your website (eg. http://yourDomain.com), the installation wizard should start upon installation files found in the installation folder as shown in figure above.

Follow the on screen instructions to complete the installation, you must fill up the following field correctly before you can proceed to next step.

  • Server: your website name (eg. yourDomain.com) or your website IP (eg. 14.102.103.104)
  • Database: the database name that you created previous (see here)
  • User: the user of the database
  • Password: the password of the user

After completing the setup, it will prompt you to remove the Installation folder. Just select "Remove installation folder". Done! Your website is ready. You can browser your website anywhere at anytime.

Step 29: Google PageSpeed Insights

Page Speed Insights measures the performance of a page for mobile devices and desktop devices, just enter your website url and click on the ANALYZE button to start website analyzing. You’ll be presented with a grade and a list of recommendations from Google as shown in figure.

You should download the ZIP file which included the optimized image, JavaScript, and CSS resources for this webpage. I would like to highlight the optimized image, it is a folder which containts a list of images that is optimized (reduce file size without losing quality) by Goggle, you should replace your original images on this webpage by these optimized images in order to make your webpage load faster.

Step 30: Google Search Console

Google Search Console is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results. I use Google Search Console to submit new content (sitemap) for crawling. You must sign in Search Console with your Google account in order to setup your site with Search Console.

Step 31: Setup and Verify Your Sites

You must setup and verify your sites (both www and without www) before you can use the Search Console. Here I'm using www.ediy.com.my and ediy.com.my as the examples, Search Console treat them as two domains and you have to decide which one is the preferred domain as shown in figure below.

Step 32: Sitemap

After you have setup and verified your sites, it is time to generate your sitemap file using the sitemap generator software. The sitemap.xml file is then upload to the root folder of your website (eg. /public_html). Finally you submit your sitemap directly to Google via Console Search, this makes it easier for Google to crawl and categorize your site.

Step 33: Remove Google Blacklists

On the 18 Jun 2016, Google send me a email about my website was infected by malware and my website is blacklisted by Google. In order to remove the blacklist from Google, I have to clean my site and sign in to Search Console to request a Review, after few days Google removed the blacklist.

My website also blacklisted by McAfee SiteAdvisor on that day, I also request a review from McAfee.

Step 34: How to Remove Virus/malware From Website

My website was infected by malwares twice, I manage to remove them with the help of my hosting company and myself. The first issue was happened on 2015, my hosting company send me a email that there were unusual activities on my website and need to take action as soon as possible. I know how to scan and clean virus/malware from my computer, but I have no idea how to clean it from my website. Fortunately my hosting company is able to help me with this issue, they list out the suspicious file names and inform me to replace them with the previous backup.

The second issue was happened on 18 Jun 2016 as mentioned above (Google Search Console), my hosting company is unable to find out the problem on this matter. Luckily the solution is simple, I downloaded all the files from my website and scan them on my computer. Result shows that an index.php file in the template folder is infected by JS/Redir malicious software.

Step 35: CDN (Content Delivery Network)

CDN is a system of distributed servers (network) that distribute your content around the world so it’s closer to your visitors and hence speeding up your site. I'm using CloudFlare service for my website, it is free.

You need to sign up a CloudFlare account for your site in order to use the CloudFlare service, and you must change the nameserver to Cloudflare by contacting your hosting company. After my website is activated on CloudFlare, the loading speed has increased tremendously.