WicketBang!

Backstory

First, allow to me to say this: I love GoDaddy as a company. Their ads may be cheesy, but I don’t recall ever seeing too many of them to begin with. Their service is what I pay them for.  I have had three hosting accounts with them, two Linux and one Windows (testing some ASP.Net stuff out). I cut it down to one hosting plan, per their suggestion. All it required was an update to a Deluxe hosting account.

GoDaddy’s hosting is, in my opinion, the right balance between powerful features (if you know what you’re doing) and ease of setup (if you don’t). I pay a year at a time.

So why am I changing, if I’m so happy with them?

Simple. I have the technical skills (or the interest in improving said skills) to replicate what they are doing for me, with a hosting company that will cost me about half what I’m paying GoDaddy.

I discovered Digital Ocean (Disclaimer: this is my Affiliate link) when I was looking at expanding my skill set from a LAMP stack to something more modern. While GoDaddy’s hosting is great, they are focused only on a LAMP stack (meaning Linux, Apache, MySQL, PHP). There are newer ways to write web apps using Ruby on Rail, Python/Django, and NodeJS with some sort of JavaScript framework. Digital Ocean simply rents you a Virtual Private Server (VPS) and you choose what you want to do with it. In most cases, they already have a Droplet (their name for a VPS) prebuilt for that purpose. They are not kidding about the 55 second install time, either.

If you are just going to do a LAMP stack and don’t want have the skills to pull this off, try GoDaddy. If you are trying to build up your Linux skills in being a webmaster, then Digital Ocean is perfect.

What I’ve learned thus far

It’s complicated. Your basic LAMP stack may be better, but I repurposed a general purpose Linux install, so I had to install each and every component to make a LAMP stack (other than Linux, which was 55 seconds).

Log into your VPS via “ssh USER@IPADDRESS” and provide your password. You will be the root user at this point.

Install Apache if necessary. Configuration will follow below…

Test your Apache installation by switching to your browser and entering your IP address of your VPS. It should display a general Page about Apache web server . If you can see that page, then it’s working.  We’ll replace it later.

When you install MySQL (if necessary), you will want to run the Security feature of the install. After that, you WILL want to install PHPMyAdmin. This makes your MySQL administration SO much easier. I cannot stress this enough.

To test your version of PHP (or to test to see if PHP is even installed):

CD to your directory that you want the websites to be at (something like /website). If you use the default path, it will be in /var/www/html (for CentOS and for Ubuntu).

Type in “touch phpinfo.php”. This will create the file. Then edit via “nano phpinfo.php” (or if you’re really a glutten for punishment “vi phpinfo.php”.)

Create your start PHP tag, then enter phpinfo(); (semicolon is a part of that line), then your closing php tag. Save the file.

Switch to your browser and enter your IP address of your VPS, followed by /phpinfo.php

e.g. IPADDRESS/phpinfo.php

If PHP is installed, it will spit out a very detailed report about every facet of its configuration and modules. If you get nothing, then PHP is not installed.

Make sure that both Apache and MySQL will start up automatically. In your SSH session, type in “chkconfig httpd on” and “chkconfig mysqld on”.  If you don’t, when you restart your machine, they won’t be running. If this has happened, you can start them with “service httpd start” or service mysqld start”.

Apache Configuration

Edit your Apache configuration file with nano or vi (found at /etc/httpd/conf/httpd.conf on CentOS- on Ubuntu, they have moved to multiple files- see https://help.ubuntu.com/lts/serverguide/httpd.html for more assistance).

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
#DocumentRoot "/var/www/html"
DocumentRoot "/websites"


…
# This should be changed to whatever you set DocumentRoot to.
#
#<Directory "/var/www/html">
<Directory "/websites">


…
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
# The index.html.var file (a type-map) is used to deliver content-
# negotiated documents.  The MultiViews Option can be used for the
# same purpose, but it is much slower.
#
# DirectoryIndex index.html index.html.var index.htm
DirectoryIndex index.html index.html.var index.htm index.php

Three things to notice: DocumentRoot, Directory, and DirectoryIndex.

Best practice is to copy the line you want to modify, then paste it in underneath and modify the copy. A # comments out the default line.

If you want to change the default directory where your website files live (like /websites, for example), then you will need to make sure that the world can see the files. DO this by typing “chmod 755 -R /websites” (if /websites is your folder.)

If you want to host more than one domain on your single hosting instance, then you will need to edit one more section of the Apache config file, the VirtualHost section. Each section will start with <VirtualHost *:80> and end with </VirtualHost> . Rinse and repeat for each section. When you’re done editing this file, restart your Apache web service with “service httpd restart”.

    ServerAdmin YOURNAME@DOMAIN1.com
    DocumentRoot /websites/DOMAIN1/
    ServerName www.DOMAIN1.com
    ServerAlias DOMAIN1.com
    ErrorLog "logs/DOMAIN1.info-error_log"
    #CustomLog "logs/DOMAIN1.info-access_log" common


    ServerAdmin YOURNAME@DOMAIN2.com
    DocumentRoot /websites/DOMAIN2/
    ServerName www.DOMAIN2.com
    ServerAlias DOMAIN2.com
    ErrorLog "logs/DOMAIN2-error_log"
    #CustomLog "logs/DOMAIN2-access_log" common

NOTE: If the ErrorLog and CustomLog log files don’t exist, then Apache WILL NOT START! (ask me how I know this…)

Getting to your website(s) from the world

You will need to update your DNS records at wherever you registered your domain at. For me, this was GoDaddy.

Sign into GoDaddy and go to the details of your domain. Click on DNS Zone File.

Write down the original IP address for the @ record. You will then edit that record (and ONLY that record) to reflect the IP address of your VPS at Digital Ocean.

Does this seem like a lot of work? Confused by all the techno babble? Then GoDaddy hosting may be a better choice for you…

Next up in pt 2 …Moving databases and blogs from GoDaddy to Digital Ocean

 

The setup:

From your terminal on your local machine, do a sudo gem install jekyll (this is assuming that you have Ruby installed and Ruby Gems installed as well.)

Go to your projects folder (or website folder or whatever it’s called.)
Do NOT make a new folder for this project; the gem will do that for you.

Type in “jekyll new projectname”

Change into your new project folder. It should have created a few folders.

The /_layouts folder contains the html templates.

The /_site folder contains your generated site.

The /_posts folder will contain your blog entries.

The /_config.yaml file can be left alone for the time being.

Creating the content:

Open the _posts folder inside of the project root folder.

Create a new document in the following format:

yyyy-mm-dd-title.md

Open this file in your text editor.

Start with

—
Layout: post
Title: Title of post
—

Three dashs then Enter.

Layout: post.   – This means to apply the post html template found in _layouts

Title: Title of article/blog post /whatever – This will be substituted in on the next section.

Three dashs then Enter.

Think of this section as the header section in html.

Next is the body section.

{{page.title}}

This will grab the Title out of the header section from above. It uses the Liquid layout template codebase, where most tags are in the form of {{page.tagname}}. These are completely customizable.

Your content will go below the {{page.title}}

Your content can be in pure html or in markdown format, which will be generated by the jekyll gem into html.

The advantage of using markdown is two-fold. First, there will be no missing closing tags in the html file. Second, it allows for a simpler method of having your subject matter experts write the blog posts and apply the formatting, without them knowing any html. One could argue that it is just as complicated initially to teach them one versus the other; however, worst case scenario, your publishing editor can go through and insert the markdown code where necessary, leaving the content creation up to the rest of the staff.

You can view your content in one of two ways.

Option 1:

1. Typing in “jekyll serve -watch” (the -watch means the local jekyll server will watch for any changes to your code and regenerate on the fly.)
2. Browse to localhost:4000/ and click on the link for your new post

OR

Option 2:
Go look at the index.html file in the _site folder. DO NOT EDIT this file, as it will be overwritten by Jekyll. Edit your site in _post.

Making it live

From your terminal window, do a “git push github master”. This will push your master branch to your github pages account (documented here at http://wicketbang.com/wordpress/github-pages-hosting/).

Leaving GitHub Pages but still want to use Jekyll?

If you don’t want to host it at Github Pages any longer, you can copy the contents of the _site folder to your other hosting provider.

Reasons you may want to do move it off of Github Pages:

Github Pages doesn’t allow for any server side scripting, such as PHP, ASP.net, Cold Fusion, Node.JS, Django/Python or Rails. If you want any of those capabilities, then you will need to shop elsewhere.

1. Create your Github account (need a unique email address per acct)
2. Create the website on your local development machine
3. Create your local git repo (for a short how-to on Git, look at vagnini.net/meetup_files.htm)
4. Sign into your new Github.com account and create the remote repo

KEY STEP: It MUST be in the format username.github.io
The username portion IS case sensitive and MUST match the case of your github username

1. On your local git repo, create a remote repo

git remote add github https://github.com/username/username.github.io.git

username MUST match case of the Github username created in step 1

1. Push your site to the remote repo

git push github master

1. Test your content by browsing to http://username.github.io
2. KEY STEP: For DNS, add (or modify) the @ A record (for the domain itself) to point to the IP address of username.github.io (discovered by pinging that address)
   Add (or modify) the www CNAME record to point to username.github.io
3. KEY STEP: Create the CNAME file in your project folder (NOTE: it is called CNAME, not CNAME.txt)

It should contain the following: www.yourdomain.com

1. KEY STEP: Push the CNAME file to the project and test for both yourdomain.com, and www.yourdomain.com

The Core Process

Web pages are made up of HTML code. They are stored on a web server and served by that web server when your browser (the client) requests them. The starting page is almost always called index.html (variants would be index.htm, index.php, or index.aspx, although these last two variants are a whole different animal.)

There are supporting files that go along with websites, such as .js files or .css files, as well as various media files, such as .jpg, .gif, .png and a host of video files.

The Modern Web Design Tools

While the list below looks overwhelming, the good news is that you don’t have to do all of these, all at once.

You generally only need one source control software, one markdown language, one server side language, both client side frameworks, one server side technology, and one text editor. You will most likely need all the web browsers. You will also need Photoshop, although Gimp will do if you’re broke.

• Source Control

1. Git -allows you to have multiple versions of files, as well as collaborate with others(commonly stored on Github)
2. Subversion – allows you to have multiple versions of files, as well as collaborate with others

• Markup languages

1. Markdown – generates html code from .md files
2. Textile – generates html code from .textile files
3. Jekyll – a Ruby gem – necessary if you use one of the above mark up languages)
4. HTML5 – plain text files- ends in .html or .htm-this is the most direct route

• Frameworks

Server Side

1. Symfony (using PHP)
2. CakePHP
3. WordPress – also uses PHP but is more similar to using Email and other simple blogging tools
4. Drupal
5. Joomla
6. Django (using Python)
7. Web2Py
8. Rails (using Ruby – commonly called Ruby on Rails)
9. MVC – general information on MVC, which is used by the above frameworks

Client Side

1. CSS
2. BootStrap (mostly CSS and some JavaScript – assists in responsive design)
3. Less
4. SASS
5. JavaScript
6. CoffeeScript
7. Backbone.js
8. JQuery (JavaScript Library)

• Server side technologies

1. PHP – Open Source scripting language that processes on the server
2. Node.js– server side JavaScript
3. ASP.Net – scripting language that processes on the server

• Databases (Middleware)

1. CSV files
2. Microsoft SQL Server
3. MySQL
4. NoSQL
5. PostGres
6. YAML
7. JSON
8. CouchDB
9. MongoDB
10. Oracle
11. XML

• Development Tools

1. Text Editor / IDE (Integrated Development Environment)

Windows

• Notepad++ – much better replacement for Notepad, which is Window’s default editor
• Aptana IDE -useful for JavaScript, as well as a smattering of other scripting languages
• Visual Studio – Microsoft’s software development tool

MAC OSx

• Text Wrangler
• Textedit – MAC OSx default text editor

Linux

• gedit – Linux default text editor (under Gnome)

Cross Platform

• vim – Open Source text editor – cross platform
• Eclipse – Multi-purpose open-source software development tool

1. Multiple Browsers (for testing)

• Firefox – from Mozilla – cross platform
• Chrome – from Google – cross platform
• Safari – MAC OSx default browser
• Internet Explorer – Windows default browser

1. Web Servers

• IIS – Microsoft’s Web server- comes free with any server version of Windows
• Apache –
• nginx –

So, how do you go about learning all this material? One way is by going down the rabbit hole via all the links above. Another way is to explore some free and not quite free options listed below.

Free Tutorials

• Code Academy –
• w3 Tutorials –
• Learn Python
• Learn Python the Hard Way –
• Mozilla’s School of Webcraft –
• Google’s Code University –
• MIT’s Open CourseWare –
• EdX – Online College courses with multiple universities
• Free IT Ebooks –

Low Cost

• Treehouse – $25-$49/month-
• Lynda– $25 -$37.50/month – I have actually paid for this service before and would do it again
• safaribooksonline -Quit buying books on coding and use this service instead – I have actually paid for this subscription before and would do it again

Note that nowhere in here am I saying that a College Degree is required, for a career in Web Design / Web Development. It certainly couldn’t hurt; however, the most important thing for Web Designers/Developers is their portfolio of websites, and for Programmers, their list of software that they’ve made. You are judged on the quality of your work, not the prestige of where you learned these skills.

There are a lot of options on what to learn and I understand that it’s very confusing. Below is a path to learning. Note that on the Back End section, you need to learn something about MVC, but then you can branch off from there, based on what interests you.

Side branches are additional skills/technologies that are related to the main skill (e.g. CSS leads down to JavaScript but across to BootStrap. BootStrap makes CSS work very well, but some basic knowledge of how CSS works is needed.)

Also, you don’t have to learn both. Many a person has made a very fruitful and rewarding career just being a Front End Developer (or a Back End Developer, although some basic knowledge of HTML and CSS is still needed.)