This guy here is describing how he made a website built for scale with some basic components and a website architecture dedicated to static content, using Hexo for static content creation and a combination of AWS S3 and AWS CloudFront for hosting.

I can confirm that static content put into the right architecture is just crazy fast (and easy to scale out), check out my little playground site log2talk.com. And I am using Hexo there as well, together with a theme called “Icarus”. In this case the hosting works via CloudFlare (DNS only) + Firebase Hosting (for everything else). Firebase Hosting uses Google’s CDN and is a top choice for this purpose.

When I put up the page I told myself it’s great how all of this works, now I want to AMPlify my already mobile friendly site. In case you have not heard about it, it’s Google’s way of making the mobile experience lightning fast.

So how to do that with my existing Hexo + Icarus themed site?

First, get this plugin for Hexo:

https://www.npmjs.com/package/hexo-generator-amp

Useful in this context is this article explaining how the server would know about an AMP version of your page:

https://stackoverflow.com/questions/37103814/how-does-the-server-know-when-to-serve-an-amp-page

Deviating from the tutorial provided on the npmjs package description, I had to do take the steps as follow instead.

a) Fix “could not generate content.json”: 

I was able to fix that annoying error like this:

npm install hexo-generator-json-content@1 --save (which uses version 1 only and downloads it updating package.json as well)

b) Changing head.ejs – but somewhere else!

Then edit the file “head.ejs” in my icarus theme directory, like it says on the npm how-2 – only that this file is not under (..)/_partial but themes/icarus/layout/common!

In head.ejs I pasted this jade snippet right before the first <link rel> starts:

<% if (is_post() && config.generator_amp){ %> 

  <link rel="amphtml" href="<%= config.url %>/<%= page.path %>amp/index.html"> 

<% } %>

(The config.url in your page _config.yml file needs to be correctly set, otherwise the URL will be malformed!)

Run the test server and check whether the content is valid AMP via this site:

https://validator.ampproject.org/

Your AMP urls would look like this:

http://<site>/2017/06/25/life/amp/

Like this for example, an actual AMP page: https://log2talk.com/2017/07/12/society/amp

There is one big caveat for me and my pet site log2talk though: even though there are clear links to the AMP versions for every article on my site, Google would not index the AMP versions of my site. Why that is I have no idea, they all happily pass the AMP validator so that cannot be the reason.

Have fun!

DISCLAIMER: It might be that I am not going to extend the log2talk domain ownership and therefore the site is gone by the time your read this, while I am still linking to it. Don’t get distracted too much by that and Hexo is still an interesting tool to look at. Just not the perfect choice for all occasions by all means.

Advertisements