During the course two main goals were achieved. Firstly, the affiliate store from Amazon.com
was created and redesigned, using custom CSS. Secondly, the blog GeekChick.ru
was moved from the Wordpress CMS to the Ghost platform, with the root domain redirected and all transfer predicaments resolved. The final aStore may be assessed here
, the final version of the blog can be viewed here
Achieved learning goals
Almost all personal learning needs were achieved, from both 'Plan minimum' and 'Plan maximum’ listed in the ‘Learning Proposal
Firstly, I have learnt basics of HTML and CSS and collected a dozen of CodeCademy
badges. Secondly, adapting the Ghost theme Mochi
. As I discovered later, it was the right decision, as Ghost's support was able to help me to 'boost’ heavy archive .json file in order to make it transferrable.
Finally, I have successfully moved my four years old blog GeekChick.ru
from the Wordpress CMS to the Ghost CMS. I have fixed non validating lines of Mochi theme code and edited all theme files in order to make them work for the Cyrillic blog with particular audience. Also I have managed to move all the Disqus comments with their links intact and relocate Google Analytics, FeedBurner and social network connections.
The goals I have not achieved
As I was moving from the Wordpress (PHP) to Ghost (Node.js), I spent only minimal amount of time working with PHP code on the Wordpress side. I have created only one short template code page for the aStore implementation, only to realise later that it was unnecessary as this particular page was lost during the CMS transfer. For the transfer process itself I have used relatively simple ready Wordpress plugin, so I am still unfamiliar with the most basic PHP functions.
Even though I planned to take part in W3Schools' Online Certification Program
, later I decided not to pay for the certificates. They seemed to be unnecessary for my future career goals on that stage.
While I familiarised myself with the concept of LESS and have read the documentation, I still felt more comfortable operating with recently learned CSS. So I have made all my theme and aStore changes in CSS. For the latest theme modifications I should definitely consider switching to the LESS, as it appears to be shorter and faster way to work with transitions.
Even though I planned to construct the fully functional Ghost theme from the Linen template
, later I decided to work with the responsive theme Mochi
. Owing to this fact I were able to concentrate on the blog transfer processes and to finish the project until deadline. Nevertheless, I still considering take the Tuts+ course 'Building a Ghost Theme From Scratch
’ and reassess some basics, so I could consolidate my achievements.
Setting up the root domain, I gained an understanding of basic principles of web traffic cloud routing, domains DNS settings and cloud hosting. I have strengthen my knowledge of the basic Amazon S3
storage plans and their advantages. Also I have learnt how to work with the Ghost development theme copy
, preinstalled within the independent hosting environment, as I was using it as a test site.
During the course I have familiarised myself with the concept of code validation, and now can relatively fast read and decipher the results of the W3C Markup Validation Service
Working on a project and blogging, I found some useful software, that I will definitely use in future: for instance, LucidChart
, Sublime Text 2
and Sketch 3
. Additionally, I have learnt in what circumstances my projects would benefit from usage of HTML Beautifyer
, CSS Diff
and CSS Zen Garden
. Also I have constructed tangled learning route from the different Codecademy, TreeHouse, Udacity and Coursera courses to take in future.
I have optimised my HTML code writing with the Emmet plugin
. I have found several useful libraries, user cases and bootstraps on Stack Overflow
and will implement them in my future theme redesigns.
The most challenging part of the whole redesign process for me was versioning and documentation.
The first oversight was the lack of proper design project documentation. As I was working on a project sporadically, testing different approaches and code libraries simultaneously, eventually I have discovered that most references were unclear and partly dissolved in my own work. Since I was discovering new design theories during my other courses, the idea of the final design have also changed several times. None of these changes were documented and described in consistent manner, so during the final stage it was hard to justify some minor alterations. As I was unaware of existent versioning and documentation rules and procedures, I have created some working strategies myself, but they still seem to be imperfect.
To sum up, for my future projects I should consider creating mockups more responsibly, then fix the colour scheme and main proportions in the high-fidelity prototype, and finally learn how to properly document the creation and alteration processes.
The project's timeline and specifications
Stage 1. Amazon aStore creation
Amazon aStore is a service for Amazon.com affiliates, the subscribers of the Associates program
, receiving a small percent from any purchase made with custom Amazon links. aStore allows site owners to build their own online stores with affiliate links embedded.
The initial plan was to use for the redesign one of the Shared CSS themes
, created and uploaded to the public repository by aStore community. Nevertheless, after minor research it become clear that it would be simpler and faster to create own overriding CSS code. Using Codecademy CSS tutorial
and W3Schools CSS References
, I have changed the content boxes positioning and width, added images and title hovers, applied different colour scheme, masked unwanted brand logos and uploaded a tiled background. For hovers I have used the code library Hover.css
, posted on GitHub.
The final overwritten CSS can be found here
in plain text format. Unfortunately, aStore cannot be validated, as its HTML and global (initial) CSS are closed for editing. This was one of the reason I decided to move forward in my project and make the final goal bigger.
Also it is important to note that the only available export format for the aStore is <iframe> tag, that is not supported neither Wordpress or Ghost. While the interim goal was to host created aStore on a GeekChick.ru
domain, the only method to do that was creating the separate Wordpress PHP-template and incorporate the code there. Using these
Wordpress instructions, I have created a Custom Theme page and embedded aStore code into it. Nevertheless, it was left aside after moving to the Ghost platform, but I have managed to collect valuable feedback from the readers before that.
I have also created an aStore storefront in the right column of Wordpress blog, using a plugin, but it was not transferred to the Ghost blog:
Stage 2. Migration from the Wordpress to Ghost
All Wordpress site images were hosted either in the GeekChick.ru
Wordpress depository or in the Amazon S3 Bucket. The main disadvantage of this inconsistency was only the partial migration of images to the Ghost hosting.
In order to move everything and replace images URLs correctly I have added the intermediary step: moving the images to the Cloudinary
storage, using these instructions
. Even though there were two migration options, Amazon S3 and Cloudinary, I have chosen the latter considering the price of hosting and the easier process with a separate plugin allowing to move images in 5-7 steps.
The moving process was divided with simultaneous uploading limit (100 pictures), so it took a day to carefully transfer every image hosted on Wordpress.
The migration of the whole blog archives was divided into three steps. Firstly, I have converted categories into tags using this plugin
, as Ghost doesn’t support categories in .json archives. Then, I have created a .json archive and tried to upload it, but it appeared to be too big and complicated to move. Then I contacted the Ghost support and performed the transfer with their help on the backend side.
Stage 3. Redesign of the Mochi theme
I have found and purchased Mochi
theme on ThemeForest
. Initially it included a couple of ‘bugs,' but they were easy to fix. To make this I have contacted
the author to clarify some issues.
The list of features and settings I have changed in the initial theme files:
- changed fonts to Cyrillic Google Fonts (Ubuntu);
- used custom colour scheme, generated with Adobe Kuler;
- added transparent buttons to the navigation menu;
- added RSS subscription and Instagram buttons;
- added buttons, title, selected text and links hovers and transitioning;
- edited and displayed the post meta;
- transferred Disqus comments and added 'Comments Count' to the post meta;
- set up and redirected root domain geekchick.ru with the help of CloudFlare DNS services;
- set up FeedBurner RSS feed generator;
- moved Google Analytics code from the old blog;
- added to the navigation menu the Amazon's aStore link (even though I could not validate it, it works well and helps to pay for the hosting);
- changed the content excerpt limits and blog columns and elements widths.
Screenshots with the Mochi theme 'Before redesign' can be found here
The basic font, used in theme, was Lato
from Google Fonts
, created by Polish designer Łukasz Dziedzic. Even though this sanserif typeface appears to be suitable for the Ghost blog, it doesn’t have Cyrillic script, and looks inconsistent and bulky in Russian blog. I have changed it to Ubuntu
font by Dalton Maag, following these instructions
I have also considered using Adobe TypeKit Library
, as I am an Adobe Creative Cloud subscriber. While TypeKit site has 120 types with ‘Russian’ scripts
, it is impossible to display test paragraphs written with Cyrillic characters: the site allows to type text only in English. Considering the amount of time for testing different code, rebooting the server and change CSS in two different times, I have decided to start with the Google fonts option.
In order to make design modern and ‘effective,’ I have applied several instructions from the Smashing Magazine. For instance, after reading the 'The Definitive Guide To Styling Web Links
’ I have changed a:hover selector (it was blue —> black before) and made links colour consistent through out the blog.
library for the ‘sticker effect’ on the social buttons, working on CSS code I discovered that in the Mochi theme they are not buttons in common sense. Apparently, author has created the whole new typeface called ‘Mochi Icons,’ that generates a button from the different ‘characters’ and a combination of margins, paddings and borders with a background colour. In order to create the ‘sticker’ effect I could use CSS transitioning or download actual icons and upload them in image format to the blog and then treat them with Sticker.js
I choose to use ‘Float’ hover from the Hover.css
GitHub library on the menu buttons and not to decorate the social network buttons, as they are too small (40x40 pixels) to fit the ‘corners’ within them. Also I did not want to overwhelm the page with different effects, as I was already using colour hovers on titles, metadata and navigation icons.
Stage 4. Domain and comments redirection
The blog is four years old, and switching on the ‘www’ version would make inactive all its internal and external links, as they always were addressed to the root domain. The DNS propagation
took more than 4 days, an unexpected amount of time, which should clearly be considered next time.
As I knew from my experience, the key issue with Disqus migration is the consistency of URLs. Following this instruction
, I have added Disqus comments, and then, changing post-meta.hbs and index.hbs files, displayed the comments count in the post meta.
Adobe Typekit 2014, Full Library | Typekit, Adobe Systems Incorporated, viewed 20 April 2014, <https://typekit.com/fonts?language=ru>.
All About Ghost 2014, Migrating Images From WordPress To Ghost, All About Ghost, webblog, viewed 10 April 2014, <http://www.allaboutghost.com/migrating-images-from-wordpress-to-ghost/>.
Amazon.com, Inc. 2011, aStore for Amazon Associates, viewed 31 March 2014, <http://astore.amazon.com>.
Amazon Web Services 2014, Amazon Web Services (AWS) - Cloud Computing Services, Amazon Web Services, Inc. or its affiliates, viewed 06 May 2014, <http://aws.amazon.com>.
Bracey, K. 2013, Building a Ghost Theme From Scratch, Envato Pty. Ltd., viewed 21 May 2014, <http://webdesign.tutsplus.com/series/building-a-ghost-theme-from-scratch--webdesign-16179>.
Cloudinary.com 2014, Cloud-based image management upload, viewed 25 April 2014, <http://cloudinary.com>.
Codecademy 2014, Codecademy, viewed 31 March 2014, <http://www.codecademy.com>.
Coursera Inc. 2014, Coursera, viewed 31 March 2014, <https://www.coursera.org>.
Dziedzic, Ł. 2014, Lato, Google Fonts, viewed 20 April 2014, <https://www.google.com/fonts/specimen/Lato>.
Ghost 2014, Ghost — Just a blogging platform, viewed 31 March 2014, <https://ghost.org>.
Google 2014, Feedburner, Google Feedburner, viewed 06 May 2014, <http://feedburner.google.com>.
Google.com.au 2014, Google Analytics Official Website – Web Analytics & Reporting, Google, viewed 06 May 2014, <http://www.google.com.au/analytics/>.
Hannah 2014, How to setup a root domain with CloudFlare, Ghost(Pro) Support, Ghost, viewed 20 May 2014, <http://support.ghost.org/root-domain-cloudflare/>.
Kim, J. 2014, Sticker.js, Jongmin Kim, viewed 06 May 2014, <http://stickerjs.cmiscm.com>.
Less.js 2014a, About | Less.js, The Core Less Team, viewed 25 April 2014, <http://lesscss.org/about/>.
Less.js 2014b, Getting started | Less.js, The Core Less Team, viewed 25 April 2014, <http://lesscss.org>.
Lunn, I. 2014, Hover.css — A collection of CSS3 powered hover effects, GitHub, viewed 4 June 2014, <http://ianlunn.github.io/Hover/>.
Maag, D. 2014, Ubuntu, Google Fonts, viewed 20 April 2014, <http://www.google.com/fonts/specimen/Ubuntu>.
Munroe, L. 2010, The Definitive Guide To Styling Web Links, Smashing Magazine, viewed 1 May 2014, <http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/>.
Refsnes Data 2014, W3Schools CSS Tutorial, viewed 31 March 2014, <http://www.w3schools.com/css/default.asp>.
Refsnes Data 2014, W3Schools HTML4 and HTML5 Tutorial, viewed 31 March 2014, <http://www.w3schools.com/html/default.asp>.
skhblake 2014, Copy of Bizzare color theme by skhblake, Adobe Kuler, Adobe Systems Incorporated, viewed 20 April 2014, <https://kuler.adobe.com/Copy-of-Bizarre-color-theme-3856146/>.
Theme Spectre 2013, Linen | Theme SpectreTheme Spectre, Theme Spectre, LLC, viewed 29 April 2014, <http://themespectre.com/linen/>.
Themeforest.net 2014a, Mochi – Responsive Theme for Ghost Preview, viewed 25 April 2014, <http://themeforest.net/404?ref=hdalive&ref=hdalive&clickthrough_id=219917761&redirect_back=true>.
Themeforest.net 2014b, Mochi — Responsive Theme for Ghost — ThemeForest Previewer, viewed 25 April 2014, <http://themeforest.net/theme_previews/6674078-mochi-responsive-theme-for-ghost?index=0url_name=mochi-responsive-theme-for-ghost>.
Treehouse Island, Inc. 2014, Learn Web Design, Web Development, and More, viewed 31 March 2014, <http://teamtreehouse.com>.
Udacity, Inc. 2014, Advance Your Career Through Project-Based Online Classes, viewed 31 March 2014, <https://www.udacity.com>.
Wordpress.org 2014, Creating a Page template: Page Templates « WordPress Codex, Wordpress.org, viewed 4 June 2014, <http://codex.wordpress.org/Page_Templates#Creating_a_Page_Template>.
Wordpress.org 2014, Wordpress > categories and tags converter, Wordpress.org, viewed 4 June 2014, <https://wordpress.org/plugins/tags/categories-and-tags-converter>.