Latest Posts

Install LAMP on Ubuntu VPS

Install LAMP onto Ubuntu VPS

Thanks to the Host1Free VPS offer, I was able to administrator the server directly in the cloud without using any local resources, for the testing purpose at least. The advantages of using this free VPS is obviously its price of free, as well as the freedom of installing and experimenting with different utilities at system level compared to what you can do in the shared hosting environment. Although this free VPS configuration is not very fast, it can help me to learn everything about server administration and maintenance before I’m able to afford VPS with more power or even a dedicated server.

Anyway, here are the steps to use this VPS as a web development server.

SSH

  1. Make sure you have SSH client installed. Mac OS and Linux already have SSH installed. For those using Windows can use PuTTY. By using Mac OS or Linux, I assume that you already know how to use terminal. If not, you can google for the SSH GUI alternative for Mac OS or Linux.
  2. Once you verified that you have SSH client installed, the next step is to connect the VPS through SSH. Find out the IP address of your VPS. It’s generally displayed in your VPS control panel, in XXX.XXX.XXX.XXX format (64.1.21.23 for instance). Ask me in the comment section below if you cannot find the IP address for your VPS.
  3. Open the terminal and type the following line (if you are using a GUI app, please refer to its documentation for help):

    ssh [email protected]

    Replace 64.1.21.23 with your VPS IP address.

  4. If this is your first time SSH to the server, it will display a confirmation message confirming you to connect to the server. Type “yes” to confirm.
  5. After pressing enter and wait a while, you are now in your VPS server.

Note: If you restored the VPS image through your control panel and used SSH to access the server before, you need to delete the known_hosts file in .ssh folder in your user directory. Otherwise, you won’t be able to access the server again due to different host key:

rm ~/.ssh/known_hosts

Create a New User

In order to avoid being hacked and protect root account, we need to create a user account which does not have root privilege.

  1. Enter the following command:
    adduser username

    Replace the username with the username of your choice.

  2. Follow the prompts to enter the new password for your account, as well as detailed information about you. If you don’t want to enter any of your personal information, you just simply press enter to continue to the next field.
  3. When you are finished, type “y” to confirm that it’s the correct information.
  4. Your username has been created. Now you can login to the VPS with this username instead of root.
  5. Make sure to add your newly created username to /etc/sudoers to have temporary root privilege. Otherwise, you won’t be able to do system tasks such as upgrade in the next section.
    vi /etc/sudoers

    Locate the following section and press “i” to edit file

    # User privilege specification

    Go to the end of this section and press enter to create a new line. Go up one line and type the following to add your username to the list:

    username ALL=(ALL:ALL) ALL

    Make sure to replace “username” with your username. Press esc to exit the edit mode and type “:x!” to save this read-only file.

  6. If you want to learn more about vi text editor, or if you have any problem regarding the above steps, please let me know in the comments section below.
  7. Enter the following command to logout from your server:
    exit
  8. Connect to the server using your newly created account: ssh [email protected]
    Replace username with the username you created in the last section, and replace xxx.xxx.xxx.xxx with the IP address for your server which you supposed to find out at the beginning of this tutoail.
  9. Enter the password when you created your username.

Update & Upgrade

If you just created this VPS or this is your first time logging into this VPS, the first task is to issue a upgrade command. Otherwise, most of the commands mentioned below won’t work.

  1. Type the following command and press enter:
    sudo apt-get update
  2. After the above command finished executing, issue the following command:
    apt-get upgrade
  3. There will be a lot of packages that need to be upgraded if this is a brand new VPS. After the upgrades are found, press y to confirm to install them.
  4. Wait until the system is upgraded. This will take a while.
  5. After the system is upgraded, it’s recommended to restart server before continuing:
    reboot

LAMP on Ubuntu VPS

Now we are ready to begin the LAMP installation process.

  1. Login to the server once more with SSH due to the restart in the last step.
  2. Enter the following command (or copy and paste into the terminal if you don’t know how to type “^”) to start the LAMP installation:
    apt-get install lamp-server^
    Note: Ubuntu 12.04 seems to work very well for me when installing the LAMP server. Ubuntu 13.10 (which is the latest available version in my VPS control panel, the latest Ubuntu version as of this writing is 14.04) always hang during the installation of MySQL server, after it displays the MySQL change password error message.
  3. If you want to store the web server files to your home directory for backup purpose, you can edit the apache2 configuration file.
    sudo vi /etc/apache2/sites-enabled/000-default

    Press i and replace the two places of “/var/www” to “/home/username/public_html”. Replace the username with your username.
    Press esc and type “:x” to save.
    Don’t forget to create the public_html folder inside your home directory.

    mkdir ~/public_html

    And to apply the new Apache configuration, restart Apache.

    sudo service apache2 restart

You have finished LAMP installation. Now you can visit your empty website by going to the IP address of your VPS. Well, it is empty until you upload some web pages.

Transferring files

With SSH set up in the first section of this tutorial, you can now also use SFTP to transfer files between local files and your server. The setup is easy. Just use your favorite FTP client to connect to the server. Make sure to select SFTP in the Protocol field for your client and fill out other necessary fields to connect to the server. Once connected, you are ready to publish your website.

Conclusion

With a VPS, you always can use the latest version of PHP and a variety of PHP extensions if you want. You can also install Ruby on Rails, Node.js, Git, and other additions you need without any restrictions set by the shared hosting. However, since you are basically using other people’s resources, it’s important to have a contingency plan to backing up all the files in the home directory on the VPS in case anything happens to the VPS server.

Two tips when using CloudFlare

CloudFlare Tips

CloudFlare is a service which secures and optimizes the performance of a website. I have begun to use the service on the blog one week ago and here are two tips I found so far when tinkering around with the service:

Sub-domains

When setting up a new site, add any sub-domains which you want to optimize through CloudFlare. Or you could add them later by going to your websites list, and select DNS settings from the drop-down list for the main domain that your sub-domains are in.

Here are some screenshots on the setup process for this blog, blog.robbychen.com:

CludFlare websites

Red circle is where you need to click. Click the image to enlarge.

CloudFlare DNS

Click the image to enlarge. You need to fill out two fields. First is the name of the sub-domain. For example, the name for blog.robbychen.com is blog. You also need to fill out the IP address for your domain. This should be the same as the first IP address on the list on that page. When you finished filling out all the required fields, click Add button.

You need to add the sub-domains one by one. Otherwise, CloudFlare won’t be able to automatically detect them and therefore they won’t benefit from the service.

CloudFlare Page Rules

This tip is for those of you who use back-end for your website, such as WordPress.

If you tried some apps in CloudFlare such as uservoice and infolinks, you may notice they appear in all pages on the site, even in the back-end and/or in the areas where you do not want the apps to be installed in.

To solve these issues, you can use Page rules:

page rules

Click image to enlarge. Click the page rules link indicated by the red circle to go to the page rules settings page.

On its settings page, you can define which URL you want to be excluded from certain features. Or you can use the pattern to define multiple URLs to be excluded, domain.com/wp-admin/* for example. Unfortunately, it can only use asterisks (*) in the URL pattern and cannot use regular expression to include more broad areas at one time, such as [*.]domain.com for both *.domain.com and domain.com. The only way to include these two patterns is to write separate rule for each of them. Below is a screenshot for these two rules I created.

Page Rules Settings

Click image to enlarge. As the image shows, not only you can control which pages the apps will be executed on, but you can also control other settings as well, such as security and performance.

Conclusion

Fortunately for me, the free plan of CloudFlare is enough for my sites. Besides the restrictions in the settings, there is also the limit of 3 page rules I can create. The free plan may or may not work for your site(s). You can try it free on your site(s) as long as you want, and purchase a paid plan if you want or in need of other features.

Do you have any other tips on using CloudFlare as well as any question regarding above tips? Please leave a comment below.

Site Gamified

captainUp

I have always wanted to do the idea of gamification on the site ever since I got into the achievements/goals mechanic of playing games on the iPad. While I have a good idea on how my achievements list and rewards system are gonna work, I don’t have enough skill to implement it on the site. That’s why I will be learning to develop WordPress plugins as well as JavaScript, and write a tutorial series for them on this blog as I learn so that you will benefit from it as well as remembering the learning materials.

Besides learning these two skills, I also may need to learn some game design skills, specifically level design (or whatever it is called). Since I lack drawing and creativity skills, I’m not planning to be a game developer. In the future, I may be entering game-related career once I learned all the necessary skills, who knows.

In the mean time, I will be using Captain Up to gamify the site. As far as I know, the rewards system for Captain Up is badges. It’s great for general public. However, it basically doesn’t have any reward (neither virtual nor real rewards).

My idea of rewards system is specifically for the web developers, bloggers, and anyone who has a website in mind. It would have four levels (Bronze, Silver, Gold, and Platinum). The level is determined by your points. You earn points by completing tasks described in the achievements.

Once you are in either of these four levels, you can spend points on the visibility of your website for the specific length of time. The website’s visibility basically means that your website will be visible on both the homepage of my site and in the sidebar.

The visible time is increment of one week for each level (1 week for Bronze, 2 week for Silver, and so on). As you may have noticed, the max time for the website visibility is 1 month.

As far as the points system go, the points will be subtracted from your account once you spent on a reward. And since your points are tied to the level, your level will be decreased as well (Gold to Silver, Silver to Bronze, and so on).

The above rewards system is my intension to implement on the site. And eventually and hopefully, this implementation will become a WordPress plugin.

What do you think about this idea and gamification in general? Leave your thoughts in the comment below.

HTML5 ContentEditable usage

contentEditable and localStorage

The ContentEditable attribute in HTML5 is very useful to those who just want simple and small edit directly in their HTML document without go into the backend. It also can give users the freedom to edit the document the way they want and maintain their edits with the help of Local Storage. This post discusses the second option which uses Local Storage to give users the ability to edit and maintain the document.

Create a new HTML document and type the following code:

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>contentEditable</title>
	</head>
	<body>
		<div id='edit' contenteditable='true'>
			Hello
		</div>
		<script>
			var edit = document.getElementById("edit");
			edit.innerHTML = localStorage.getItem('edit');
			edit.addEventListener('blur', function() {
				localStorage.setItem('edit', this.innerHTML);
			});
		</script>
	</body>
</html>

In the above code, the contentEditable attribute is added to the edit id. It then uses JavaScript to add the localStorage functionality.

One usage tip for contentEditable is that when focused in the contentEditable area, you can select the text and press Ctrl/Command + b, Ctrl/Command + i, and any other keyboard shortcuts for text formatting to format the text as show below.

contentEditable and localStorage

Replace a phrase in several posts for WordPress

MySQL replace function

I talked about changing the URL paths of images and links for the old posts will be based on the 404 not found error generated through traffic, one by one. Apparently, this was a bad decision. I don’t expect the traffic go up so quickly after I added these old posts. It seems that they still are more popular than my new ones. Therefore, I decided to search for a solution to replace some parts of url for the links (and images) in the old posts with the current url format so that it can direct them to the correct file locations.

During the research, I stumbled across MySQL replace function. I thought that it could come in handy when replace certain phrase within some posts, such as old links and image links. And here are the steps:

  1. Login to cPanel of your web host.
  2. Find and login to phpmyadmin.
  3. Go to the database which your WordPress installation resides.
  4. Click the SQL tab and type the following codes into the text box:
    update wp_posts set post_content = replace(post_content, ‘find this text’, ‘replace with this’);

    Replace “find this text” with the text or phrase or whatever you want to be replaced, and replace “replace with this” with the text you want to replace. For instance, mine was

    update wp_posts set post_content = replace(post_content, ‘robbychen.com/oldBlog’, ‘blog.robbychen.com’);
  5. Click Go button and the text is changed in the database.

Now that almost all the links were fixed (at least I think), I still will continue monitoring the 404 errors to see which links are missed from the above code until there are no more 404 errors.

If the above code could not work for you, you can’t understand one or more of above steps, or you have other solutions to replace the text across multiple posts, leave a comment below.

Blog updates and upcoming Tutorial Series (Updated)

Blog updates

As stated in the last post, I had to delay my projects including this blog thanks to my aunt and uncle’s visitation. Now that the two of them have gone back to their home, I can begin working on this blog as well as other projects once again.

Here are some updates I’m planning to make on this site:

  • The Dairy blog I mentioned in the last post will be migrated to this blog. And after that, I will retire the dairy blog. (UPDATE: It seems that there aren’t any interesting post over on that blog. So I decided to just leave it be. I won’t delete / deactivate or archive that blog so you can have a chance to take a look sometimes. However, the reason I won’t delete it because it contains some personal inspiration to me. I may visit it from time to time to remind myself. However, I won’t update that blog anymore. I haven’t seen any change to its traffic anyways.)
  • Which means that I will have more time to write new content on this blog every day.
  • I migrated lots of old posts I wrote since four years ago, when I first started this blog. You can read the first post I wrote on Jan 3, 2010 here about ebook DRM.
  • Despite being found out a lot of old and long forgotten posts mentioned above, the images in some of the posts cannot be found. I will continue to look for older posts I wrote (I believe that the posts I wrote in 2012 are still missing) in the old databases using the method I discussed in this post. (UPDATE: Apparently, I just wrote small number of posts during 2012. I will see the traffic logs if any of them have generated 404 errors and then decide to re-post them or not)
  • As for the images contained in some of the posts, I will selectively restore them based on the 404 errors I received from reading the analytics (in other words, depending on the visibility of the posts).

And here are some of the tutorial series I will be starting on the site in no particular order (so is the order of posting schedule):

  • WordPress themes development
  • WordPress plugins development
  • Angular.js
  • CoffeeScript
  • Twitter Bootstrap
  • Maybe more …

Note that I will write the title for the series in a specific format so there won’t be any problem differentiating them with the regular posts I write.

If you have any idea for the tutorial series for me to write, or if you would like me to start the specific series first, please leave a comment below. I’m not just interested in the coding / development area, I’m also interested in other areas, After Effects and 3D Animation for example. If the tutorial series go well, I may consider starting these series as well.

This blog will resume soon

robbychen Blog paused

I know that I haven’t written a new post on this blog since the last day of March. Because of the pressure of my aunt and uncle coming to our place for one month, I haven’t had time to work on any of the development projects lately, hence I don’t have anything to write on this blog. Once my aunt and uncle went back from their trip at the end of this month, I will restart working on my projects.

For the time being, please visit my diary site to read about what I have been doing these days.

A temp WordPress installation for Reviewing old posts

A long long time ago in 2012, there were some forgotten posts ...

I mentioned that I will be reposting some posts I wrote some years ago. This is the first step, creating a temporary WordPress installation to connect to the old database, review its data, and post any old but still useful information as a new post. Because this installation of WordPress is a multi-site installation in sub-domain form, I set up one of the subdomains as a wildcard subdomain (*.robbychen.com). Therefore I created a separate subdomain called rcblog-old.robbychen.com, and installed a single-site WordPress installation into this subdomain. Here are the detailed steps for recovering past posts which I wrote that had been long-forgotten:

  1. Login to the web hosting account (mine is Hostmonster).
  2. Use the find feature on the hosting panel (usually cPanel), find and click on the subdomains link.
  3. Create a new subdomain by entering the name of the subdomain, leave everything else default, and click create.
  4. Note the home folder for the new subdomain. We will need it later to upload a copy of WordPress.
  5. Grab a copy of WordPress on wordpress.org, extract it, and upload to the home folder mentioned in step 4 through either FTP or SSH.
  6. Go back to the hosting panel, find and click on the phpmyadmin link, and login using the web hosting credential.
  7. Search for any unused or old/long-forgotten database and verify that it’s a WordPress-generated database (usually almost all of the tables are prefixed with wp_ unless you changed prefix during the installation of WordPress).
  8. Go into the chosen database, look for wp_options table, and check the checkbox on the option_value for siteurl and home option_name. If you can only see one of them, make sure to click the “Show All” button at the bottom of page.

    Change siteurl and home variables in the database

    Change siteurl and home variables in the database (circled in red). Click the image to enlarge for more details.

  9. Scroll to the bottom of page and click Change.
  10. Change the option_value for both of them to the newly created subdomain (that’s http://rcblog-old.robbychen.com for me).
  11. Note the database name and go to the URL for the new subdomain.
  12. Click on the “Create a Configuration File” button, then click on “Let’s go!” button, and fill out the database details into the appropriate fields.
  13. When you are done filling all the fields, click submit button and click the “Run the install” button.
  14. Because the database already contains the WordPress data, it shows the Already Installed message.

    WordPress Already Installed screen

    WordPress Already Installed screen

  15. Click on the “Log In” button.
  16. Because this is an old WordPress database (probably very old), you may have forgotten either its username or password or both. In this case, click the “Lost your password?” link and enter your email address to recover your username and/or password.
  17. If you don’t remember the email address for this WordPress database either, you have to go back to phpmyadmin interface. Navigate to the wp_users table, and if you were the only user, the one and only email is under user_email column. You can also change the email address within this interface if you don’t use this email address anymore and/or would like to change to another email address.
  18. After you successfully logged into WordPress admin, it might show notice to upgrade your database. Go ahead and let it upgrade. After that, ignore the updates section since it’s a temporary WordPress.
  19. Go straight to the posts and/or pages section and let the “best forgotten posts” treasure hunting begin.

If you have any question regarding some of the above steps, please let me know in the comment. I will help you as possible as I can.

I’m back

Blog Come Back

After a few months (maybe years, I can’t remember how long I have not been writing on this blog), I’m finally deciding to start writing posts on this blog again.

I remember the last time I wrote on this blog was before my site went blank (I think it’s called White Screen of Death in WordPress). Because of this issue (at that time I didn’t know how to fix it, but I know now), I had to delete the database containing all of my posts I wrote over the years and start over from a new WordPress installation.

However, it didn’t go well as planned. Because of my ambition to try a new CMS system and possibly abandon WordPress, I hesitated to restart writing posts on this blog, thinking that I would start writing on the new CMS after it has been installed and made it work.

But as you can see, I’m back with using WordPress again. I tried Drupal (yes, that’s the new CMS I was talking about previously), thinking that I had enough development skill to toggle this developer-friendly CMS.  However, I didn’t even try to play around with the code, and I already confused by its complex admin user interface.

For the next several weeks, and possibly months, I will rewrite some of the old posts I found during the cleanup of my databases. Since my web hosting provider provides unlimited MySQL databases, I made a number of databases for the past several years for different installation of WordPress. Perhaps I should limit my database creation because I noticed that some of the posts in my databases are the same.

In any case, if you have any suggestions on what I should write about (WordPress or web development related), please leave a comment below. Also, for those who are curious, this is a multi-site installation. So my four sites (possibly more in the future), this blog, my main site, my diary blog, and rabbweb.com (my gaming videolog), are connected together.