Ionic is a cross platform tool to create mobile apps for iOS, Android and Windows Phones. Lets take a look at installing Ionic.
I thought I’d build an app called Dogwalk. I wanted it to run on both Android and iOS phones so I decided to learn Ionic. I also thought I’d blog about all the steps I take to create it. You will get to know more about the app as we go along.
Start by installing Node.js. After that open up a terminal and use npm to install cordova and ionic:
Creating an app
To create an app using Ionic there are three templates you can start with, blank, tabs and sidemenu. The name of the templates kind of explains themselves.
For dogwalk I’d like to start with the blank template by typing this in the terminal:
When this is done you can run an almost empty app in the iOS simulator or in your browser. Running it in the browser is a great way to speed up development since you do not have to wait for the simulator to start every time.
Command to run it in your browser:
To run the app in ios simulator: (make sure you have it installed)
There was also a few apps that I could install on my Android phone which provided an error console to the old browser or was a browser with a console on their own. But those didn’t work either.
The Android browser is built on Chromium. If you type chrome:version into the address field you get to know what version of Chromium it is running.
This is what mine looked like:
Chromium version - android
So at this point I figured I wasn’t going to debug it in the Android browser at all. If you look at the screenshot above you can see i have a Chromium version from 2013 installed.
This plugin extends Jekyll sitemaps and adds support for pages, posts, archives/categories, collections and images.
Before i switched to Jekyll I’ve been spoiled by the sitemaps of the Yoast SEO plugin. So I decided to try to get the same functionality from Jekyll. The goal was also to make it available for people who host their Jekyll sites on Github Pages.
Copy category-sitemap.xml, page-sitemap.xml, post-sitemap.xml, project-sitemap.xml and sitemap.xml to your root folder.
Copy _includes/single-post-sitemap.html to your _includes folder.
Edit images in single-post-sitemap.xml as described under Images below.
If you do not use jekyll-archives plugin disable that as described under Categories below.
Edit or remove collections sitemap as described under Collections below.
Google supports adding images to the sitemap. You need to edit the image url of your post(if any) on line 5 in single-post-sitemap.html. If you do not use images you can remove lines 4 to 8.
This plugin supports jekyll-archives. This sitemap is created with the category-sitemap.xml file. If you do not use the jekyll archives plugin you should delete category-sitemap.xml and remove the following from sitemap.xml:
Since collections are dynamic only an example is added with jekyll-sitemaps. If you do not use collections you can delete project-sitemap.xml and the following from sitemap.xml:
If you do use collections you need to change this:
Change site.projects to site.<name-of-collection> in project-sitemap.xml
Change filename of project-sitemap.xml to <name-of-collection>-sitemap.xml
Change the reference from project-sitemap.xml to <name-of-collection>-sitemap.xml in sitemap.xml:
Jekyll sitemaps are open source and if you find a bug or something else to improve you are welcome to send pull requests.
I’m trying to get this site to load as fast as possible. One thing I wanted to try was to use Jekyll instead of Wordpress to achieve this.
I’ve finally made the switch now. The page loads are faster since the site does not go through the Wordpress loop anymore. Jekyll creates static HTML-files that are then uploaded to the web server.
Page loads before and after
Below you can see screenshots of the network tab in Chrome where Christianengvall.se is loaded while being served with Wordpress and with static files created by Jekyll.
You can see that the load time is marked in red. That is because i use Ghostery) to block trackers like Clicky and Google analytics and so on.
This is only two page loads. A better test would be to load it lots of times and compare the average load time. But this is enough to see that a nice change for the better has been accomplished.
Load times Wordpress:
Page load with wordpress
And load times with static files created by Jekyll:
Page load static page with Jekyll
The load time went from 2,04 seconds to 452 ms. It probably loads a bit slower if you do not block trackers.
When then switch to Jekyll was made I’ve also started to delete some Wordpress leftovers in the HTML-markup.
I also skipped the implementation of share buttons for the new site, i’ve never been a fan of their loading times so now I’m skipping them as a test.
I tried using the official tools to migrate posts and pages from Wordpress to Jekyll. That however left me with a lot of html-fixes to do in every post on the site. I ended up using exitwp instead. Still got to do some fixes, but a lot less of them.
You can use Github pages to host your jekyll site. A lot of people do this. But i decided to stay with my current host and got the opportunity to write my own deploy script :)
I thought I’d share it with you if you want to build your own from this template. It uses secure copy to upload the files to the server.
It also gzips every html, js and css asset before deploying. I got the script from Dominic Watson But changed it a bit to fit my site.