My goal for this blog post is to show you how you can quickly spin up a new blog based on a reputable node.js package that is hosted for free. Too good to be true? Nope! Read on :)
To run a blog about AWS means, by definition, one ought run that blog ON AWS, and what better way to run a blog than serverless? With a 12-month free AWS account I get 100% free hosting for a year. Even after that period, by my estimation it should only cost me about $0.50 / month to host my blog. Compare that to, on average, $10-$20 to host most other blogs, such as Wix, Wordpress.com, or Webflow. Plus, I’ll get the following added benefits:
Hexo is a great open-source blogging framework that is based on node.js, the perfect way to begin blogging with a head start. Check out my Hello World post for more details on Hexo and some other helpful links!
Our basic steps to setup and run our blog are the following:
The first step to setting up our blog is to install Hexo, our blogging framework. Run the following node.js command to install Hexo (install Node first if you haven’t already).
$ npm install hexo-cli -g
After Hexo CLI is installed, you next want to create a new Site:
$ hexo init <folder>
With your site generated, you can run your site with the following command:
$ hexo server
Your site should look like the following, running on http://localhost:4000:
Obviously there a lot yet to do to your blog before it reflects your unique persona/style (such as picking and installing a theme), but for now let’s get our blog published to AWS.
AWS Amplify is a new framework within AWS to help developers deploy their projects quickly and easily. You simply install the CLI, initialize it with your credentials and a few other settings, and then publish from the CLI - all the complex AWS configurations are made for you by the framework!
To begin, install the AWS Amplify CLI (if you haven’t already):
$ npm install @aws-amplify/api @aws-amplify/pubsub
After the AWS Amplify CLI is installed you need to initialize it in the root of your project:
$ amplify init
This initialization will prompt you for several settings. You can find my choices below.
“source” and “public” are necessary for supporting Hexo’s Source Directory and Distribution Directory paths
The logical next step would be to publish, but first we need add some additional hosting configurations and backend dependencies. Run the following command to begin and note my settings below:
$ amplify add hosting
One more step before we publish, and I promise its my last one. We need to make a few config changes to support some Hexo idiosyncrasies. Add the following into your package.json file at the root of your project:
These configurations inform Amplify deployments how to start and build our Hexo package.
With this last step in place you can now use your standard “npm start” to run your blog locally, similar to “hexo server”. We’re now also ready to publish:
$ amplify publish -c
The key is the “-c”. Since AWS CloudFront (the CDN) caches files, it is necessary to use the -c to clear that cache otherwise your publishing won’t take affect until that cache otherwise gets invalidated. Obviously for our first publish this isn’t necessary.
After the publish is complete you should immediately be able to view your website, note the URL, hosted globally on AWS CloudFront CDN:
Feel free to check out my out-of-the-box serverless Hexo deployment, however, as you guessed, the webpage you’re looking at is essentially the same thing :)
You may notice that only your root assumes usage of index.html. All other pages and blog posts do not, and instead redirect you to the root/home. To fix this:
Wasn’t that SUPER easy? All thanks to AWS Amplify to make serverless S3 app deployments a piece of cake. However, your work to stand up your blog is just beginning. Some of your next steps likely are the following:
Thanks! Please leave a comment below :)