Building the latest Cognetif website
Welcome to the latest iteration of the Cognetif website!
This is the second iteration since the start of the business late 2018. I like the idea of refreshing the color scheme and website often so I though with the start of the second year in business, a new site would be nice, especially since the last was kind of thrown together at the last minute :-) . The last site was built on Yii2 which is a great framework for websites and applications, but this time I decided to go with my go-to CMS for client work: Perch CMS. I've became a registered developer for Perch last year and really enjoy working with the CMS primarily because it keeps out of the way of the website design. Being a structured content CMS, it also allows content editors to focus on their content without messing around with the website style. I have future posts planned to compare Perch and other CMS frameworks so I won't go into much detail here. I wanted to write this post to show that "we practice what we preach" and that the development of the Cognetif site is seen as no different than any of our client sites. So here is what has gone into building the site.
The Perch Build
This site is built on the Runway version of Perch CMS. Perch is a nice CMS for developers for many reaons, one being its easy to extend through custom apps and plugins. This is great because the core of the site stays light and you add on only what you need for the project at hand, your site can grow as you require and you're not stuck with a bunch of extra plugins or funcionality that needs to be maintainted you're not actually using. This reduces the amount of maintenance and security concerns for the site making its life span much longer and a better return on investment.
On this build I'm using a few official and custom apps to bring in the full functionality of the site.
From the official Perch developers, I'm using :
- The Blog app to edit and display this blog posts and manage comments.
- The Forms app to process input forms such as the contact form on the home page.
I'm also using some custom apps and plugins I created and have available on the Cognetif GitHub :
- TinyImg, an image optimization app to optimize and reduce uploaded image sizes using the Tinify API which offers you 500 free compressions per month.
- ApiMail, an app that uses an external web API email sending service rather than traditional SMTP. I'm currently using SendGrid which allows upto 100 emails sent per day via the service.
- AceSVG, an editor plugin specifically to use with SVG images. It provided an HTML markup editor with a preview function of the SVG image.
For an WYSIWYG editor, Perch has Redactor2 installed out of the box, but it is missing a couple plugins that I enjoy like the HTML button and 'class' and 'id' properties button. No problem, I simply enabled custom editor configs in the Perch configuration:
And then, downloaded the required Redactor2 plugins and added them to a new configuration file :
Here are the official instructions from Perch you can follow if you're looking to do the same.
Everything else is basic Perch Runway CMS with master pages, layouts and normal content regions.
In future posts I'll go into more depth with some of the technical aspects of building and deploying the site including the use of .env files for environment and configuration variables, GitLab CI/CD for deployment to the stage and production sites and finally why I chose using Laravel Mix for the frontend integration of the site.
I hope you enjoyed this first post. I'll be making an effort to write often so check back soon.