Blog 1

Random Talk on Random Thoughts

Website Preview in Mobile Devices

| Comments |


To know the page layout of a website, notably my blogs, on mobile devices before publishing it.

Preview this blog on a smartphone


I used ifconfig to check the IP address of my desktop where the preview site was hosted. It’s When I typed in this address followed by a colon and the port number 4000, then the browser said “connection timeout” after loading for a while.

Connection timeout


I spent a day to identify the cause of the problem.

Host name incorrect

Actually, the website should be hosted at the internal IP address shown by ifconfig instead of localhost. Since I switch off the router before going to bed every day, the internal IP address for my desktop changes daily. Therefore, one uses to host the site on all IP addresses that the machine possesses.

In Jekyll-Bootstrap, one may simply add host : in _config.yml; in Octopress, one may find the line containing server_port in the middle of Rakefile and add --host #{listen_host}.1

Changes in Rakefilelink
server_port     = "4000"      # port for preview server eg. localhost:4000
listen_host     = ""   # bind to all available IPs

# rackupPid = Process.spawn("rackup --port #{server_port}")
rackupPid = Process.spawn("rackup --port #{server_port} --host #{listen_host}")

Port blocked by firewall

On Ubuntu, I used UFW to open the port 4000 to all devices at home. (The netmask of my home router has 24 bits, which is the usual setting.)

sudo ufw allow from to any port 4000:4001 proto tcp


  1. UFW – Ubuntu Community Help: the syntax for allowing and denying specific machines.
  2. Vagrant 下的 Octopress 預覽設置: A sample Rakefile which allows the specification of the host address.
  3. 鳥哥的 Linux 私房菜 – 基礎網路概念: A detailed explanation for some fundamental concepts like IP address, netmask and subnet. I understand what /24 in means after reading this chapter of the guide.
  4. An Ask Ubuntu question on specifying a range of ports in UFW

  1. View my working examples: