A Unique Middle Ground
Red Bear exists in a space pretty much a middle ground between building a website from scratch and a service that basically builds the site for you like squarespace. There are a few resources that we use to make this happen but we’ll only outline the most critical ones to this workflow. The architecture that we used is nothing ground breaking and there are tons of tutorials and walk-throughs that give you broad-stroke instructions on how to set something up for yourself. We are also working on putting a youtube video together outlining the specific resources and step-by-step instructions if you are interested in duplicating this workflow start to finish. Most of the resources outlined are going to be completely interchangeable with similar products but the overall structure will be the same.
Design Overview
You can reference the architecture diagram below but we want to take the time to highlight the distinct segments of the workflow to give you a good idea as to where you might be able to substitute resources for ones that you prefer or might already be using. The segments are described as the following:
- Text processor - This could be word, or notes, Drafts, Notion, MS Word. The requirements are very basic. You just need somewhere to write and store content. We’ll outline why we prefer Drafts but you can use any of the ones mentioned above.
- Code - This is one part of the process that is can be abstracted away if you have universal solution like Squarespace, but for the purpose of this article we will cover the solution that works for us which is Hugo.
- Domain / DNS management - This can be and a lot times IS combined with the next component which is the hosting platform. A lot of times however people tend to already have a domain with one service and although you can always transfer domains between different registrars, it isn’t always necessary or advantageous.
- Hosting - This is where we would really recommend you do your research and have some conviction in the decision you make because this is arguably where the most cost and headache will can come from. We host our website on AWS but the possibilities are endless.
Text Processor
Drafts
We LOVE drafts here at Red Bear and we’ll stand by it as the most powerful note taking application that is on the market today. As a matter of fact, we have a whole article written about it so we won’t spend time talking about it in this one. Feel free to check out our review here
We have a workspace in Drafts completely dedicated to this blog where we write all of the posts and pages found on this website. The life-cycle of every blog post starts with our idea bank. Our idea bank works much in the way that you would think where as soon as we have an idea for a blog post we drop the title in our idea bank with a brief description and they sit there until we are either ready to move on the idea or discard the idea. This also helps us visualize the categories and the potential posts before they even make it to the blog itself.
From there each blog post has its own individual page where we will then write the content that we will publish to our site. Once the idea manifests itself into an actual blog post then we backlink it to our idea bank just to keep track of it a little easier and to have everything originate from the same place. If the post is one where we have to do any sort of research we’ll create a separate research page that we then backlink to the blog post page. This helps us keep the entire workflow segmented but still easy to navigate through the various backlinks.
This workflow works particularly well for a couple of reasons:
- Both Drafts and Hugo natively support Markdown
- The design of the user interface of Drafts allows us to write with a minimal, distraction-free editor
- Through custom scripted Actions everything outside of the actual writing of content is automated
Code
Hugo
Hugo serves a very specific purpose for us and everyone else that uses it in their workflow. Hugo is a static site generator that allows you to create really beautiful websites that are lightweight and easy to deploy. If you’re not familiar with what a static website is it basically means that your website will only use HTML, CSS, and Javascript to serve content to your users. This means there is no database or backend to interact with. This also means you don’t have to worry about securing those components either. It does provide some limitations in what you are able to accomplish in terms of the user interaction but if you just want to host a blog and aren’t trying to deploy a web application then it works perfect. It works well for us since we’re mainly concerned with serving information to our audience and we don’t need to maintain or synthesize any user data.
Compared to other website builders like Wordpress or Ghost, Hugo feels very minimal and lightweight. For us it works really well because Hugo enables you to interact with the HTML and CSS of your site and since we have recently embarked on our own personal web development journey it’s allowed us to learn more on the topic through our interactions. This may not be for everyone however, if you don’t want to learn code or just don’t want interact with it then Hugo might not be for you unless you want to use cookie-cutter themes without any personalization.
We personalized the PaperMod theme to suit our aesthetic and presentation but you can also create your own themes from scratch. Hugo in the capacity that we use it saves us a lot of time by generating HTML pages from the Markdown pages that we export from Drafts. It allows us to leverage templates and bring in our own custom elements while doing the heavy lifting for us. Building a site from scratch is a good experience to have but it also takes time and if you understand the elements underneath the architecture then this might be a good solution for you as well.
Hugo also allows you to integrate with popular hosting platforms by linking to your accounts through the CLI. Set up is very quick and easy and once the connection is made, deploying and updating your website is very quick. Most of this happens through the CLI and since we already have our templates set up for our styling we rarely even need to interact with our website directory unless we are uploading images or making an intricate post.
Hosting
AWS
This presents a very clear and obvious solution for us here at Red Bear and we’ll try our best to explain why it might be the answer for you too. However, hosting your website on AWS might not be a good idea if you’re not at least a little familiar wit cloud computing. If you have some knowledge under your belt or if you are willing to learn then you can really get away with some cheap hosting by using AWS and managing your own resources.
Our architecture starts with an S3 bucket where we maintain all of our resources for the site. S3 is a popular service for many people when hosting static websites on AWS, the difference is that we haven’t made our bucket public like a lot of other people do. Having public S3 bucket is just not the way to go, although it might be a quicker lighter deployment.
We use a Cloudfront distribution to deliver our website without the need to make our S3 bucket public to the world. The benefit to using Cloudfront is that the site will get cached in AWS edge locations across the world which simply means that serve times are incredibly fast for users. We then use Certificate Manager and Route53 to handle our certificates and our Domain and DNS hosting.
This might sound like a lot of services but it’s a well known architecture and one of the cheaper and quicker options avaialble. Most of these resources are also available under the AWS free tier so you can get away with hosting your website for months at little to no cost at all.
The Wrap-up
Again as far as the hosting goes, this is a well-known and popular framework for static website serving that might be a worth while solution for a lot of people. It does require some basic knowledge of AWS cloud concepts but there are tons of tutorials that hold your hand through the process of deploying the framework yourself. Hugo and Drafts have probably just as much user support and documentation to make learning them very easy as well. If after all that you have any questions about our architecture or need help setting up your own feel free to email us!