Setting up Ruby on Rails

I wanted to develop the website on my own personal Apple mac. This meant I needed to setup Ruby on Rails on this device for the first time, this is something that would see me running complicated commands in Terminal.

These are the commands used to setup a Ruby website.

$ – Simply a note to remind myself to run this as a command

cd – change directory (move to a specific folder to work on)
To start a new website, the following commands are required.

1 $ cd ~/Documents/Projects/
2 $ rails new portfolio -d mysql
3 $ cd ~/Documents/Projects/portfolio

1 – This command selects the location of the new site

2 – This command sets up the Rails file structure in the chosen directory and names it ‘portfolio’.

3 – This command sets Terminals within the portfolio page.


Next is the sercurity of the server, open the file (config/database.yml) and change the password.

4 $ mysql.server start
5 $ rails db:create

4 – This command starts a server on the macintosh and allows for live editing.

5 – This command will run the database


//Start building the website

  1. – This section explains which ppage is the page that should load as the root file. Usually just the index page;
    Add this code on line 2;
    root to: ‘application#index’

2. – This is also required for the same reason as part 1;
Add this code before the end:
def index

3. – This actually creates the index file that is being loaded up;
Create the file index.html.erb
In directory app/views/application/index.html.erb

4. – Add other scss files in stylesheets folder, create the header & content sass files;

– application.scss;


5. Add variables file, which allows for fonts and colours to be stored as variables, making styling the site much easier.

Once the site files were ready it meant I could immediately start working on them. The following code is what I would use on a daily basis while working on the project. They change the directory (files) that i’m working on, run the server and counteract a common mySQL error.

$ cd Documents/Projects/Optimadmin
$ cd Documents/Projects/osl_2017

Run the server:
$ rails s

If you get a mySQL error:
1. ctrl + c to quit server
2. $ mysql.server start

CMS: Teaching & learning strategies: How they impacted my workflow and overall project

Teaching methods such as lectures, seminars, discussions, presentation, research based learning, 1:1 and group tutorials were used throughout the year to help me achieve the best possible grade, below I have documented each time one of these methods were used and in turn aided my projects development.


Discussions among the teachers and my peers were made much more frequently throughout the development of the service than the one to ones on the pure nature that I was able to ask questions at any time I was around my peers.

This was a fantastic aid to my site as it allowed me to gain an insight into the opinions of others and get advice regarding how to improve or what to add to my project.

The most important part of this was the client meetings as it allowed me to check I was doing exactly what the client was asking of me. This was vital.


The presentation of my idea to the group in the first stage was vital, as while it not only made me predefine the concept, it also allowed me to express to an audience of peers. Questions were made from the group, and also the teachers, and in answering these questions allowed me to come up with new ideas. I was also able to pose questions to the audience of my presentation to allow me to guage their reactions, and help me decide whether which adjustments to make.

A key point from this stage was gaining the thoughts on the language of the site and how it should work in relation to translating content for users of other languages. This was an important part as it allowed me to consider language lessons within the service.

Research based learning

Research was the most valuable to me of all the learning strategies listed here. Alternatives were an important thing to focus on as it allowed me to strategise what would be important implementations. I also needed to learn how to setup and run Ruby on Rails on my personal Macintosh, this was a HUGE learning curve.


The one to one sessions were vital to my project, it allowed me guidance on my project on a personal level. The tutor was able to understand the aim of the project and offer advice on key decisions that were needed to be made.

When stuck for ideas with my design, the one to one lessons were able to aid me in ideas of new research topics. Posts were suggested for me to write which allowed me to in turn think of new ideas.

They encouraged me to keep the design as simple and straightforward as possible in the aim to allow me to focus on developing my coding skills.

Existing CMS

It is vital to look at a few other content management systems if I am going to build my own, therefore I have decided to research some of the more prominent ones in the market.

Getgrav (

Getgrav is a reasonably popular cms that others a lot of features, they are listed here;

Screen Shot 2017-03-29 at 11.37.36

A lot of these features are unecessary for a cms of a branded website.  Such ideas that are not needed are ones like the ultimate control the user has over the site. These consist of being able to add entirely new pages, changing the theme, editing the style/css, adding plugins. The cms the client requires is a lot more restricted,as most of the work is still done by the web agency, but small changes should be done by the client. These include small things like adding an additional team member or editing a blog post.

The visual aspect of the cms is reasonably similar to the one i’m redesigning. Below are images of what the cms looks like.


You’ll notice the design is similar in the sense of having a sidebar navigation rather than a top navigation. It consists of additional items that aren’t required by the cms I am creating, these are the plugins and themes. While this cms is has a features that are simply unecessary for what I am creating, the simplicity of the layout is very good and is something I should consider for my project.

Webflow (

Webflow is a service for content managers, developers and designers. It has tools for each type of user to take advantage of the service. You will see below that the site has lots of different services available.

Screen Shot 2017-03-29 at 17.10.56Screen Shot 2017-03-29 at 17.19.22Screen Shot 2017-03-29 at 17.13.17Screen Shot 2017-03-29 at 17.19.52


Font Usage

Font research is important for this project because I have to pick fonts that are legible by a wide demographic, but is simple enought to be understood by anyone who’s job it is to update the website.

That said the main site wide font can be a simple sans-serif font, that matches the designs of large organisations like Apples’ ‘San Fransisco’ font and Googles’ ‘Open Sans’ font.

screencapture-fonts-google-1481274378497Looking through googles’ fonts featured at ( there are actually a lot of appropriate looking typefaces, it is simply a case of picking one.

The reason for using Googles’ fonts?

  • These fonts are great because they are completely free to use, and require no liscensing whatsoever and are completely unlimited with no caps on usage.
  • Cross platform rendering is fully supported by Googles’ content delivery network meaning font stability in different browsers and devices works perfectly.
  • Loading times are much faster since they are compressed and are much more lightweight than self-hosted and Typekit fonts.

The font needs to be one of the Google fonts, but also have great usability. The reason for this is that it needs to not get in the way of usage, and allow people of all ages to be able to use the cms without any issues. Therefore I picked a nicely designed sans-serif. This is the one I chose;

Screen Shot 2017-03-04 at 21.26.43.png

The reading list: What I learnt

The art of project management
Book by Scott Berkun
 – Creative ideas can be made by everyone, not just by geniuses. Great ideas can be achieved by anyone, they just need to employ the right people.
 – Ideas can be overated. Just like how the idea of the lightbulb was 100’s of years old if you factor in the usage of fire an candles within the home. It was only with the right technology and know how was it possible to make the product.
 – When making a product, you will never make it entirely perfect on the first, second or even fifth attempt.
 – Revision is key to making a a great product successful.
 – ‘Ideas are made from other ideas’.
Undercover User Experience Design
Book by Cennydd Bowles and James Box
  – Design is the atc of playing god, they change the way we interact with the enviroment around us.
  – Scale is so big that small changes can effect thousands, millions or even billions users.
  – By using and designing for fast connections with top end handsets, we are excluding the users without this technology, the ones usually who aren’t western. Meaning that we are unethically becoming biased.


Science of Persuasion
  – There are six key parts to make a product interesting to someone. These are;
 1 – Reciprocity
2 – Scarcity
3 – Authority
4 – Consistancy
5 – Liking
6 – Consensus
Content Strategy for the Web (Voices that matter)
By Kristina Halvorson, Melissa Rach
 – Marketing, brand, social, earch engine optimisation, user experience and tecnology are all important factors of a successful business.
 – Prioritising the content strategy is vital.
Don’t Make Me Think: A Common Sense Approach to Web Usability
By Steve Krug
 – If a user has to think about about a function on a site, then it can be improved.
 – Consistancy, clear navigation, buttons should look like buttons

Personal experiences with the current CMS

Due to the vast ammount of links on the left column, I have to scroll up and down a few times to find the relevant section I want to edit. A search function would be great to allow the user to find the section they need easily.

When developing, the ability to create multiple versions of an page, for example, multiple awards, would be great as it allows the developer to speed up the process of editing the website.

Uploading multiple images at once i s really important as it will also speed up the process of editing the website.

New technologies for professionalism


Digital Ocean


Digital Ocean is a great service for online hosting, this website gives you the options for multiple abilities. Monthly storage, processing, disk space and transfers are an advantage over other services such as GoDaddy. They allow you to have as many users as you would like, instead of being on a shared bandwidth with other developers. This is a reasonable and attractive service. They offer great services like 24/7 Support, Tutorials, Highly Available Storage, Lightning Fast Network, $5/Month, Flexible API, 512MB ram – 20GB SSD disk, 1-click install apps, Free unlimited bandwidth with the ability to deploy In Seconds.



Sendgrid is a service founded in 2009 that manages email marketing and can give real time analytics about the emails you send. It is an industry-disrupting, cloud-based email service to solve the challenges of reliably delivering emails on behalf of growing companies. It offers Transactional Email, Email Templates, SMTP Email, List Management, Powerful APIs.



Stripe is an online service that handles and tracks all online payments. Stripe is an Irish technology company, operating in over 25 countries, that allows both private individuals and businesses to accept payments over the Internet.It is also capable of handling inventory and stocking of items for sale.


If I need to use a store on my website this is a vital service I should use. pricing starts at $0, with free trials available, no hidden fees or lock-in and the first $50K invoices free.