Advertisement

Host Your Own Bookmarking Webapp with Unmark

by

Bookmarking websites might be the one thing most of us have been doing the longest on computers. In general, bookmarking has stayed the same for decades, but there's a lot of great new bookmarking tools that we looked at in our Guide to Bookmarking. We looked several browsers and apps that let you bookmark pages, but perhaps the most intriguing of them all is Unmark, a free app from the good folks at Plain that encourages you to categorize your bookmarks by what you want to do with them—read the enclosed article, buy the listed product, watch the accompanying YouTube video or listen to the featured track.

The best part about Unmark is that it's also available as an open-source version that you can host and run on your own server for free. Going self-hosted means all your data stays with you, and you don't have to worry about the service getting an update you don't like, or the service being shut down. And since the open-source version is hosted on GitHub, users with development skills can change the way it looks and works, and share these modifications with other Unmark users.

Today we're going to take you the process of setting up Unmark on your own server. All you need is a domain name and web hosting account with access to a MySQL database. Once you've got Unmark installed, you'll be able to use your very own bookmarking service from anywhere (including mobile browsers), on your domain, without restrictions. Bookmarking with Unmark is as simple as clicking a bookmarklet or using the extension for Chrome. Sound like fun? Let's do this!

Setting up Unmark

Unmark features a simple interface and a novel approach to bookmarking

To get Unmark up and running on your own server, you'll need to create a database and subdomain for the app, download and make a few small changes in the app files, upload the updated files to your server, run a quick installation process, and you're good to go. We're going to take things a step further by additionally installing an extension for Chrome, which lets you add bookmarks to your own Unmark app easily from the toolbar.

Download Unmark

Grab the Unmark installer files from the app's GitHub page by clicking Download ZIP on the right. Next, unzip it to a location you can find easily on your hard drive.

Navigate through the folders to application > config and find the file called database-sample.php. Select and duplicate this file by hitting Cmd + D if you're on a Mac and rename the new file to database.php. On PC, copy this file, paste it in any other folder, rename it to database.php and paste it back into the original folder.

We're going to have to edit that file, but before we do, we'll first need to...

Create a database

Log in to your web hosting account and launch the control panel for the domain you want to set up Unmark on. In this case, we're using GoDaddy, so we're going to log in to the web hosting panel for our chosen domain and click Databases on the right.

Click Add to create a new MySQL database by giving it a database name (which, in some cases is also the default username for that database) and a strong password.

Pro-tip: you need this password to be secure and won't have to remember it, so use a password generator like this one to create a strong password with mixed characters, letters and numbers.

Create a new database to use with Umark

Copy these details to a note-taking app or text editor -- you'll need to paste these exactly into the database.php file we duplicated earlier. You'll also need the hostname generated after you've created the database, which looks something like unmark.db.123456.hostedresource.com.

Save your database details, including the database name, username, password and hostname

Create a subdomain

Unmark's self-hosted version works best with a subdomain, like unmark.tutsplus.com, as opposed to a subfolder in your domain like tutsplus.com/unmark. To create one, log in to your domain control panel and create a subdomain with any name you like. I'm going with unmark.abhimanyughoshal.com for this tutorial.

With GoDaddy, log in to your account and then navigate to Hosted Domains. In the panel that shows up, click Manage in the Subdomains column next to the domain you want to use Unmark with. In the next window, click Add Subdomain, and then give your new subdomain a name. You'll need to make a note of this subdomain name, as well as the folder it is associated with. GoDaddy also gives you the option to create a file folder with the same name as your new subdomain, and that makes setup very simple going forward.

Note: It can take anywhere from a few moments to 48 hours for the DNS to propagate your new subdomain, so you might have to wait for a bit before your subdomain is accessible. You'll know that this is the case if you get a browser-based 'Webpage not found' error if you try accessing your subdomain with your files uploaded. There isn't much you can do here, except wait and try again in a few hours.

Create a subdomain to use with Unmark

Edit the database.php file

Now that we've got our hosting set up for Unmark, we'll need to enter the database details in the database.php configuration file. Navigate to the config folder and open database.php in a text editor and scroll down to this line:

if ($_SERVER['HTTP_HOST'] == 'localhost') { // If local, load this

Below that, paste in your database details like so, replacing the entries in single quotes after the = sign. For example,

$db['default']['hostname'] = 'unmark.db.123456.hostedresource.com';

That section needs to look like this:

if ($_SERVER['HTTP_HOST'] == 'localhost') { // If local, load this
 $db['default']['hostname'] = 'unmarkag.db.7695597.hostedresource.com';
 $db['default']['username'] = 'unmarkag';
 $db['default']['password'] = 'xpassword123x!';
 $db['default']['database'] = 'unmarkag';

} else { // If not local, load this
 $db['default']['hostname'] = 'unmarkag.db.7695597.hostedresource.com';
 $db['default']['username'] = 'unmarkag';
 $db['default']['password'] = 'xpassword123x!';
 $db['default']['database'] = 'unmarkag';

}

When you've finished making these changes, save the file in the same format.

Upload your files

Log in to your hosting account's control panel and access the file manager, or access your hosting account via FTP using an app like Cyberduck and the FTP login details provided by your web host. If you already have a folder created for your Unmark installation, upload all the files and folders within the 'unmark-master' folder that you unzipped on your desktop into it. If you don't have a folder for this purpose, create a new folder, upload the files and point your Unmark subdomain to that folder.

Run the Unmark installer

When your files have finished uploading, fire up your favorite browser and navigate to the setup page on your newly created subdomain, whose URL looks like this: subdomain.yourdomain.com/setup (in my case, it's unmark.abhimanyughoshal.com/setup).

Click INSTALL UNMARK, create an account with an email address and password, and you're done. You'll be logged in to your very own Unmark app, and you can now bookmark till the cows come home! The easiest way to get started is to drag the Unmark+ bookmarklet from your Unmark app to your bookmarks bar, and click on it whenever you come across a page you want to save. You'll get a chance to categorize your bookmark by activity and add a note to remind you why the page is important to you, when saving each page.

Install Unmark, register an account and you're done!

Installing the Unmark Extension for Google Chrome

If you're not a fan of bookmarklets and would rather hide the bookmarks bar for more viewing area, you can use Unmark's self-hosted Chrome extension to save bookmarks -- this button sits to the right of the Omnibar along with your other extensions' buttons and offers the same functionality as the bookmarklet. Here's how you can set it up:

First, download the extension files from its GitHub repository, by clicking the Download ZIP button to the right. Unzip the file to a location you can easily locate on your hard drive. Navigate into the unmark-chrome-master folder and open the file called manifest.json in a text editor. Find this bit of code in the file:

"permissions": [
"tabs",
"contextMenus",
"*://unmark.it/"
 ],

Now, change the domain unmark.it to point to the subdomain you created for your Unmark install. In my case, it's unmark.abhimanyughoshal.com, so the block of code in my file looks like this:

"permissions": [
"tabs",
"contextMenus",
"*://unmark.abhimanyughoshal.com/"
 ],

When you're done, save the file in the same location.

Next, in this extension folder, navigate to js > unmark and open the file base.js in a text editor. We'll need to replace the URL in the second line, which looks like this:

unmark.host = 'https://unmark.it';

Paste in your subdomain URL so the second line looks like this:

unmark.host        = 'https://unmark.abhimanyughoshal.com';

Save the file in the same location.

Launch Google Chrome, click the hamburger icon button, and select Tools > Extensions. Check the box at the top to enable Developer mode, and then click Load unpacked extension...

Enable Developer mode in Google Chrome to install the Unmark extension

Locate your Unmark Chrome extension folder on your hard drive, and click OK. Install the extension and you'll find the Unmark button on your toolbar. You can now use this to bookmark web pages easily, and you don't need to keep the bookmarks bar visible anymore.

Use the Unmark extension for quick and easy bookmarking without a bookmark bar

Conclusion

Hope that wasn't too hard! Using Unmark is a neat way to save important web pages, and its novel approach to organization can actually help you check out your bookmarks instead of letting them gather dust and becoming irrelevant. And hosting it on your own server means your data remains private and under your control. Plus, it's free!

What are your experiences with self-hosted apps? And what are some other tools you'd like to host on your own server? Let us know in the comments!

Advertisement