How to Migrate Your Existing HTML Website To Joomla

Joomla is an open source and free content management system (CMS) that enables you to create reliable websites. It is written in PHP and built on model-view-controller (MVC) web application framework. It is free and uses object oriented programming concepts (OOPS). It stores data on MySQL and supports features like RSS feeds, blogs, caching etc. It leads to a high-end clientele.

Joomla enables you to create content-rich interactive websites. It is commonly used to create online stores and other useful business-related websites. A Joomla template defines how your website will look and how web pages would be displayed, in short, it projects the outlook of your website.

Joomla Development Cycle

Some amazing facts about Joomla:

1. It is the second most used content management on the internet.
2. It has been downloaded more than 50 million times.
3. It has over 8000 both commercial and free extensions.
4. The Joomla! The official website has more than 2 TB of traffic each month.
5. Stores data in MySQL, PostgreSQL, MSSQL.
6. About 5 extensions are added to Joomla Extension Directory each day.

As going through the above facts about Joomla, you must have figured it out as to why it is the most sought after CMS.

As per Google and Yahoo, there are nearly 30 million websites across the globe that have been created on this platform. Here are some well-known websites that have been created on Joomla.
– Linux – linux.com
– Leonardodicaprio.com
– Gsas.hardvard.edu

How to Move

So, if you have an existing HTML website built with Dreamweaver, Frontpage or any other HTML tool and want to migrate to Joomla, then you are at the right place. This blog post will guide you about HTML to Joomla conversion and will highlight some point on converting an HTML website to Joomla.

The process consists of multiple phases of keeping the focus on online visual presence and existing layouts. You have to make the modification locally and then upload the new files to your hosting account. A Joomla website offers all the flexibility a typical CMS application provides, thus, making people consider the thought of converting an existing HTML website to Joomla under consideration.

The conversion process can be divided into two phases – first adding your information and then incorporating the new changes made. It is advisable to include your data first because depending on it, it is much easier to design the website with real-time information and web pages.

You don’t need to have an in-depth knowledge of HTML and the good point is that you can easily update your contents whenever you feel the need to do.

An overview of HTML and Joomla (HTML vs Joomla):

Though, both are the tools of creating and managing websites but still, they differ on certain points.

HTML and Joomla

  1. Technical skills: for creating HTML websites you need to have a good understanding of programming languages it is the prerequisite. You need to be familiar with the technical jargon and must be familiar with the coding skills, on the other hand, you don’t need to have any coding experience even a layman can create a website on Joomla.
  2. Plugins/Extensions/Modules: Another drawback of HTML websites is that you don’t get to enjoy the privilege of incorporating plugins and extensions into the HTML websites that means that you have to code everything you have to code if you want to add any feature to the website whilst, Joomla has over 8,000 free and commercial extensions.
  3. Cost: with time websites need some modifications and to remove obsolete functionality to be replaced by new functionality, therefore, making it hard for you to make changes in the website in updating it. If you are exceptional in coding, then it is a cake walk for you but for layman they have to seek the assistance of developers who are well-versed with the coding, thus, increasing your investment.
  4. Updating: websites need to be updated to keep any online threats at bay. The more updated your website is the more it is secure and will function optimally but in HTML it is hard to make some changes in the website and to update it for the same reason while with Joomla websites, all you have to do is install a new template to change the design completely and is easy to update.

Thinking of migrating of Joomla after going through the above-mentioned points? You should as soon as possible. The following is the layout of steps that you need for converting your existing websites to Joomla.

– First, you have to migrate the existing design into Joomla theme.
– indicate HTML and Joomla website URL.
– download the connection bridge.
– convert the existing site to Joomla CMS.
– then port the site with newly added information.
– extend modules, extensions and plugins.

Convert HTML website to Joomla

Convert HTML website to Joomla

1. Prepare the Template:

Before migrating to Joomla, the first thing you need to make sure is that the template is both xHTML and CSS compliant as well as W3C complaint as this is the necessary step for programming HTML files to Joomla. Create a Joomla template from any readable file format !< ul class = “bullets”>. Open your Joomla folder and place all HTML and CSS files and any associated files in a single directory of this folder. Locate the index.html file for your HTML template and rename it as index.php.

template manager

Click on the “Extensions” and then select “Template Manager” and select the desired template. Before working with the Joomla template, we recommend you to download all the required applications for the smooth functioning of the template. The requirement may vary with different operating systems but few things that are common:

– You need a good application for extracting passwords protected sources _#########.zip archive. You can use Stuffit Expander 10+ (Mac) and WinZip 9+ (Windows).

– You need to install Adobe Photoshop application for editing. As you may want to edit template design and enhance the graphics.

– Keep some code editors handy such as Adobe Dreamweaver, Sublime Txt, Notepad ++ because you have to edit template source code files.

– After creating the template you have to upload the files to the server and for that you need FTP Manager like FileZilla, Total Commander, CuteFTP etc.

2. Replacing the Header Codes:

After creating the template, the next is to replace all the header codes in the HTML template with Joomla. Delete all the code between the below code

the <head></head> tags and replace it with the following code: 

 

Now, find any <div></div> tags and delete the codes between them and insert the following code for your Joomla content.

 

After doing this save and close the index.php file.

3. Replacing the HTML Code:

As with HTML websites, you’d created some files and coded that. You need to replace all that codes and add some PHP code to the files. Insert the following code for replacing body tag in HTML file.

unnamed

unnamed-2

4. Create an XML Manifest File:

XML manifest file lists all the files used in the template. If you don’t use it, then it might cause some errors in your Joomla template. Ensure that the XML manifest file, index.php file and index.html are all in the same directory with their relevant content. Create a Zip file of these files and archive it in your Joomla template via Joomla Administration.

xml-manifest

5. Module Position:

To place a module within the folder you have to set the module’s position in your template sidebar. Following are the basic functions of Modules in a template and can be changed with time:
1) Modules can be turned on and off based on the menu selection.
2) Modules are set to position in the template.
3) Modules can be assigned to their position using Modules Manager.

Click on Extension Manager > Template Manager and then select the Options button in the toolbar. Under the Template Tabs ensure that Preview Module Position is set to enable.

EM

6. Adding the Module to your Template:
Modules are assigned to positions and menu items. You need to create a Module position by adding the either of the codes:

addyourcode

Or this one

picture-12

7. Packaging your new template:

Package your new template and compress it in a zip file. It is the zip file that contains the main folders and files for the template, including JavaScript, PHP and CSS code.

Steps for packaging your Joomla Template:
I. Log into your Joomla administration
II. Click on Install Extensions in the left menu or Extension Manager in the top left.
III. Click on Upload Package file.
IV. Select the choose file, once selected, press the Upload and Install button to get started. Within few seconds your template will be ready to use.

emanager

emi

8. Upload to your Hosting account:

As you have the zip file of your Joomla template and if you don’t, then compress it into a .ZIP file. Go to Extensions > Extensions Manager > Install. Browse the .ZIP file and upload it.

Transfer your files to the server where you want to host it and for that you need FTP. FTP is a way of transferring files across the web. It typically consists of:

– FTP ADDRESS: it is similar to your domain name i.e. Ftp.domainame.com
– FTP login details: your credentials for accessing the FTP area.

abc

add-file

9. Test and securing the Website:

Check all the modifications you have incorporated in your website and ensure that everything works fine and has been setup correctly. All the configurations must work properly. You should take all the necessary steps to securing your Joomla website as to avoid any kind of cyber attack.

Don’t let everyone have access to your website. Limit the accessibility so as to keep cyber attacks at bay.

user-configration
You can follow these steps for securing your Joomla website:
1. Keep updated your site.
2. Manage your extensions.
3. Remove unused extensions or that you no longer use.
4. Use strong password.
5. Use proper file ownership.
6. Use SSL certificate.

As you can see, following these steps you can easily migrate your existing HTML site to Joomla. This is not something that should be tried or attempted by a person having a rich technical expertise, even a layman can convert the HTML site to Joomla.

I hope that this blog post will assist you in having a Joomla site. If you think that any section of this post needs more details or if you have any doubt, please comment below and we will provide more information.

 

emilysmith

Emily Smith is an ed-tech enthusiast and has been associated with CWS Technology as a writer for more than 7 Years. CWS is the leading web development company that provides all IT solutions. Emily has a passion for writing on emerging technologies like application management outsourcing, consulting, system integration etc.

Latest posts by emilysmith (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *