/ INSIGHT

OMGDeploy Build Process - Part 1: New Build Setup

Get started with a Deploy build: learn your way around, move files into place, update CSS paths, and learn about some Addons.

Featured image for OMGDeploy Build Process - Part 1: New Build Setup
https://youtu.be/KMJ5ATSM9dc What is OMGDeploy?

OMGDeploy is OMG's default ExpressionEngine build. This is our starting point for every new site. If ExpressionEngine is the foundation we build projects on, Deploy is the support beams we put into place to build the site or app around.

In Deploy, we have default EE settings already in place so the site's function. We have addons we commonly use installed and configured We have default channels, categories, file directories, templates, and layouts in place with working examples, structure, and methods to make coding the site or app go quickly. We also have our default series of fields that we can use to add to new channels.

Deploy is frequently updated and we will modify templates to stay up to date and use the best methods. For instance, EE recently added a multi-upload File field. We modified the channels to use this field instead of an addon called Channel Images and then, of course, updated the templates to use this new field.

Deploy File Tour

Login to cpanel (http://www.domainname.com/cpanel) using credentials found in Asana. Click on File Manager and make sure you're in /public_html. Every configured server environment will look mostly the same. Let's take a look at the main folders and files:

  • .well-known - Ignore this, this is used to verify domain ownership, usually for SSL certificates.
  • assets - This is the folder that the auto-generated, minified Minimee CSS and JS files will be placed. More on this in a bit.
  • cgi-bin - Ignore
  • css - The folder all of the CSS files will be placed in. Includes the following files:
    • omg.adjustments.css - We don't want to modify the default CSS files at all (outside of modifying paths for Minimee) because it makes installing updates difficult. Any changes we make should go in this file, which will be the last included CSS file.
  • images - The folder to place all images (and files) in. There are two folders within that will be heavily utilized:
    • assets - This is where all the design files should be placed
    • uploads - This folder is where we will add all EE file directories for user uploads. There are a handful of preset directories already there.
  • js - The folder all of the JS file will be placed in. Includes the following files:
    • omg.custom.js - A file to place our custom JS in. Includes preset JS, mostly for our default JS plugins. May have to remove some of the code if you are not including our default JS plugins.
  • omgcp - Our EE system folder, this is where you'd go to access the EE admin area. '/system' is the default, but we changed it to '/omgcp' to increase security.
  • temp - The folder we upload needed files to. If you're updating EE addons, upload and extract them here first. Prevents any accidental file overrides. Also includes stage:
    • stage - This is the folder we place the project build into. This is used for easy access to reference the project build files.
  • themes - EE themes folder
  • vendor - The folder all of the Vendor files from the stage build should be placed. Also, any plugins you add. No default files.
  • .htaccess - If you can see this, enable hidden files. This includes instructions on how files and urls should be handled. Includes a bunch of defaults. Probably won't ever have to touch this except to modify url redirect and http/https settings.
  • admin.php - EE admin file, shouldn't ever touch
  • apple-touch-icon.png - Icon for mobile devices. Should already be set.
  • favicon.ico - Favicon for browsers. Should already be set.
  • index.php - EE index file, shouldn't ever touch
  • index_offline.html - A default offline file. Used in emergencies such as EE not working, you can rename this to index.html and it will be seen before index.php.
  • phpinfo.php - Check out PHP settings without having to go in EE
  • robots.txt - For SEO, will have to update this during the dev checklist with the correct URL for the sitemap.
EE Addons

Let's get a brief overview of our default EE Addons, with links to their documentation. In EE, goto Developer -> Addons.

Antenna - For Video field, gets video data from YouTube and Vimeo|https://github.com/vector/Antenna|Dashboard Analytics - (uninstalled) Add Analytics interface to EE Dashboard|https://amphibian.info/software/ee/dashboard-analytics|Detour Pro - Requires license. Create 301 and 302 Redirects (for SEO)|https://eeharbor.com/detour-pro/documentation|Freeform Pro - Awesome Form Builder. Use at least for contact form.|https://solspace.com/expressionengine/freeform/docs/|GWcode Categories - A more indepth category plugin|https://www.omahamediagroup.com/wiki/entry/gwcode-categories|Hopsuite - (uninstalled) Add Social Media feeds for Facebook, Twitter, and Instagram.|https://www.hopstudios.com/software/hop_social_suite/docs|Low Seg2Cat - Used for converting segments to categories|https://gotolow.com/addons/low-seg2cat/docs|Minimee - Used to combine and minify CSS and JS files|http://johndwells.github.io/Minimee/|Mo' Variables - Custom globals, modified by OMG to be even more useful!|https://github.com/rsanchez/mo_variables|Monstrous.Email - OMG Addon, embed a Monstrous.Email form using fieldtype|https://www.omahamediagroup.com/wiki/entry/monstrous.email|OMG Control Panel - OMG Addon, Edit Button and Alert Template settings + custom EE functions|https://www.omahamediagroup.com/wiki/entry/omg-control-panel|OMG Keymaster - OMG Addon. Universal Login for OMG Team.|https://www.omahamediagroup.com/wiki/entry/omg-keymaster|Reading Time Pro|https://docs.boldminded.com/reading-time-pro|reCAPTCHA v2 - Add reCaptcha to forms.|http://eecoding.com/docs/recaptchav2|SEO Meta Data - OMG Addon. Manage site SEO tags and settings.|https://www.omahamediagroup.com/wiki/entry/seo-meta-data|Simple Grids & Tabls - Create Tables and adds Grids to the Grid field.|http://docs.boldminded.com/simple-grids-tables|Stash - Does a lot of things, we like it or stashing session variables.|https://github.com/croxton/Stash/wiki|Stringer - Strips text of HTML and a few other sweet functions.|https://devot-ee.com/add-ons/zeal-stringer|Super Dynamic Fields|https://devot-ee.com/add-ons/super-dynamic-fields|Tag - Requires license. Add tags to a Blog.|https://eeharbor.com/tag/documentation|Template Sync - Additional functions or syncing EE Database Templates and File Templates|https://buzzingpixel.com/software/template-sync/documentation|URL Helper|https://github.com/litzinger/URL-Helper/blob/master/README.md|VZ Address - A custom field for recording an address and generating maps and links for it.|https://github.com/elivz/vz_address.ee_addon|wCloner - Clone an Entry|https://willowlightstudio.com/addons/wcloner|Willow's Smart URL Title - Prevents duplicate URL Title error|https://github.com/willowlight/Willow-Smart-URL-Title|Wygwam - Requires license. The WYSIWYG Text Editor.|https://eeharbor.com/wygwam/documentation Let's Get Started!

Before we begin, make sure you've review the stage build and have ask and had answered any questions about the project and it's sitemap.

The first thing we want to do is move the files into place from the stage build. The structure of the build won't always match ours so we may have to make some minor changes. Here's a brief overview of a general build (may not be the same as you're working on) and what to do with the files:

  • assets - Contains the files we need to move into place.
    • css - Contains all of the css files.
      • Copy the files to '/css'
    • fonts - Contains all of the font files. There won't always be a fonts folder.
      • Copy the folder to public_html root
    • images - Contains all images needed for the design
      • Copy all files and folders to '/images/assets/'
    • js
      • Copy the files to '/js'
    • vendor - Contains vendor plugins. There won't always be a vendor folder.
      • Copy all files and folders to '/vendor'
  • blog-article.html - The design file for the Blog Article page.
  • blog-listing.html - The design file for the Blog Listing page.
  • contacts.html - The design file for the Contact Us page.
  • homepage.html - The design file for the Home page.
  • subpage.html - The design file for a generic subpage, usually with a right sidebar.​​​​​​​
  • subpage-full.html - The design file for a generic subpage, with no sidebar.
  • subpage-left.html - The design file for a generic subpage, with a right sidebar.

Every build file could be different, but it gives us everything we need to do to get started.

So the short version:

  1. Copy build CSS files into '/css'
  2. Copy build JS files into '/js'
  3. Copy build Images files into '/images/assets/'
  4. If fonts folder, copy it into public_html root
  5. If vendor folder, copy files into '/vendor'

Modify Paths in the CSS

So, we may need to modify image and font paths in the included CSS file. The reasoning for this is due to Minimee, our minify plugin. What it does, is it minifies our css files into one file, which it places in '/assets'. When it does this, any relative paths will be wrong (also may be wrong due to where we placed the files). So we have to convert the paths into absolute paths and make sure they are pointing at the right folders. This is generally the only changes you'll have to make in the CSS files.

We can usually achieve this by doing the following search and replaces on the css file.

  • Replace '../images' with '/images/assets'
  • Replace '../fonts' with '/fonts'

That's usually about it. Occassionally, they will put Imports in the css file for fonts. Such as:

@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700|Roboto+Slab:300,400,700|Roboto:300,300i,400,400i,500,500i,700,700i");

We will want to remove that from the CSS and place it at the top of our layout in a link tag. Also, the pipes in there for grabbing multiple fonts at once are problematic for Minimee, so we'll want to split those out. So, in your layout, it will look something like this:

Setup Channels etc.

Now's the time to enact your Content Entry plan. Setup the Channels, Fields, Categories, and File Directories you will need. This is standard EE stuff and certainly doesn't have to be finalized at this point, but getting everything started now will make things go smoother going forward. Here's a few tips:

  • For channels / sections that will need subpages, add the Basic Content category group.
  • For single page channels, set the entry limit to 1
  • Most channels should include the Basic Content field group. This usually includes the Summary and Entry Image. These fields can be used for a multitude of functions, SEO Meta tags, search results, button images, whatever. It's good data to have for every entry that is used to build a page.
  • The Content field (fluid_content) can be included on most content entries. This will allow for a truly dynamic page. Early on, you will want to figure out which fields will be included, based on the design. You may have to create new elements for the design. There's a set that we almost always include, even if they're not specifically designed (Accordion, Button, Custom Code, Form, Image, Section Title, Slider, Table, Tabs, Text, Text + Image, and Video). Bootstrap can help with some of these. We'll cover the basics for these on the Fluid Field / Content page.
  • You may have to modify some of the default fields to work with the design, but this is usually best done when coding the output.
  • When setting up File Directories, if it's just images, set it to Thumbnail mode. If all files, use List mode.
  • When working with File fields for images, modify the manipulations to match the images in the design. Update or add instructions to the field with size info and a link to an image template. Ex: 'Images should be sized at least 180x180.'

Now, when you setup your channels, there are a few important settings to add that will help us out in the Layout stage (up next). In the Channel Settings, under URL and Path Settings, we need to set three fields:

  • Channel - Put the URL for the template group, ex: '/about-us' or '/blog' or '/contact-us'. This creates a variable that will allow to dynamically control the links (and dynamically change them in the future) and determine which channel is active.
  • Search results - Put the URL that the URL title will be appended to for sub pages, ex: '/about-us' or '/blog/article' or '/contact-us'. This will be used by EE search to create autopaths for search result links and a variable to link to sub pages.
  • Preview URL - Put the full URL for a subpage here, with {url_title} or {entry_id} and everything, ex: '/about-us/{url_title}' or '/blog/article/{url_title}' or '/contact-us'. This is used by EE for Live Preview.

Now, let's setup our Layouts!

Further Reading