How to install WordPress on a Chromebook the easy way

Yes, you can install WordPress on a Chromebook, and it works really well. In fact, I’m writing this post using WordPress 5.4.1 installed on a Chromebook.

Not a modern, powerful Chromebook, like my Acer Spin 13 (i5, 8GB RAM, 128GB disk), or my current travel laptop, an ASUS C434 (i3, 4GB RAM, 64GB disk). Nope, this post was written on an old ASUS C300s (Celeron, 4GB, 32GB), running Chrome OS 81.0.4044.141, with MySQL, Apache, and PHP running in the Linux container, powering WordPress 5.4.1.

Not just that, but I have VS Code installed with PHP extensions, and XDebug, so I can put a breakpoint into the WordPress source, look around and make changes.

So how is the performance? Not bad, but nowhere near as good as the C434. The ‘New Post’ button takes about 13 seconds to open a new post to the point where you can start writing, but once in and typing, I don’t see any difference from working on a much faster machine.

Realistically though – WordPress runs a lot better on my more modern Chromebooks. With WordPress running on my C434 Chromebook, opening a new post is very snappy – about 1.5s!

For comparison, I measure that it takes about 5 seconds to start a new post on my regular host.

In this post, I’m going to document the steps to install WordPress on a Chromebook – my ASUS C434, but I followed the same steps for my older C300s.

Why install WordPress locally at all?

First, let’s look at why you would even want a local copy of WordPress on your Chromebook. If you have a good internet connection, you can use the browser on a Chromebook to update WordPress content on a hosted server from anywhere, so why would you want a local install of WordPress on a Chromebook? People have various reasons, but for me, it comes down to three things:

  • I want a fast local WordPress so I can create content without worrying about the internet connection – on a train or a ferry, on a beach, etc.
  • I want a local staging site, where I can try our new themes or plugins.
  • Occasionally, I want to be able to poke at the code, and I like to have a decent editor like VS Code available.

Why install WordPress on a Chromebook?

If you want to run a local copy of WordPress, why install WordPress on a Chromebook? Why not a Mac or a Windows laptop?

My main laptop is a Macbook Pro, which I love. It is fast and wonderful, but it would be expensive to replace. I do actually have WordPress installed to run locally on it, and both VS Code and PHP Storm to work on code. When I’m at home or at client sites, that is my go-to machine.

However, prior to the global pandemic, I did a lot of traveling, and you can find Chromebooks that match my ideal travel laptop:

  • Light
  • Good screen and keyboard
  • Long battery life
  • Easy to replace
  • Relatively Inexpensive

If my travel Chromebook got stolen or broken, I could walk into a local store wherever I was and buy another Chromebook without breaking the bank. My backups and docs are on Google Drive, so once I signed on, my account would sync up, and I could be back up and working again in no time. I would have to reinstall Linux and my Linux applications (or restore a backup), but that would not take long.

For more on my review of the Asus C434, see this review.

Edit – Everything above was written on my old ASUS C300s, but after I installed a fresh copy of WordPress on my ASUS C434, I moved this post over to that machine. I wanted to check that the C300s still worked, and it is a good backup, but the C434 screen is great, and the ‘WordPress on a Chromebook’ experience is better.

Enough talking – let’s install WordPress on your Chromebook

How to install WordPress on a Chromebook

Total Time: 30 minutes

Step 1. Get your Linux ready

First, enable Linux (if it is not already enabled). Installing WordPress on a Chromebook is possible because you can enable a Linux partition a recent Chromebook. So when I say that you can install WordPress on a Chromebook, really I mean that you can install WordPress in Linux running on a Chromebook.

If you are enabling Linux for the first time, one of the prompts will be what Linux user name you want to use, which defaults to the first part of your Gmail address. You can shorten it if you want.

When Linux is available, it will open a terminal window. I always pin the terminal to the shelf. In the terminal, issue these commands. You can copy them from here and use shift-ctrl-v to paste them into the terminal.

sudo apt update
sudo apt upgrade -y
sudo apt install nano

The terminal prompt starts with your Linux user name, followed by @penguin. E.g., my user name is pete, so my prompt is [email protected] Make a mental note of your user name – you’ll need it in the next step.

One final thing to prepare your Chromebook for WordPress- Open the Files app, alt-click on the Downloads folder, and select ‘Share with Linux’.

Step 2. Install Apache Web Server

The first item you need to run WordPress on a Chromebook is a web server. You could use Nginx, but let’s stick with Apache.

sudo apt install apache2 -y

After it’s installed, Apache should be automatically started. Check its status:

sudo systemctl status apache2

If it’s not running, you can use systemctl to start or restart it.

sudo systemctl start apache2
sudo systemctl restart apache2

Change the Apache user from www-data to your linux user name, so you don’t have permission issues

sudo nano /etc/apache2/envvars

Find these lines:

export APACHE_RUN_USER=www-data
export APACHE_RUN_GROUP=www-data

Change them from www-data to your linux user name, e.g.

export APACHE_RUN_USER=pete
export APACHE_RUN_GROUP=pete

Use ctrl-s to save, ctrl-x to exit from nano

Now we need to reset the owner of the Apache document root folder to your linux user name.

sudo chown <your user>:<your user> /var/www/html/ -R

For example, the default prompt when I open a terminal window is:

[email protected]:~$

So I would run:

sudo chown -R pete:pete /var/www/html/

The next step is just to stop a warning message when checking the status of Apache.

sudo nano /etc/apache2/apache2.conf

Insert ServerName penguin.linux.test near the top, between some comments, like this:

Now add penguin.linux.test after localhost in /etc/hosts:

sudo nano /etc/hosts

Then restart Apache:

sudo systemctl restart apache2

Now type http://penguin.linux.test in the browser address bar. You should see the “It works!” Web page, which means Apache Web server is running properly. 

If it hangs, check if you have a VPN running, and if you do, shut it down.

Step 3: Install MariaDB Database

The next item you need to run WordPress on a Chromebook is a SQL database. MariaDB is a fork of MySQL that is fully compatible and works well on a Chromebook.

sudo apt install mariadb-server mariadb-client -y

After it’s installed, MariaDB server should be automatically stared. Use systemctl to check its status, or restart if needed.

systemctl status mariadb
sudo systemctl start mariadb

Next we need to create a database and sql user for WordPerfect. Handily, MariaDB lets you use ‘sudo’ to login as root without providing a password.

sudo mysql

create database wp_db;
create user [email protected]'%' identified by 'wpsecret';
grant all on wp_db.* to wpuser;
exit

Now test that by logging in as your new WordPerfect user:

mysql -u wpuser --password=wpsecret
use wp_db;
show tables;
exit

There should be no tables shown (Empty set), but no errors

Step 4: Install PHP7.3

The last item you need to run WordPress on a Chromebook is PHP. As I write this, v7.3 is the latest one available in the Chromebook Linux environment. When 7.4 becomes available, you can just change 7.3 to 7.4 in the command below.

This is one long command – copy it all as one line and paste it into the terminal

sudo apt install -y php7.3 libapache2-mod-php7.3 php7.3-mysql php-common php7.3-cli php7.3-common php7.3-json php7.3-opcache php7.3-readline php7.3-dom php7.3-gd php7.3-mbstring php7.3-curl

Restart Apache again:

sudo systemctl restart apache2

Check PHP version information.

php -v

The output should say PHP 7.3

To test that PHP is working with Apache server, create a  phpinfo.php file in the Web root: 

echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php

Now in the browser go to http://penguin.linux.test/phpinfo.php

You should see your server’s PHP information. This means PHP scripts can run properly with Apache web server. It should look something like this:

One note: on a public server, it would be insecure to leave this phpinfo.php file available on the server. However, since your Apache server can only be accessed locally from your Chromebook, we don’t have to worry about security.

OK – you have successfully installed Apache, MariaDB and PHP7.3 on your Chromebook. There’s just one thing to do.

Step 4: Download and Install WordPress on your Chromebook 

Clearly, in order to run WordPress on a Chromebook, we’re going to need a copy of WordPress. Download wordpress.zip from https://wordpress.org/download/

Back in the terminal:

cd ~
ls /mnt/chromeos/MyFiles/Downloads/wordpress-5*
unzip /mnt/chromeos/MyFiles/Downloads/wordpress-5*
ls

You should see a folder called wordpress. We’re going to install it in the Apache document root as mysite.

mv wordpress /var/www/html/mysite

Now in the browser, go to http://penguin.linux.test/mysite and go through the WordPress install prompts.

Fill in the new database name and password, leave the host name as localhost. Select a WP admin user name and password, and let the install run. When the install finishes, you can log in to your new site at http://penguin.linux.test/mysite/wp-admin

WordPress on Chromebook

There you go – you’ve got a working install of WordPress on your Chromebook.

I’ve covered some options for copying posts from “WordPress on a Chromebook” to “hosted WordPress” in this post. Copying the text of a post is easy using the built-in tools/export and tools/import options, but moving embedded images and media needs some care.

For web developers: how to debug WordPress on your Chromebook.

For most purposes, just running WordPress on your Chromebook is all you need, but for web developers, I’ll add a bit more information.

 First: Make the WordPress folder visible to the Files app.

A true command-line only Linux geek has no need of this, but I find it handy to use GUI tools from time to time!

From the Files app, you can see the home Linux folder of your user, but you cannot browse to /var/www/html. The easiest way to have visibility to the Apache document root is to create a link to it in your user’s home folder, like so:

ln -s /var/www/html ~/html

Now you can use the Chromebook Files app to access the folder where WordPress on your Chromebook is installed.

To debug PHP, you need to Install Xdebug

sudo apt install php-xdebug

Now edit the xdebug.ini file

sudo nano /etc/php/7.3/mods-available/xdebug.ini

Add the following lines after the single line in the file

xdebug.profiler_enable_trigger = 1
xdebug.profiler_enable = 0
xdebug.remote_enable = 1
xdebug.profiler_output_dir = "/tmp"

Now edit the Apache php.ini file:

sudo nano /etc/php/7.3/apache2/php.ini

Add these lines to the bottom of the file. It’s a long file, so use the “go to line” command ctrl-underscore (ctrl-shift-minus) and type 9999.

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Restart Apache:

sudo systemctl restart apache2

Now if you type php -v you will see a line that says ‘with Xdebug’.

Install VS Code and PHP extensions

If you have an i5 or i7 CPU in your Chromebook, you can use any IDE that you want, such as PhpStorm. For Chromebooks powered by a more modest CPU, Visual Studio Code aka VS Code, the free IDE from Microsoft works well.

Go to https://code.visualstudio.com/download and click on the .deb option. The file will download immediately – once it is finished, click on ‘show in folder’ on the bottom right, or open the Downloads folder in the Files app.

Double-click on the code..***.deb file, ,and click Install when prompted.

When the Linux installer is finished, use the launcher to find the ‘Visual Studio Code’ icon in your Linux apps folder.

Click on the VS Code icon, and when it opens, alt-click on the icon and pin it to the launcher bar.

Click on extensions, and type ‘php’.  There are lots of options in the php list, so chose carefully – I use ‘PHP Intellisense’ and ‘PHP Debug’, both by Felix Becker. Install both of those.

Now search for ‘Wordpress’ in extensions, and install ‘wordpress snippets’ by wpdevtools.

Now let’s debug WordPress on a Chromebook

Now use ‘File / Open Folder’ to open your wordpress folder: /var/www/html/mysite

Hint: the /var folder should appear under Other locations / Computer.

Open a php file to debug, such as

wp-content/themes/twentytwenty/template-parts/content.php

Click on the run/debug icon on the left, and select ‘create a launch.json file’.

Select PHP in the drop-down list at the top of the screen.

At the top-left now, you should see a green triangle ‘start debugging’ icon, to the left of a drop-down that should have ‘Listen for XDebug’ selected. Click the green triangle icon to start listening / debugging.

Now set a breakpoint on a line, by clicking to the left of the line number, e.g. line 20.

Now go back to the browser, and open your local wordpress site.  It should hang.

Switch back to VSCode, and you will see the breakpoint has worked, and the line is highlighted.

Step through the code, look at variable, evaluate function calls, etc.

Then click the continue button to run. Remember to stop debugging (stop listening to Xdebug) when you are done, or your site will keep hanging!

Possible Issues if you have an existing Linux subsystem

The steps I’ve laid out above should work perfectly for a fresh install of the Linux subsystem, but if you install WordPress on a Chromebook with an existing Linux subsystem, particularly if you already have Apache installed, you can sometimes see a problem where saving a Post or Page in the WordPress editor gives a JSON error.

Check out this StackOverflow post for a discussion of possible solutions.

When this happened to me on an existing Apache install, I found the same situation reported by Aurovrata in the above post, so the fix was:

sudo a2enmod rewrite

Then ensure that the apache2.conf file has its <Directory> directive ‘AllowOverride’ set to All rather than None for the WP folder by:

sudo nano /etc/apache2/apache2.conf

Search for:

<Directory /var/www/>
   Options Indexes FollowSymLinks
   AllowOverride None
   Require all granted
</Directory>

Change this to

<Directory /var/www/>
   Options Indexes FollowSymLinks
   AllowOverride All
   Require all granted
</Directory>

Save this and restart Apache with:

sudo systemctl restart apache2

That should resolve the problem.