As the year changed to 2018, I decided to abandon WordPress<\/a>, which I had been using for over 12 years as my content management system of choice. I had many reasons to do so, but the biggest motivators were the opportunity to try something new and to abandon the bloat and clutter of WordPress for a more simple, more elegant order of things. Spurred on by another adopter, Mark Edmondson<\/a>, I decided to give Hugo<\/a> a go (pun intended).<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The migration wasn\u2019t easy, as I had to convert WordPress\u2019 relational database into a static list of markdown files. Along the way, I had to configure two themes (regular<\/a> and AMP<\/a>), optimize all my images, JavaScript, and stylesheets, and go through every single one of my 200+ articles, looking for stylistic issues and broken links (oh boy, were there many of those!).<\/p>\n Hugo is written in the Go<\/a> language, and it\u2019s fairly easy to use if you\u2019re familiar with markdown<\/a> and the command line of your operating system. The trick about a static site is that all the content is stored in static files in your file server. There is no relational database to fall back on, which means that a static site can be both blazing fast and a chore to maintain.<\/p>\n One of the biggest headaches for me was how to set up site search. Without a database or a web server generating dynamic HTML documents, finding a suitable way to index the content in the browser and respond quickly and efficiently to search queries seemed like an insurmountable task.<\/p>\n I tried a number of things at first, including:<\/p>\n Algolia<\/a>, which I had to give up beacuse I had too much content for their free tier.<\/p>\n<\/li>\n lunr.js<\/a> running on a NodeJS virtual machine in Google\u2019s cloud, which I had to give up because I got a bill of 400$ for instance upkeep for the month of December alone.<\/p>\n<\/li>\n Custom-built solution that digested JSON generated by Hugo and parsed it for searching with jQuery directly in the browser, which I had to give up since downloading an indexed JSON file of around 5 megabytes on every page is not conducive to a good user experience.<\/p>\n<\/li>\n<\/ul>\n After the failed experiment with lunr.js, I still wanted to give Google\u2019s App Engine another chance. I\u2019ve been in love with App Engine ever since publishing the first version of my GTM Tools<\/a> on it. Well, as it turns out, App Engine has a really useful and flexible Search API<\/a> for Python, which seems to be tailormade to work with the JSON generated by Hugo in a static site!<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n My setup looks like this:<\/p>\n The Hugo config file<\/a> is configured to output an A script which deploys this JSON file into the App Engine project.<\/p>\n<\/li>\n An App Engine project which uses the Python Search API<\/a> client to build an index of this JSON.<\/p>\n<\/li>\n The App Engine project also provides an HTTP endpoint to which my site makes all the search queries. Each request is processed as a search query, and the result is returned in the HTTP response.<\/p>\n<\/li>\n Finally, I have a bunch of JavaScript running the search form and the search results page on my site, sending the request to the App Engine endpoint as well as formatting the search results page with the response.<\/p>\n<\/li>\n<\/ol>\n The beauty of using the Search API is that I\u2019m well below the quota limits<\/a> for the free version, and thus I don\u2019t have to pay a dime to make it all work!<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The change to Hugo\u2019s config file is easy to make, because Hugo has built in support for generating the JSON in a format that most search libraries digest. In the configuration file, you need to find the This configuration change generates an Here\u2019s an example of a what a blog post might look like in this file:<\/p>\n The deploy script is a piece of Bash code which builds the Hugo site, copies the The In App Engine<\/a>, I\u2019ve simply created a new project with a name that\u2019s easy enough to remember as the endpoint. I haven\u2019t added any billing to the account, because I\u2019ve set a challenge for myself to build a free search API for my site.<\/p>\n![\"Hugo](\"https:\/\/www.simoahava.com\/images\/2018\/01\/hugo.jpg#ZgotmplZ\")
<\/p>\n\n
![\"Search](\"https:\/\/www.simoahava.com\/images\/2018\/01\/static-site-search-with-google-appengine-search-api.jpg#ZgotmplZ\")
<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nThe setup<\/h2>\n
\n
index.json<\/code> into the public directory, with all the content of my site ready for indexing.<\/p>\n<\/li>\n![\"My](\"https:\/\/www.simoahava.com\/images\/2018\/01\/search-quota.jpg#ZgotmplZ\")
<\/p>\n1. The config file modification<\/h2>\n
output<\/code> configuration, and add \"JSON\"<\/code> as one of the outputs for the home<\/code> content type. So it looks something like this:<\/p>\n[output]\n home = [ \"HTML\"<\/span>, \"RSS\"<\/span>, \"JSON\"<\/span> ]<\/code><\/pre>\n<\/div>\nindex.json<\/code> file into the root of your public folder whenever the Hugo project is built.<\/p>\n[\n {\n \"uri\"<\/span>: \"https:\/\/www.simoahava.com\/upcoming-talks\/\"<\/span>,\n \"title\"<\/span>: \"Upcoming Talks\"<\/span>,\n \"tags\"<\/span>: [],\n \"description\"<\/span>: \"My upcoming conference talks and events\"<\/span>,\n \"content\"<\/span>: \"17 March 2018: MeasureCamp London 20 March 2018: SMX M\u00fcnchen 19 April 2018: Advanced GTM Workshop (Hamburg) 24 May 2018: NXT Nordic (Oslo) 20 September 2018: Advanced GTM Workshop (Hamburg) 14-16 November 2018: SMXL Milan I enjoy presenting at conferences and meetups, and I have a track record of hundreds of talks since 2013, comprising keynotes, conference presentations, workshops, seminars, and public trainings. Audience sizes have varied between 3 and 2,000.\\nMy favorite topics revolve around web analytics development and analytics customization, but I\\u0026rsquo;m more than happy to talk about integrating analytics into organizations, knowledge transfer, improving technical skills, digital marketing, and content creation.\\nSome of my conference slides can be found at SlideShare.\\nFor a sample, here\\u0026rsquo;s a talk I gave at Reaktor Breakpoint in 2015.\\n You can contact me at simo (at) simoahava.com for enquiring about my availability for your event.\\n\"<\/span>\n }\n]<\/code><\/pre>\n<\/div>\n2. The deploy script<\/h2>\n
index.json<\/code> into my search project folder, and then deploys the entire search project into App Engine. Here\u2019s what it looks like:<\/p>\ncd<\/span> ~\/Documents\/Projects\/www-simoahava-com\/\nrm -rf public\nhugo\ncp public\/index.json ..\/www-simoahava-com-search\/\nrm -rf public\ncd<\/span> ~\/Documents\/Projects\/www-simoahava-com-search\/\ngcloud app deploy\ncurl https:\/\/search-www-simoahava-com.appspot.com\/update<\/code><\/pre>\n<\/div>\nhugo<\/code> command builds the site and generates the public folder. From the public folder, the index.json<\/code> is then copied to my search project folder, which is subsequently deployed into App Engine using the command gcloud app deploy<\/code>. Finally, a curl<\/code> command to my custom endpoint makes certain that my Python script updates the search index with the latest version of index.json<\/code>.<\/p>\n3. The Python code running in App Engine<\/h2>\n