How to Make and Upload a Website on Dropbox

A few months ago I cancelled my hosting and server accounts and moved all my websites to the deject. I tried it every bit an experiment; never for a 2d I thought it would work this well. I did the switch out of impulse: I was pissed. I was pissed at the hosting companies charging and so much, having such crappy back up, and much downtime. I'm very glad I switched.

Why I switched

Prior to the cloud, I was hosting my websites on a VPS (Virtual Private Server) with a visitor called Linode. This company gives you lot a server every bit is and you have to install the Bone by yourself, maintain it, ameliorate its operation, etc. I busted my chops trying to configure a fast server. After I was washed, the server was running CentOS + nginx + PHP-fpm + MySQL, hosting my websites and Wordpress blogs.

The drop that spilled the cup came one twenty-four hour period of February 2012, when all my websites (folders) were deleted somehow. Because I considered paying $twenty per month for simply hosting my files was enough, I didn't enable the backup option (it was an extra $two per month, if I retrieve correctly). So that day came, and I went straight to their support ticketing organization. The dude that was assigned to me was not helpful at all and said there was nothing to be washed. My last backup of the websites was in December 2011.

Pissed off, I cancelled my business relationship, got my refund and didn't think back (or forward). Having been left simply with my domain names, I had to do something (for AlexCican.com alone, I was averaging around 700 unique visitors per day). That's when I made the decision to use the cloud.

Why I switched to Dropbox and GitHub

I switched to these ii services for a couple of reasons:

1. Free. It's gratuitous and your account is created immediately. Free 2GB space for Dropbox and unlimited public repos for GitHub.

2. Easy to utilise. Only drag-n-drib the file inside your Dropbox folder. The file is accessible anytime from anywhere (Dropbox website, desktop, laptop, mobile, tablet). Uploading to GitHub (known as pushing), is very simple: commit, add together your message and push the changes.

3. Enough of infinite. I didn't need 20GB for my websites. The complimentary 2GB of space offered past Dropbox was more than enough.

4. Backup. Your files won't get lost/deleted. The extra layer of pushing the files to GitHub also, offered double protection.

5. Restore. In case you screwed up something, you can restore the file (as well as previous versions of it) and revert the changes. At no actress price.

6. Uptime. Previously, with my VPS, and going back even more, with my shared hosting, the uptime was good but I would experience downtime. Switching to the deject, made my websites online with an uptime of 99.991%.

7. Speed. My websites are blazing fast. Dropbox and GitHub servers are optimised "out of the box" to be fast and reliable (pages are compressed and deflated).

8. Security. In my effort to better the functioning of my server, who knows what vulnerabilities I uncovered, making my server hackable (mayhap that'due south what happened on that twenty-four hours). I don't have to worry about this again. Both services come up with SSL and costless support included.

Let's get into how I did it.

The specifics of Dropbox

If you lot desire your files to be accessible by anyone, you have to move them into your "Public" folder. If you're using absolute paths for your website, I suggest you change it to relative paths. So from this:

            <a href="https://alexcican.com/web/file.html"></a>                      

change them to this:

            <a href="./spider web/file.html"></a>                      

Doing it this manner, you lot tin however access the website without having the domain name of the website pointing to the correct folder.

Next pace is to alter the DNS to bespeak to the Dropbox folder (skip this if you're gonna use GitHub to host your online version of the site).

If you're using GoDaddy, login to "Your account" and launch the "Domains". And then, click on the domain name you want to edit and from the toolbar, select the forward icon. Click "Frontwards Domain" and insert in the popup input, the consummate URL of the index.html from inside the Dropbox folder (to get the link: right click on the file>Dropbox>Copy public link).

Wait a few hours and you lot should be able to access the website hosted on Dropbox via your domain name!

Downsides of Dropbox

The large downside of hosting your website on Dropbox is that you can simply host static avails (HTML, CSS, JS, images). No PHP. A solution to that was to utilise another service chosen PHPFog. I won't get into details in this tutorial almost PHP.

The other downside I institute was the URL system. On Dropbox, the URL of a file is something like:

            https://dl.dropbox.com/u/212143/public/website/file.html                      

This means that the Dropbox URL would be visible when navigating the website. I couldn't have something like:

            https://alexcican.com/file.html                      

unless I did a URL forwarding with masking from my DNS settings. This was non optimal considering whichever page of the website I'd browse, it would show upwardly only as:

To practise this URL masking on GoDaddy, repeat the steps higher up for pointing the DNS record to Dropbox, only in the popup click on "Avant-garde Options" and select the 2nd option: "Forwards with Masking".

Lastly, if yous have a large website, with many pages, yous will notice information technology hard when y'all want to update the copyright of the page, for case. Because of the website existence static, you would have to edit every single page of your website. Whereas with a dynamic website, you edit once (the header.php for example) and you're done.

Specifics of GitHub

Searching for solutions to this upshot I came across GitHub. On GitHub, you can host static websites with the pick of adding your custom domain proper noun (hence custom URLs) every bit well. There are ii ways to do this:

1) You lot create a repository with your username and add .github.com at the terminate of the name. For case, if your username is "sican" yous create a repo:

2) or within an existing repo, you create a new branch called gh-pages and push the HTML files of your website in in that location.

To enable custom domain names, you but accept to create a file named CNAME, in the root of the repo or branch, open up the file with a text editor and add your domain proper noun within:

GitHub pages also supports custom fault pages. Simply push a 404.html file with your message in the root of the repo or branch.

Now information technology's fourth dimension to change the DNS settings from GoDaddy to point to our GitHub page. Login to your account, launch the domains and click on the domain proper noun y'all want to change. From that folio (meet screenshot above), go downward and find the "DNS Manager" department. Click on "Launch".

You lot take to decide what domain proper noun y'all'll exist using. For a sub-domain like http://www.alexcican.com or http://blog.alexcican.com you would simply create a CNAME tape pointing to charlie.github.com. If you are using a top-level domain like https://alexcican.com, you must utilize an A (Host) record pointing to 192.30.252.153 and another one to 192.30.252.154. There'south no need to add a CNAME record for top-level domains. Read more in the documentation.

Downsides of GitHub

The outset downside is that you need special software for interacting (gracefully) with your repositories. The all-time software to install if you're on a Mac is Git Tower and if you're on Windows you shoud be using SmartGit.

The other downside to GitHub is that unless you're a software geek, information technology takes time to get it. It's non intuitive and it'southward not elevate-n-drop. Later on yous went through the help documents and learned how to setup stuff (repositories, branches, copse), it's very easy to use.

Lastly, the same with Dropbox, GitHub but supports static avails (HTML, CSS, JS, images).

Liberation begins

"FTP-ing is so 1999" – everyone

Found an fault on the website but yous're on the movement without your laptop? Edit the folio that'due south hosted on Dropbox from your iPhone/iPad, save information technology and you're done. If you're on GitHub, commit the changes and push them to the repository. Job done!

"Hold your horses, Johnny". There'southward a catch: a Git version control app for the iPhone/iPad doesn't be yet, so y'all can't update your repository on those devices. Textastic has it planned only I don't meet information technology being completed whatever time presently.

In that location is a mode effectually this but it involves Jailbreaking your iPhone/iPad and a great deal of hacking via the command line. Bank check out this peachy tutorial showing you how to exercise it.

Conclusion

There are some disadvantages to both systems:

• Dropbox: one) doesn't back up custom URLs two) can host only static files (HTML, CSS, JS) and 3) making changes to a website with many pages is tedious

• GitHub: 1) requires special software and takes fourth dimension to larn 2) pushing changes difficult via mobile/tablet and 3) can host simply static files (HTML, CSS, JS)

Simply for me information technology works. For me, the advantages outweigh the disadvantages. I like my websites more (since they load faster and stay online longer), I experience more relaxed and I too sleep meliorate at night (secure servers, backups exist). Lastly, I feel liberated since I tin admission my files someday from anywhere (and edit them, almost from whatever device).

Side by side article I have scheduled, is a continuation of this i: "How I moved my blog to Dropbox". Make certain y'all grab the RSS feed and you follow me on Twitter.

Read adjacent

The lost art of Pricing and Negotiating

barknowely1996.blogspot.com

Source: https://alexcican.com/post/guide-hosting-website-dropbox-github/

Share this post