Pinterest Stumbleupon Whatsapp
Advertisement

You want to build a website 10 Ways To Create A Small And Simple Website Without The Overkill 10 Ways To Create A Small And Simple Website Without The Overkill WordPress can be an overkill. As these other excellent services prove, WordPress is not the be all and end all of website creation. If you want simpler solutions, there's a variety to pick from. Read More , but don’t know where to start?

It seems the typical web development training ground is also the most expensive: buy a domain, host server, WordPress account, theme, etc. But what if you’re not a small business owner or trying to build a brand? What if you’re just trying to learn web development, sans clutter?

Read on to learn how to host your own website How to Use a Self-Hosted WordPress Blog for Project Management How to Use a Self-Hosted WordPress Blog for Project Management Read More , which you can create either from scratch or with pre-made templates, on your computer, and for free. Oh, that includes hosting your own WordPress account as well!

XAMPP: An Introduction

Bitnami’s XAMPP is “an Apache distribution containing PHP and Perl.” For our purposes, we only need to understand that XAMPP is a free, simple program which allows users to host websites on their PCs.

While setting up a local server using XAMPP is somewhat technical, the process is also fairly easy and straight forward. Once everything has been set up, you’ll find that managing and editing websites is a breeze.

Then there’s the matter of quick and complete control. Using XAMPP to create and edit websites, you will be able to change as much or as little of a website as you’d like. That said, with great power comes great responsibility. You are more susceptible to losing your sites as well, especially if you do not create backups The Ultimate Windows 10 Data Backup Guide The Ultimate Windows 10 Data Backup Guide Windows 10 makes data backups effortless. We have summarized every native backup, restore, recovery, and repair option we could find on Windows 10. Use our simple tips and never despair over lost data again! Read More .

If you’d like a genuine starter course project in web dev, however, XAMPP is for you. That includes any projects relating to HTML, CSS, Javascript, and beyond!

Installing XAMPP

Head to the XAMPP website and download the package. Follow the default setup process. Once you’ve downloaded XAMPP, your XAMPP control panel should open automatically. If not, you can locate the XAMPP program as you would any other (through Start Menu search).

In your XAMPP control panel window, you should see a simple layout of which XAMPP processes are running. For our purposes, we will focus on the first two options: Apache and MySQL.

Apache — The main crux of XAMPP, the Apache option creates an Apache server on your PC. This is what will allow you to run and edit websites on your PC through web browsers, much like one would a website. Except, of course, this website is running on your PC, as opposed to a server connected to the internet.

MySQL — SQL allows for communication between databases and websites, allowing users to test and store emails, passwords, and any other data inputs. We will use this for your local WordPress account.

Press the Start button in your XAMPP control panel under Actions for both Apache and MySQL. Wait until both Apache and MySQL are highlighted green under your module section. Once enabled, you’re free to use XAMPP.

xampp control panel

Localhost and phpMyAdmin

To ensure everything is in working order, open a web browser, enter http://localhost/ into your address bar and hit Enter. You should be redirected to http://localhost/dashboard/, which is the default XAMPP page.

xampp default web page

Next, click on the phpMyAdmin button on the top navigation menu. You’ll be directed to your default phpMyAdmin page.

phpmyadmin

Leave these alone for now, but if both are working you’re ready to start creating websites!

Creating Websites Using XAMPP

Now comes the fun part. Head to the XAMPP folder located in your root drive directory (C:\xampp by default). Then, head to htdocs. This will be the main website repository you will use in order to view websites.

Before we create and edit a website, you’ll need a text editor. While you can use a default text editor like Notepad, it’s typically best to download a third-party editor made specifically for code and markup 11 Sublime Text Tips for Productivity and a Faster Workflow 11 Sublime Text Tips for Productivity and a Faster Workflow Sublime Text is a versatile text editor and a gold standard for many programmers. Our tips focus on efficient coding, but general users will appreciate the keyboard shortcuts. Read More . Sublime Text is one of the best around, so head to their website and download the software to get started.

Now you can begin downloading and installing websites into XAMPP. I will use the Roadtrip template, but you can use whichever template you’d like. Download the website’s zip file, and keep it in a location you will remember. Next, create a folder within XAMPP’s htdocs folder for your website. I’ve named mine roadtrip — try to keep your name simple. Then, unzip and extract the contents of your zip file to this htdocs folder.

extract to roadtrip

Once you’ve extracted the files, head to your website repository within htdocs to ensure they’ve been extracted correctly.

Finally, head to your webpage in your web browser The Best Web Browsers for Windows The Best Web Browsers for Windows What is your default web browser? Even though we're spoiled for choice, the majority of us stick to the tried and tested major players. What are better alternatives for resource use, speed, and security? Read More . Your website, so to speak, will be reachable using the previously mentioned localhost along with the name of the folder holding your page files. This is because websites are essentially files contained in folders, all under a single domain — or root — name. You’re learning already!

Our previously created folder was named roadtrip, so the full site address is http://localhost/roadtrip.

roadtrip template

You’re done! Now you can begin editing the website locally.

Editing Websites

Open up Sublime Text. Head to File and select Open Folder. Find and select your web folder within the XAMPP folder. You will now be able to edit multiple pages of the same website within your Sublime Text editor.

sublime text

Sublime Text also provides a great interface for you to see every file and folder of your website. To create changes on your website, edit your website’s code, save (using the keyboard command Ctrl + S), and refresh your website within the browser.

edit localhost sublime text

The process is simple and direct: edit the webpage, then check to see if your code works. As you progress in your web development, you’ll attempt to ingrain more complicated features into your web page. No matter the skill level, though, the basic format to edit pages remains the same.

Use WordPress With XAMPP

If you don’t want to edit raw code, or would rather use a more familiar content management system (CMS), WordPress provides its fantastic web design resource in an easy to use ZIP file as well! To install WordPress on XAMPP, head to the WordPress website and download the official application.

Use the same format to create a website as you did previously, with your extracted WordPress folder present in the htdoc directory within the folder wordpress. Maintain the folder name for the sake of clarity.

Using phpMyAdmin

Since WordPress requires that you create login information, you’ll need to create an entry in your PHP directory for the web page. Head to your phpMyAdmin page Set Up Your Blog With Wordpress: The Ultimate Guide Set Up Your Blog With Wordpress: The Ultimate Guide Want to start your own blog, but don't know where to start? You should really look into Wordpress, the simplest and most powerful blogging platform available today. Read More http://localhost/phpmyadmin/ by default — to get started.

From this page, click on Databases. Under the Create database parameter, enter wordpress and then hit Create. You should see a popup telling you the database was created. Next, close this browser window and enter your WordPress folder within the XAMPP htdocs directory. This folder should possess the contents of your unzipped WordPress files.

Configuring Login

We need to configure the actual WordPress website so you can log in and use the site. This is done through WordPress’ main PHP configuration file. Within your WordPress folder, find the file labeled wp-config-sample.php, right-click the file, select Edit (or Open with for a separate text editor). Notepad should work just fine.

Here’s the code we’ll focus on:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');
/** MySQL database username */
define('DB_USER', 'username_here');
/** MySQL database password */
define('DB_PASSWORD', 'password_here');

You will have to make three changes to the code above within the quotation mark.

database_name_here — Change this parameter to wordpress. The website will then use the previously created database in phpMyAdmin labeled as such.

username_here — Change this to root. The root username possesses the proper administrator privileges by default, so it will be allowed through phpMyAdmin. Other usernames will not work unless granted the appropriate permissions.

password_here — Change this to an easily identifiable password. If you would rather not use a password, delete the parameter.

Save this file as wp-config.php — as opposed to the previous wp-config-sample.php — and exit. Then, head to the following localhost address: http://localhost/wordpress.

Proceed with the installation, including the creation of your WordPress Username and Password. You can enter whichever values you’d prefer. Once you’ve finished entering your values, click on the Install WordPress button to finish the process. Once that’s done, log into your local WordPress using the username and password given on the previous page.

localhost wordpress

You’re done! Now, you can spend your heart’s content editing, modifying, and creating web pages both from scratch and through WordPress, offline, and for free The Best WordPress Plugins The Best WordPress Plugins Read More !

Web Development Starts With a Single Page

Before, you were just starting your web development journey. Now, you’ve created a local server on your PC through which you can create, modify, and adapt web pages at a whim. Best of all, you’re completely in control. The only thing that’s left is to start your experimentation, so get going!

What software do you use for web development? Do you have any advice for up and coming developers? Let us know in the comments below!

Image Credits: Dmitry Tishchenko/Shutterstock

Leave a Reply

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

  1. ZentixZaneic
    July 16, 2017 at 12:55 pm

    So, I followed the steps on how to install WordPress, but whenever I went to localhost/wordpress, it just gave me an error saying it couldn't establish a connection to the database. However, when I installed Bitnami's WordPress module to XAMPP, localhost/wordpress worked. Why?