HowTo: Start Kirby development on a PC

Kirby 2 Solutions 🎉
1

Introduction

Remarks

  • 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!

Your Preparation

  • 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

Hardware

  • 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 “E:”.

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!

Software

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,
    • ColorZilla,
    • MeasureIt,
  • 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:
    • CompactHeader,
    • LookOut,
    • PrintingTools,
    • QuickText,
  • 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,
  • Opera,
  • Lynx, a text-based web browser,

Step 1: Install XAMPP as a development system

  1. 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).
  2. Unzip the XAMPP file and extract it to the root of your USB-hard-drive ("E:\").
    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 "E:\xampp_test\" or similar)!
    I assume for the paths on this page, that we are installing XAMPP as "E:\xampp\", elsewise read your drive letter instead of "E:".
  3. Never run "E:\xampp\setup_xampp.bat"!
    You may want to rename it from "E:\xampp\setup_xampp.bat" to "E:\xampp\setup_xampp.bat.txt" in order to avoid the execution of it in the future.
  4. 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.
  5. 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!
    Good luck!
  6. 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

  1. 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
    Listen 80
    to
    Listen 127.0.0.1:80
    Only if you want to use your local area network (LAN) for testing the website with other browsers and smartphones, add the line
    Listen 192.168.0.155:80
    if your PC has the static (!!!) IP 192.168.0.155.
    Hint: In a CMD.exe window run
    ipconfig⏎
    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!!!

  2. 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 “E:\portable\”, e.g.:

  • Notepad++,
  • IcoFX,
  • GIMP,
  • Inkscape,
  • Filezilla,
  • WinSCP,
  • 7zip,
  • Libre Office,
  • Firefox,
    with the following add-ons:
    • Browser View,
    • Firebug,
    • ColorZilla,
    • MeasureIt,

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

  1. Download “Kirby Starterkit” from the official download link to the (new) directory "E:\CMS_Kirby\01_kirby_starterkit\".

  2. Unzip the downloaded zip-file and copy the directories and the files to the (new) directory "E:\xampp\htdocs\kirbystarterkit\".
    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

You should now install the panel at: http://127.0.0.1/kirbystarterkit/panel in your browser.
For details look at Kirby - 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!!!).
Hint: "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 :heart:.

Note:

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”!).

Backup:

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!

Hint: "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,
  • Opera,
  • 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

  1. Go to Store - Buy a Kirby 2 license and buy the Kirby license.
  2. Now follow Kirby - Entering the license code.

Step 9.2: Upload to the webserver

  1. Make a complete backup of the old (!!!) running website, if it runs until now.
  2. Use Filezilla or WinSCP to upload the new website in a new subfolder like kirby2 on the live webserver.
  3. If necessary, add access protection in the file .htaccess in this subfolder.
  4. 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 robots.txt

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”.
Correct “http://your-website” to fit your webadress, if the last row remains in the file.

Step 9.5: Set your new design online

  1. 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!
  2. 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

Congratulations!

The next step

Continue the development and extend the website, if …!
Good luck!

4 Likes
2

a nice tutorial should be pretty good for starters.

i think you forgot one essential for developing websites / application or what so ever: version control system!

i personaly use git (http://git-scm.com) for everything. you could clone kirby in your local kirby installation and can change (update to a newer version, change to development build, downgrade to an older version) the kirby version with one command or click.

if you are a command line guy stick with the git cli, if you want a GUI Tool i would recommend SourceTree (http://sourcetreeapp.com/).

you could even deploy your complete website to your integration or productive server with git.

3

In my solution I want to work without the need of any external memory. Git etc. requires usefully Internet access or access to a private local area network.
My solution does not require such physical requirements.

You can make a backup every time you want.
Every file of a backup can be compared by DIFF!

For reasons of data protection, I secure the contents of the USB hard drive regularly, but that has nothing to do with my understanding of this cookbook, because then I would have to describe all certainties such as virus scanners …

@slohr:
I would be happy for all if you add, how you would add your vcs (version control system) in my cookbook.

4

Git does not require internet access at all! You can always instantiate the repository after having downloaded all the files. It comes with so many advantages though: Simply reverting changes, blame to see who introduced what line of code when and so on. In your scenario, if I detect a bug, I have to go through all backups by hand to find the one that broke my code. Then I would have to revert all files manually and so - not a thing I’d like to do! Not to talk of branches, the stash and Github/Gitlab/Bitbucket/Gogs or whatever you want to use to share and collaborate.

Anyway, I’d leave XAMPP and all that out and go for a virtual machine. Vagrant has made that so simple, and it finally puts an end to cheap excuses like “well it works on my system, so…”

1 Like
5

@FabianSperrle:
I use my XAMPP as a “one man show”!
And I want to use and develop my website at nearly every PC, irrespective of I have admin rights or not, which I would possibly need to control a virtual machine.

6

You don’t need admin rights to run a virtual machine. You do need e.g. VirtualBox or VMWare installed though, so I guess if you’re really switching machines that often that’s not an option.

I wouldn’t give up on git though :slight_smile:

7

you could use git also as portable version: GitHub - sheabunge/GitPortable: Portable version of Git for Windows and carry it with you.

the only thing you would administrator-privilages is if you put it in your system-path. as far as i remeber you have a system path and a user path (in the enviroment settings). the user path could be changed without administrator-privilages (not testet).

@anon77445132 what do you mean by:

should i start with basic use of a vcs or how i would integrate git?

##git
create a folder for your new project and open the command window and type:

git init

a empty git repositry will be initiated. now you can add files, commit changes and create new branches if you want to test a new feature.

all commands above could be done by cli or by a gui tool.

if your project gets bigger or you just want a backup you can also add an new remote and push the git-repo to this remote (if you have internet connection).

8

And on top of all the other advantages of version control over making copies mentioned above: even cheap hosting providers often have Git installed these days, making it easy to deploy with git. If you have ever experienced how fast that is, you don’t want to go back to copying files over ftp anymore.

I think, for anyone who starts out developing today, even on a semi-professional level, version control is a must.

9

Small remark on step 9.4
There’s no sence to rename panel directory for security reasons and then point it in robots.txt

1 Like
10

4 posts were split to a new topic: Discussion about Panel security

13

@anon77445132 what is the best way to create a Apache Virtual Host on Windows?

14

@thesmithy:

If you follow my steps in the first post on this webpage, you don’t need this configuration, because this configuration of a Virtual Host is very annoying.

But to answer your question:

  • You find the answer for the configuration of the apache at Apache Virtual Host documentation.
  • And you must update your local “hosts” file (on a windows client: %windir%\system32\drivers\etc\hosts, for other OS look at Location in the file system) on every client, where you start the browser to open the kirby website!!!

Good luck!