Ever since Github started supporting Jekyll within Github Pages I was sold. As you may know, I love Magento since 2008. But before that, I supported Joomla and Mambo for many years and still love building small CMS sites. So when Jekyll became my main CMS system I could not stop building and used them ever since for my small CMS projects. Even this site is build using Jekyll (+AMP ;-) ).
So when it comes to easy, fast, stable, flexible, security free and high-performance websites I like to build them in Jekyll. Not because I can (since there are other great static website generators e.g. Gatsby, Hugo out there), but because I liked “Free Hosting” back in the day ;-). And creating a CMS is a matter of seconds now on Github Pages.
But choosing Jekyll is not the topic of this blog. I like to share a topic on Continuous development and Continuous Integration. When working with Magento I always preferred to be aware of the code quality I or my team wrote. And so I build several Performance Monitoring Tools which helped me to check the quality and Best Practice. From Mage.coach (also build in Jekyll ;-) ) to Grafana/Graphite Dashboards and much much more during last years.
But I still preferred having this quality check building into the
git push when using a Github system. All thought Mage.coach could do that (after lots of rework), I chose to have a look at Lighthouse Project and the Lighthouse CI and Lighthouse Server toolset. And I was very surprised at how cool they are.
So before developing this on future Magento projects, I needed to test it on my Jekyll CMS project first. The following steps will guide you on how to setup a Continuous development and Continuous Integration developing stream on Jekyll using Lighthouse CI, Lighthouse Server, Travis CI, and Heroku.
And keep in mind always Design for Performance!
- Install lighthouse-ci locally
- Signup and create .travis.yml file
- Create lighthouserc.yml with the following config
- Create LHCI_GITHUB_APP_TOKEN and add it to env in Travis
- Signup at Heroku
- Install Heroku CLI
- Create Heroku config and push the app to production
- Run lhci wizard
- Add LHCI_TOKEN to env in Travis
- Update serverBaseUrl in lighthouserc.yml
- Push code to Git and let the magic do its thing!
1. Install lighthouse-ci locally
Install Lighthouse CI, easy to run a manual test run and configure the LCHI Wizard for later use.
npm install -g @email@example.com
2. Signup and create .travis.yml file
If not already, signup for Travis-ci and connect the Travis CI Github Apps to your Github profile repository. (Detailed config is beyond the scope of this blog if you need more help on how to setup Travis CI or any other CI tool please search the internet ;-) )
Once Travis CI is connected to your Github account create
.travis.yml in your root directory from your repository and copy the following config.
Notice some tweak options in the config if you need to run it to “temporary public storage”.
The echo “Notice - no test specified” row is to skip the
npm test command and automatically run the Lighthouse CI command.
3. Create lighthouserc.yml with the following config
Now let’s create the
lighthouserc.yml in your root directory from your repository and copy the following config.
If needed you can tweak
assertions and much much more to your needs. Besides
url, the 2 most important elements, for now, are
token. We will configure those at the end.
4. Create LHCI_GITHUB_APP_TOKEN and add it to Environment Variables in Travis
Let’s create the LHCI_GITHUB_APP_TOKEN, this will link
Lighthouse CI to your Github account and will show the passing results to your commit.
Click this link and add it to your Github account. Make sure to copy/paste the LHCI_GITHUB_APP_TOKEN since this will be only shared once.
Please open Travis CI and go to ‘settings’ under need your repository and look for ‘Environment Variables’. Add ‘Name’: LHCI_GITHUB_APP_TOKEN and the ‘Value’: ‘token’ into the settings. The LHCI_GITHUB_APP_TOKEN will be used later during the built and will update your Github “Status Checks” in the ‘commit’ section.
5. Signup at Heroku
The next step is hosting and building a serverless app where all reports will be shown. Lighthouse CI offers two options: Docker and Heroku. For the scope of this blog, we only will focus on Heroku. The main reason is that is easy and free.
Create a Heroko account, add follow all the steps. That’s it! All next steps will be done using the Heroku CLI tools, so no need to create the app here.
Remember every FREE Heroku app has 550 free dyno hours per month which will be fine for this project scale.
Note from Heroku: Personal accounts are given a base of 550 free dyno hours each month. In addition to these base hours, accounts that verify with a credit card will receive an additional 450 hours added to the monthly free dyno quota. This means you can receive a total of 1000 free dyno hours per month if you verify your account with a credit card. More info: Free Dyno Hours
6. Install Heroku CLI
Now lets download and install the Heroku CLI toolset.
When using macOS you may use
brew tap heroku/brew && brew install heroku.
When done lets login:
7. Create Heroku config and push the app to production
Building and running the serverless app can be managed via the CLI. Use the following commands:
If everything works out fine it should look something like:
If needed update your serverless app to the latest LHCI version.
8. Run lhci wizard
Since we installed lhci during the first step we are now able to run the lhci wizard and connect our app to the Heroku LHCI Dashboard.
Run the following commands and follow the correct steps:
Again store the LHCI_TOKEN somewhere safe.
9. Add LHCI_TOKEN to Environment Variables in Travis
Now lets store the LHCI_TOKEN in the Environment Variables setting section in Travis.
10. Update serverBaseUrl in lighthouserc.yml
Update the Heroku app url in
lighthouserc.yml in the
11. Push code to Git and let the magic do its thing!
Now the moment of truth is about to happen, save your files and: git add -A && git commit -m ‘LHCI first run’ git push origin master
Let’s follow the build in Travis CI and open your Travis project link.
Within this example we see two export TOKENS, install of LHCI, skipping npm test, validate configuration of the LHCI settings, running URLs and test results including upload to our LHCI server and Github repository.
Don’t forget visiting your Github commit section including the new ‘status checks’. This hopefully helps to create better-performing code out there ;-).
It’s a wrap!
I hope you liked building it, well it did when prepping this.
Beside Jekyll, many other solutions could benefit from a Continuous development and Continuous Integration building stream.
My next blog could be introducing Lighthouse CI using magento-pwa-studio-lighthouse-server or Lighthouse CI using Magento Cloud. So until next time!
Manual LHCI autorun
In case you prefer to test Lighthouse CI manually before you use Travis CI, run the following command from your shell.