- This Cookbook shows, how you can install XAMPP on an Windows-PC to use it for Kirby as a development system.
Hint: Follow it step by step!
Important Safety Notice:
XAMPP should not be used as a web server, that can be accessed from the internet! The safe operation of the web server is not guaranteed with XAMPP (look at the first section of About for details or in German at FOCUS berichtet: XAMPP ist schuld am Hack der Bundespolizei)!
- For me as an civil engineer I give only technical informations here. You will NOT find any instructions on how to design a web page!
- Learn as much as you can about PHP, HTML5 and CSS,
starting in German e.g. at SELFHTML-Wiki .
- Learn about Kirby:
read the whole Docs before you start developing!
Hardware and software for windows computers
- any windows computer (PC)
– with WinXP (no longer safe!), WinVista, Win7, Win8 or Win8.1, in future Win10; 32 bit or 64 bit
– as desktop, laptop or notebook
- an USB hard drive (no USB stick!)
e.g.: 500 GB, 2.5 inch drive, UBS 2 or USB 3 (about 55 euros including VAT in Germany, less than 0.15 kilogram, very small).
I just have to transport this hard drive and have all the software as well as all data and files at hand. Therefore, I usually do not require Internet access in order to see the website and edit it during the developing.
I assume in this cookbook, that this USB hard drive is drive “
If you want to develop the website only on your PC, you can save the investment of an USB drive and then use your normal hard disk drive. In this case read “
C:” instead of “
E:” in this cookbook!
I use on my private PC (Win7 64-bit, 8 GB):
- XAMPP, look at the next chapter “Step 1”,
- Notepad++, one of the best editors I know,
- GIMP, a very good raster graphics editor,
- Inkscape, used to draw and edit vector graphics,
- IcoFX version 1.6.4, to build the icon in *.ico-format for the website,
Firefox, the best browser, I like it very much,
with the following add-ons:
- Browser View,
- Firebug, absolutely required,
- Filezilla, to upload/download the website to/from the extern webserver,
- WinSCP, another SFTP and FTP client to upload/download the website,
- 7zip, to zip/unzip archieves,
Thunderbird, for emails,
with the following add-ons:
- Libre Office, the best office software I know, often used to convert files, e.g. to *.csv or *.txt,
- NSIS, (Nullsoft Scriptable Install System) to create Windows installers,
- Microsoft Internet Explorer, version 11,
- Google Chrome,
- Lynx, a text-based web browser,
Step 1: Install XAMPP as a development system
Download XAMPP in the portable version (!!!) from Apache Friends:
e.g. version 1.8.2-6 as a zip file, “xampp-portable-win32-1.8.2-6-VC9.zip”, this was shipped with Apache 2.4.4 and PHP 5.4.31.
Hint: For WinXP you need an older version of XAMPP (<= 1.8.1-x).
- Unzip the XAMPP file and extract it to the root of your USB-hard-drive (
Hint: Put the XAMPP folder directly in the root of the USB hard drive (as
"E:\xampp\"and NOT as
"E:\any_name\xampp\"and NOT as
I assume for the paths on this page, that we are installing XAMPP as
"E:\xampp\", elsewise read your drive letter instead of
You may want to rename it from
"E:\xampp\setup_xampp.bat.txt"in order to avoid the execution of it in the future.
- Double-click the xampp_control.exe (
"E:\xampp\xampp-control.exe") to open the XAMPP Control Panel.
On the first run, you have to select your language for the panel: English or German, then hit “Speichern”/“Save”. If you make a change, you have to restart the panel to get this change working.
- Click the “Start” button next to “Apache”.
If Apache don’t starts, Skype, VMware or another webserver like IIS is running on port 80. Then look at Apache won’t start.
For the next steps is necessary that Apache starts properly!
- Test your XAMPP installation by opening a web browser (e.g. Firefox) and enter http://127.0.0.1 in the address field.
Step 2: Change one value for the development system
To secure that this webserver only can be accessed on that computer where the webserver runs:
In file “
E:\xampp\apache\conf\httpd.conf” change the line
Only if you want to use your local area network (LAN) for testing the website with other browsers and smartphones, add the line
if your PC has the static (!!!) IP
Hint: In a
to get your IP.
But now the router has to block your webserver from the internet due to the fact that XAMPP is NOT safe installed for the internet!!!
Now restart “Apache” using the XAMPP Control Panel ("
E:\xampp\xampp-control.exe") by clicking the “Stop” button next to “Apache” and then click the “Start” button again.
Step 3: Install the needed software
Step 3.1: Install software on your computer
Download the software, which is missing on your computer,
e.g. in German from heise.de - Software zum Download,
and install it on your own computer.
You may need (local) administrator rights for this!
Step 3.2: Install software on the USB hard drive
Download from the Portable App Directory and install them in the (new) directory “
- Libre Office,
with the following add-ons:
- Browser View,
Now you can run these software on any windows computer after connecting this USB drive to that PC.
The use of portable app does not leave any traces on the PC, unless you save there any files.
Step 4: Install Kirby
Download “Kirby Starterkit” from the official download link to the (new) directory
Unzip the downloaded zip-file and copy the directories and the files to the (new) directory
For details look at Installing Kirby on a PC - Copy ALL files.
Step 5: First Run of Kirby
Step 5.1: Run the starterkit
You should now be able to access your new Kirby-starterkit at: http://127.0.0.1/kirbystarterkit in your browser.
Step 5.2: Installing the panel
Step 5.3: Prepare the development
In this cookbook I use “XYZ” for the abbreviation of your client’s name.
My fundamental hint: NEVER use capital letters in the names of files or directories of the webserver to avoid trouble with different operating systems. Remember that even here!
Copy the directory
"E:\xampp\htdocs\kirbystarterkit\" to the (new) directory
"E:\xampp\htdocs\XYZ_version000\" (change “XYZ” with the lower case name of your client!!!).
"version000" is always my newest version.
Step 6: Start the development of the website
- Ask your client for his corporate design specification, company logo, company colors etc.
- Start your creative process
- Build your first draft
Since I am an engineer, I will not give you any instructions “How to design and build a website”. This is now your job!
But one thing I can assure you: With Kirby you can create beautiful websites, as you can see at Kirby - Made with Kirby and .
You find your files in the directory
"E:\xampp\htdocs\XYZ_version000\", your new website at
http://127.0.0.1/XYZ_version000 and your panel at
http://127.0.0.1/XYZ_version000/panel in your browser (think for the change of “XYZ”!).
For the next version of your design copy the directory
"E:\xampp\htdocs\XYZ_version000\" to the directory
"E:\xampp\htdocs\XYZ_version001\", next time to the directory
"E:\xampp\htdocs\XYZ_version002\" and so on. That’s all you need to make a backup!
"version000" is always the newest version.
Step 7: Prospects
Now you can connect the USB drive to any windows computer (PC) to use XAMPP and to show your design of the new website.
If you have put the XAMPP folder directly in the root of the USB hard drive and the ports 80 and 443 on that PC are not used, you can start XAMPP without any problems and without any local configuration, e.g. at your PC or at any windows computer!
If Apache won’t start on a PC look at Apache won’t start. Good luck!
Open your website in many different browsers and, if possible, on different operating systems and also on smartphones:
- Mozilla Firefox,
- Microsoft Internet Explorer,
here test it using the key <F12> in the several (old) versions (IE 5, IE7, IE8, IE9, IE10, Edge), if the website has to support this,
- Google Chrome,
- Lynx, a text-based web browser, think of visually impaired or blind visitors,
Step 8: Get the approval by the client
If your development has finished, show the new website to your client to get his approval to go live.
Step 9: Go live
Step 9.1: Buy Kirby license
- Go to Store - Buy a Kirby 2 license and buy the Kirby license.
- Now follow Kirby - Entering the license code.
Step 9.2: Upload to the webserver
- Make a complete backup of the old (!!!) running website, if it runs until now.
- Use Filezilla or WinSCP to upload the new website in a new subfolder like
kirby2on the live webserver.
- If necessary, add access protection in the file
.htaccessin this subfolder.
- Check (and change) the “
site\config\config.php” there, if necessary!
Step 9.3: Check your new homepage
Open your website in many different browsers and, if possible, on different operating systems and also on smartphones.
If necessary, change the web server settings or the code within your website.
Step 9.4: Build the file
The (new) file “
robots.txt” the directory “
kirby2” may look like:
# robots.txt for kirby 2.0.x # # This file is to prevent the crawling and indexing of certain parts # of your site by web crawlers and spiders run by sites like Yahoo! # and Google. By telling these "robots" where not to go on your site, # you save bandwidth and server resources. # # This file will be ignored unless it is at the root of your host: # Used: http://example.com/robots.txt # Ignored: http://example.com/site/robots.txt # # For more information about the robots.txt standard, see: # http://www.robotstxt.org/robotstxt.html # User-agent: * Disallow: /content/*.txt$ Disallow: /kirby/ Disallow: /site/ Disallow: /panel/ Disallow: /*.md$ sitemap: http://your-website/sitemap.xml
Delete the last row, if you have no “
sitemap.xml” installed like my comment in “Sitemaps easiest way”.
http://your-website” to fit your webadress, if the last row remains in the file.
Step 9.5: Set your new design online
- Log in at the management interface of the live webserver and change the location of the website to the directory “
kirby2”. Here you have to type in the whole path, which depends on the webhoster! If you have problems with this, ask the webhoster!
- You may have to remove or change the access protection in the file
.htaccess, if you have build this in Step 9.2.
The last step: Ready
The next step
Continue the development and extend the website, if …!