How to create a blog with Aamu.app? Here is how I have done it for Aamu.app’s official blog at https://aamu.app/blog/.
The ingredients of this blog are:
A database at Aamu.app
For writing the blog posts: documents at Aamu.app
For creating the actual blog: Hugo static site generator
A server (with a shell access) to host the blog
Git to publish the blog to the server (pushing the repo)
Nginx for serving the static site (git repo)
You can also use some other method to host the blog, for example Netlify. With this method you don’t need a server nor git.
You can see the source code for the blog at https://github.com/AamuApp/aamu-blog.
The recipe
Here’s how it goes, from start to finish.
Create a database
Create a database at Aamu.app with the provided template aamu-blog:
You would use this database as what is known as a “Headless CMS” — the data from the database can be retrieved from the Aamu.app’s GraphQL database API.
Inside the database you will see two tables: Blog post and Person. If you are not happy with the names, you can rename them. The table Blog post is for posts (🧐) and Person is for post authors.
You should first create a row in Person which you can then link into your posts:
Then create a row into Blog post table and fill the data accordingly. Body field will contain the blog posts HTML code. You can write the blog posts with Docs feature at Aamu.app, which we will get to next.
Here’s a row for a blog post. “Slug” is the url component of the post.
When you want to start writing the post, click the Body field of the row. You can write (copy-paste) HTML directly, or attach a Doc. Let’s attach a Doc:
Setting up the API key
In order to use the database as a headless CMS, it needs to be accessed from outside Aamu.app with GraphQL. You will need to create an API key and set it up for the blog build script.
To create an API key, go to database settings / API, and you will find what you need. Click “Generate new API key”, copy it and paste to aamu-blog’s .env file, which aamu-blog uses for environment variables.
Writing the blog post
We will use the Aamu.app’s Docs feature to write the blog post (just as I’m doing now).
Writing a doc will automatically save the HTML code to the database’s Body field. So, writing the blog post is extremely easy.
You can also copy-paste the HTML to the Body field, if you want to write it with some other method.
When you are ready to publish the blog post, set the publishing date, author, possibly “Hero” image and any tags you would want, and set the status to “Published”.
Creating the blog with Hugo
Let’s create the actual blog now.
The idea goes like this:
The build script retrieves blog posts from Aamu.app through the GraphQL API. The script knows the timestamp when it did this the last time (the timestamp is saved into a file) and only gets the updated/new blog posts.
The same script saves them into content files, as well as any images.
Hugo is run to convert the content files into a blog
The source code, which we use for our blog, is at https://github.com/AamuApp/aamu-blog. You can use it as a starting point for your own blog, or just get ideas from it.
You would typically use a development machine to create the blog and then upload (possibly with git) into the hosting server.
You can also do all of this at a service like Netlify. If you want to use a service, they can usually be triggered to build the blog with a build hook. You can create such a build hook at your Aamu.app database’s settings:
Publishing the blog
Still one thing to do: to actually publish the blog at the hosting server.
At the simplest, this can be done by uploading what Hugo created to the server. I have set up a git bare repo, with a post-receive hook, which handles the uploading part. Using git with a “bare repo” is a handy way to do this, but a bit more complex.
That’s It!
Let us know if there was something that left you wondering - how could I improve this tutorial? Join our Discord server to tell!