- Internet & the Web»
- Web Page & Web Site Development
How to Create Your First Joomla! Site
How to Create Your First Joomla! Site
Are you looking to build your own website for free? Are you looking to upgrade to something more sophisticated than a blog? And maybe you were looking for a software that does not require any programming knowledge and supported by a large user base? If you answered yes to any of the above questions, then join the ride as I teach you how to create your very own Joomla! website!
This tutorial assumes you don't have any previous knowledge of making websites, and that you don't have a hosting account yet. The tutorial also assumes, you find a standard Linux web host with a CPanel and that is configured to run Joomla! with no problems. 99% of web hosts do. But check with the web host's customer service if unsure. Readers of other backgrounds will still benefit from this tutorial, but would need to skip some parts and do other parts a little differently. With that being said, let's begin!
Step 1: Download the software
Joomla! software is freely available under the GNU/GPL open source license. This means you are free to take the code, modify it, distribute it, or charge for projects built with it; on one condition, that if you distribute the code, you grant others the same right to do anything they want with the code.
To download the Joomla! software, go to www.joomla.org and find a button which says 'Download', or 'Get the Latest Version'. In this tutorial, we will install a 1.6 version of Joomla!, so please download the latest Joomla! 1.6 package, so that these instructions and your software match. Please save this package to a location on your computer which you can easily remember in the future, as you will need to upload this file later.
Step 2: Find a web host
To make your website available on the internet, you need to sign up with a hosting service. There are a multitude of web hosting companies out there, both paid and free. If you need a hosting service, just look for 'web hosting' through your favorite search engine.
When you are signing-up with a web host, they will ask you whether you want to register a new domain, transfer your domain, or set nameservers for an existing domain. A domain is your internet address. This is what visitors would type into
their internet browsers to visit your website. Examples of domains are
joomla.org, facebook.com, etc. Some web hosting companies will give you a
free subdomain in the form yoursite.hostingcompanysite.com. But it's
better to register your own domain name, because it would make it much
easier for your visitors to remember your site. Domains cost only around $10 a
year. If you don't have a domain yet, you can register a new domain at this point.
After you sign-up with a web host, you should receive an email from them with very important information. Keep that email handy, as we will need the information from there for the next steps.
Step 3: Upload your files to the web host
Most web hosts use a control panel called "CPanel" to help you manage your websites. The email you receive from your web host should have the url to your CPanel login screen, as well as the CPanel username and password.
Once you login to the CPanel, you can upload the file you downloaded from joomla.org. The quickest way to upload the file would be to find a section called "Files" inside CPanel and to click on the "File Manager" button. In the screen that pops-up, choose the default option 'Web Root (public html/www)' and hit 'Go'.
Inside the File Manager, find a folder named after your domain name. With some web hosts, you will see this folder when you open the File Manager. With other web hosts, this folder will be inside another folder such as 'htdocs'. You will need to upload the file you downloaded from joomla.org into this folder named after your domain name. To upload, click the 'Upload' button at the top of the File Manager screen, then click the 'Browse' button to select the Joomla! package file you downloaded earlier to your computer. The upload will start as soon as you select the file. The upload should be taking place in a separate tab or window, so you can go back to the File Manager tab when the progress bar notifies you that the upload is complete.
What you just uploaded was a compressed compilation of your Joomla! software files. You need to extract files from this compressed compilation. When you are inside the 'File Manager', you should see an 'Extract' button at the top of the screen. Select your compressed compilation and click on 'Extract'.
Step 4: Install Joomla!
Now, type your domain address into the web browser. You will be redirected to the first installation screen. The following installation instructions will be on Joomla! 1.6. Other versions of Joomla! will install pretty much the same way.
For the first step, select the language to use for installation instructions and click next. The software will run a pre-installation check. Any decent host should allow you to install Joomla! with no problems. Click Next. The next screen is an explanation of the GPL license. Read it if you want, and click Next. The next step is database configuration.
Database is a collection of tables, similar to tables in Microsoft Access software, if you're familiar with it. The role of the database is just that, to store data of the website. If will store your Joomla! software configuration, articles, menu names, etc. Joomla! uses a type of database called MySQL. MySQLi is an optimized version of MySQL. So for 'database type' option on the 'database configuration' screen leave 'MySQLi' option selected, unless it causes problems.
The 'Host Name' field, will be pre-populated with 'localhost', because that is what most web hosts use for host name. If you leave that field at 'localhost', you should be fine.
Now we will create the database for our website. Go back to your web host's CPanel and under section 'Databases', click on 'MySQL Databases'. Under 'Create New Database', enter a desired database name and click 'Create Database'. If database creation was successful, it will say so, and you can click the 'Go Back' button, to go back to the screen with a list of databases. Please note that the name you entered is preceded by a prefix and underscore. When you enter your database name at the Joomla! 'database configuration' screen, you would enter the name with the prefix and underscore.
Then, you need to create a user and give that user 'permission' to access that database. On the screen you are currently at, just scroll down a little until you see 'Create New User'. Enter a username and password of your choice, and click 'Create User'. Again note, that the username is preceded by the same prefix and underscore. So when you enter the username at the Joomla! database configuration screen, you would enter the username with the prefix. After you have successfully created the user and went back to the screen with a list of databases, scroll to the very bottom of the screen where it says 'Add User to Database'. The correct names for database and user should already be selected. Just click on the 'Add' button. On the screen you are taken to, check 'All Privileges' box and click the 'Make Changes' button.
Now go back to your Joomla! installation screen and enter the username and password for the user you created, and then the name of the database you created. Remember to include the prefix and underscore for the username and database name.
For 'Table Prefix' field, that comes next on the database configuration screen, you can leave the default prefix, or you can enter another prefix of your choice, for enhanced security. Make sure the prefix ends with an underscore.
For 'Old Database Process', just leave the default option selected.
Once you're done entering the fields for the 'Database Configuration' screen, you can click 'Next'. If you spelled all the entries correctly, there should be no issues. If you didn't, the software will complain with an error message.
The next step is the 'FTP Configuration' screen. It will say that most users would not need to complete anything in this step, and that's true. Just click 'Next'. If there is a problem, select 'Yes' for 'Enable FTP layer' option and click 'Next' again.
The last step is the website configuration step. For 'Site Name' enter the name of the entire website. This is the name your website will be known as in the search engine listings. Choose a name that would best describe the theme of your website. For 'Your Email' enter the email address where you want all correspondence from the website to be sent (this includes all emails your visitors will send you through the site's contact form. For 'Admin Username', it is suggested you change it to something other than admin, for security purposes. And lastly, enter the desired password for the admin account of the site. It is advisable that this password is different from the password for your database, for security purposes. Just remember to write down all the usernames and passwords you are creating, otherwise you won't be able to enter your own site!
This screen will also have a 'Sample Data' button. If you click on that button, sample data will be added to the website. This could greatly help you explore the basic features of Joomla! as a novice user. Click 'Next' once you are finished with everything.
If all went well, you should see a 'Finish' screen. It will tell you to better remove the installation directory, or else, it will not let you use the website. Just click 'Remove Directory' and the software will remove the directory for you.
Congratulations! You have installed your first Joomla! website! Now, I will show you how to do some basic things with Joomla!
Step 5: Add New Article
If you are still at the 'Finish' screen of the Joomla! installation, click on 'Administrator' button at the top of the screen. Enter login credentials for the admin user you have created. You will be logged into the administrator back-end of the site. In the future, you can login to the administrator back-end, by typing in yousitename.com/administrator, where "yoursitename.com" is your domain name.
To add a new article, click on 'Add New Article' at the main screen of the administrator back-end. The only required fields are 'Title', 'Category', and 'Article Text'. Just enter a title, some article text, and select a random category for now. Then for 'Featured' option, select 'Yes', so that you could see this article on the front-page of the site. Once you're done with the article, click 'Save & Close' button at the top. You will be notified that the article was successfully saved.
Now it's time to preview your new website! Click on the 'View Site' button in the top right corner of the screen you are currently at. You will see the front-page of your site. Let me briefly describe what you are seeing here.
At the very top is the 'font re-size' buttons, which allow your visitors to make the page's text font bigger or smaller for better reading. Next to the 'font re-size' buttons is the search field for searching through the site's content. Below that, you will see the site's main menu. In the left column, you will see additional menus. Below the menus, in the left column, is the login box for the front-end of the site. This is useful in cases, where you, for instance, have several content contributors, and you want to give them limited access to non-administrative tasks of the website. In the main region of the site, you will see the articles that are currently published on the site. The article you created earlier will be at the very top.
Step 6: Add a Module
Modules allow you to position content in various parts of the page. For example, the menus you see and the login boxes, are modules that are placed in the positions to the left and above the main content area. Let's create a new module so you can get a feel for the process.
Go back to the administrator's back-end, and click Module Manager from the main page, or select Extensions->Module Manager from the menu at the top. Click the 'New' button. You will be prompted with a screen, listing the different module types you can create. For now select 'Custom HTML' option. Enter 'Ads' for the 'Title' field. In many cases, for the 'Show title' option, you would want to select 'Hide'. This will hide the title of the module to the visitors, but show you the title in the administrator back-end. For 'Position', click the 'Select Position' button and choose 'position-7'. You might need to go to the next pages of the list of modules to see that position option.
Then, scroll down a little, until you see a text box called 'Custom Output', with a wyswig editor. On the second row of buttons on that wyswig editor, you'll see an icon with letters 'html' on it. Click on that icon. This is where you could enter html code. Enter your Google Adsense code or any other html embed code (YouTube videos, Amazon products, you name it...). Then hit the 'Update' button at the bottom of the screen.
Below the wyswig editor, you'll see a section called 'Menu Assignment'. Joomla! 1.6 allows you to assign modules to selected pages, all pages, or all pages except the selected. You can select pages you want this module to appear on, or just leave the defaults, to display it on all pages.
The last thing to do, to make this module live, is to click on the 'Save & Close' button at the top of the screen.
Now that you are back at the 'Module Manger' screen, you may unpublish all the other modules you don't need. To do that, just check all the boxes next to the modules you don't need, and click the 'Unpublish' icon at the top of the screen. The 'check all' box at the top of the table can help with this task. You can publish the modules again later, to explore the different things you can do with Joomla!. Unneeded articles may be unpublished the same way, by going to the Article Manger we were at when we created our article.
Step 7: Create a new page
Our last step for this tutorial would be to create a 'Contact Me' page. In Joomla! you create new pages, by creating new menu items. In the administrator back-end, from the menu at the top of the screen, select Menus->Top->Add New Menu Item. You will be presented with a 'New Menu Item' screen. Locate the 'Menu Item Type' field and press the 'Select' button next to it. In the screen that pops-up, under 'Contacts' section, select 'Single Contact' option. Now in the right column of the 'New Menu Item' screen, under 'Required Settings', click the 'Change Contact' button, and choose 'Webmaster'.The only other field that is required, is the 'Menu Title' field. Type 'Contact Me' for that field, and click on the 'Save & Close' icon at the top of the screen to save this menu item.
Now we need to assign our admin user we created at installation to this contact form page. From the top menu in the administrator back-end, select Components->Contacts->Contacts. In the 'Contact Manager' screen that opens, select the 'Webmaster' title from the table. In the right column, under 'Publishing Options', click on the 'Select User' button, and select 'Super-user' in the window that pops-up. Then click 'Save & Close' button at the top of the screen.
In this tutorial, you have installed your very first Joomla! website. If the instructions were clear enough, you should now be able to add new articles, earn revenue from the Adsense module, add other embed code to your site, as well as receive questions from visitors; the basics of a personal website. The sample content we installed during installation, has many articles on other features of Joomla! Now is your time to explore those articles. Join me next time for more tutorials on this powerful content management system called Joomla!.