How to build and launch a website using only your mobile phone.

As a thought experiment, I wondered if it was possible to design, develop, and launch a custom website from my phone, without touching a tablet or computer.

Spoiler alert: I could.

In fact, not only was it possible to build a website from my phone, but I was able to do it in less than a couple hours of research and work, using only free apps. The following post will give you the step-by-step on how to launch your own mobile-only website.

For this experiment, I used a Motorola Edge+ running Android 10. I didn’t use any external displays or input devices.

Preparation

There are a few things you’ll need to prepare in advance of actually building your site, and all can be accomplished from your phone. Just as with any website you’re building, you’ll need to:

• Purchase a web host
• Create a database and a database user
• Give SSH access to your host user
• Download an app for SSH access
• Optionally, purchase and configure a domain
• Optionally, download an app for web inspection (to view source on your website, for theme development and bug testing)
• Optionally, download an app for photo editing
• Optionally, take and edit some photos for theme artwork

Hosting

I have an account with Wordify, I use for my sandbox experiments. I prefer it because I can easily create a new site and DNS zone without buying another domain or adding cost.

My environment is a standard LAMP stack with phpMyAdmin.

Selecting a CMS

If you want to be old school, you already have everything you need above to get started. You could SSH into your server, create an HTML file, and compete with tilde.club. However, the point of my experiment was to see if I could build a website of high enough quality to sell to a client.

WordPress (MySQL/PHP, free)

I selected WordPress for this experiment for a variety of reasons including my intimate familiarity with it and the fact it plays nicely with my existing hosting environment. Most importantly though, WordPress is the most progressive of the open source content management systems in having self-contained extension and update management, which was critical in this early experiment. Here are just a handful of the many native features that helped:

Mobile-friendly admin area

Automatic core updates

Live previews for themes

Theme browser and installer

One-click core update system

Plugin browser and installer

Theme and plugin text editors

WordPress also keeps a latest stable version URL to make it easy to directly install to your host without having to download and upload files to your host—i.e., they never land on your cellphone’s hard drive.

http://wordpress.org/latest.zip

http://wordpress.org/latest.tar.gz

Installing WordPress via SSH

In this section, we’ll be directly copying the latest WordPress archive from wordpress.org to your host. Then you’ll unpack the archive, move the files within the WordPress directory up to your web root, and finish with some file cleanup.

Warning:*If you’re new to the Terminal, be warned the command line can be dangerous if you don’t know what you’re doing. If you’re working in a live production environment, at minimum you should be making a backup of everything.

Have your credentials ready:

Your development server URL

Your SSH username and password

Step 1: Transfer and unpack WordPress

Launch ServerAuditor and connect to your server. The welcome screen has the ability to add a new connection and save the bookmark, or to “quick connect” without saving. I recommend saving a bookmark.

After adding your login and server credentials, you should be at the command prompt.

Before we jump in, there are some basic Terminal commands to know:

ls = lists all files in your current directory

cd = changes directories and is given paired with a directory command like “cd ..” to move to the parent directory, or “cd wordpress” to move down into the WordPress directory relative to your current position—i.e., you would see /wordpress/ listed if you ran the “ls” command.

In my case, I need to change directories from my user directory down into my sandbox domain’s web root:

cd domains/tasteofhot.com/html

Now we grab the latest WP archive from their server:

wget –*–*no-check-certificate http://wordpress.org/latest.tar.gz

Note the “-*–*no-check-certificate” may not be necessary for you. I needed it to mitigate an error message I was getting from MediaTemple.

If you “ls” from here, you should now see the latest.tar.gz file in your file listing.

Unzip the archive:

tar xfz latest.tar.gz

If you “ls” again, you should see a new /wordpress/ directory in addition to your archive.

Change directories into the new /wordpress/ directory:

cd wordpress

Move all of the contents of the /wordpress/ directory up a directory to your web root:

cp -rpf * ../

Change directories to get out of the /wordpress/ directory and into the parent web root:

cd ..

Delete the empty /wordpress/ directory:

rm -rf ./wordpress

Delete the packaged WordPress archive:

rm -f latest.tar.gz

Now your web root is ready for the famous 5-minute install.

Step 2: Install WordPress

The shortest step, WordPress has a pretty simple install interface that will walk you through in a jiffy.

Have your credentials ready:

Your database and host names
Your database username and password

In Chrome, or another mobile browser, browse to your dev server. Follow the WordPress on-screen instructions, then log in with your new username and password.

Step 3: Permission server for uploads

This may or may not be the case for everyone, but in the way I unpacked WordPress, I discovered my theme and plugin directories weren’t permissioned correctly for direct uploads and installs.

If you want to test your permissions first, skip to the next section and attempt to install a theme. If the theme installs successfully, you don’t need to modify permissions.

To fix permissions, log back into your SSH app and reconnect to your host.

Change directories to your root WordPress directory

cd domains/tasteofhot.com/html

List the files to make sure you’re in the correct directory and can see the /wp-content/ folder but are not in it.

Change all the directories within wp-content to 755 (-rwxr-xr-x):

find wp-content -type d -exec chmod 755 {} \;

Change all the files within wp-content to 644 (-rw-r-–r-–):

find wp-content -type f -exec chmod 644 {} \;

Customize your website

For this experiment, I wasn’t about to develop an entire theme from scratch because—well, nobody does that anymore. There are an abundance of amazing responsive themes and WordPress has built-in tools for browsing, previewing, installing, and configuring.

I did, however, want to show that custom theme development is an option, so I went ahead and forked a “parent” theme to create a child theme and modify its code as a proof-of-concept. (It’s best practice to not modify the parent theme directly, to allow for system updates.)
Step 1: Find and install a parent theme

Under your administrative menu in Appearance > Themes, you can browse featured or popular themes. There are even search tools if you have specific criteria, but those search tools are primarily relevant for desktop sites—i.e., the number of columns.

I have a theme I’ve already used that I quite like the simplicity of, so I went ahead and searched for “Editor” as my parent theme.
Tips when reviewing mobile-only themes:

Thumbnails – Unfortunately, the thumbnails for WordPress themes are desktop screenshots, so they are less relevant for mobile-only shopping. However, when you select a theme, you can preview it.


Collapse Info – The way the theme previewer is laid out, the desktop info sidebar for the theme’s information appears to be the entire layout on mobile. There’s a collapse button at the bottom and it is a bit finicky on mobile. However, if you click it a couple times and are patient, it will hide the sidebar so you can see the theme.
Responsive – If the theme does not look right on mobile, it is not responsive. Move on to the next one. If you switch away from featured or popular, chances are it is an older theme that isn’t as responsive.
Usability – Focus on layout you like and ignore artwork, fonts, or colors. It’s relatively easy to correct those and your mobile-only audience is more interested in utility than beauty.
Load Time – If the theme seems slow, it probably will be for your users also. Pass.
Live Preview – To preview a theme with your content in it, you have to first install the theme. You can preview it without having to enable it.

After installing the parent theme, you can preview it with your own content and set a bunch of your site settings through the theme configuration before enabling it.

Enable the parent theme and optionally create any artwork for the theme in Canva (or other app) while you are at it. You may need to reselect some of this content after you create your child theme, but if you’re trying on this parent theme for the first time, it’s worth the preview.

Step 2: Create a child theme

Now that we have a usable parent theme, let’s create a custom child theme. There are a few ways to do this. If you already have an FTP or other file management app, you can duplicate the theme directory there. You could use the MediaTemple (or equivalent) Account Center’s file manager. You could even turn back to your SSH app. However, I’m trying to show how this can be done by non-developers, so I used a WordPress plugin called Child Theme Configurator.

Add any necessary plugins:

Browse to the plugins area in your WordPress admin area.

Add New to search for and install Child Theme Configurator.

Activate the new plugin after install.

Optionally, do some plugin cleanup and delete the Hello Dolly plugin.

Optionally, install any security plugins. My favorites for a fresh install are Block Spam By Math Reloaded, Limit Login Attempts, Broken Link Checker, and Disqus to replace the native registration/commenting system.

Use Child Theme Configurator:

Under Tools > Child Themes, create a new theme.

You need only add the slug and theme name. All other settings can remain default.

Browse back to your theme management area to preview your child theme, set any metadata, and activate your new child theme that—for the moment—looks exactly as it did before.

Step 3: Modify your theme

To customize the code o your new theme, again you could modify this via SSH, your hosting file manager, an FTP client, or other file management app. However, WordPress has a built-in editor included under Appearance > Editor. The downside of this approach, is of course version control, but this post won’t get into that.

In my example, I simply changed a few font colors to demonstrate the capability. I used WebInspector to view source on my site and get class names to modify.

Publish your content

The last thing I did to prove this is possible end-to-end is, of course, publish some content. By default, WordPress creates one placeholder page and one blog post. I updated both to be information about this website and even added a photo from my phone via WordPress’ built-in media management.

Conclusion

When I originally considered this experiment, I was pretty sure it was possible, but I didn’t imagine how easy it would actually be.

To see the results of this experiment visit here.
http://aedificatio.wpdevcloud.com

Published by inaedificatio

Website Manager

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: