Getting Started with Headless Hashnode on DigitalOcean

Introduction

Hashnode is a free-to-use content publishing platform and a go-to community for developers designed to keep technology enthusiasts in mind. It provides a space for users to create and share blog posts and build a community around various technology domains.

Hashnode aims to simplify creating and maintaining a developer-friendly and SEO-optimized technical blog, offering features such as custom domains, a built-in editor, and seamless integration with popular version control systems like GitHub. Their newest offering, Headless Hashnode, empowers you to build a blog from the ground up using Hashnode’s innovative GraphQL APIs. You can build a blog from scratch or use their Next.js Starter Kit.

In this tutorial, we’ll set up Hashnode headlessly on DigitalOcean Droplets.

Introduction to Headless Hashnode

A Headless Content Management System, or CMS, is a type of architecture segregating content management and its presentation layers. Using a traditional CMS, content is drafted, stored, and displayed within the same system, but with a headless architecture, the storage and presentation of content can be dealt with separately, which leaves room for designers and developers to experiment with how the blog is going to look to its consumers.

Headless Hashnode is a purpose-built CMS that helps users build personal or enterprise-centric blogs where they can play around with the front end, making use of Hashnode’s WYSIWYG Editor, AI, and SEO Optimisation tools without worrying about content and track analytics while hosting on their domain.

Getting Started

Here’s what you’ll need to follow along:

1. An account on DigitalOcean. You can create a Digital Ocean account to sign up if you’re new.

2. An account on Hashnode. You can create a Hashnode account to sign up if you’re new.

Using DigitalOcean Droplets

DigitalOcean Droplets are simple, scalable, reliable virtual machines that can easily be deployed in under a minute.

To get started, go to your control panel on DigitalOcean and click on the green “Create” button at the top right of your screen. From the dropdown, select “Droplets,” which will also be the first option.

In the next window, you must specify your preferences for Region, Image, and Size, among other details. Choosing the region closest to your prospective readers is strongly recommended, even if a data center has been pre-selected for you.

On the next option that reads “Images,” head to the Marketplace tab and look for NodeJS on Ubuntu. DigitalOcean’s Marketplace houses a curated collection of ready-to-deploy tools and resources called 1-Click Apps. Instead of downloading all the dependencies manually, you can head to the Marketplace and deploy a 1-Click App, which comes with preconfigured images and settings and all the required packages and dependencies for your project. Here’s how your screen should look:

On the next window, you get to choose the size of the Droplet; considering how many blogs you plan on posting moving forward, choose the best one for yourself or your enterprise. Ideally, we’d recommend using at least 25 GB of SSD Hard disk if you plan to launch this implementation on a production level. We recommend picking a Premium Droplet for faster performance, powered by Intel, AMD CPUs, and NVMe SSD. You can choose a Premium Droplet based on your requirements, just as a standard Droplet.

Once through, you need to pick a method of authentication. You can log in to your Droplet via an SSH Key or a password. For this tutorial, we are moving ahead with a password, so add any string of your choice and note it down.

For the next segment, you can add improved metrics monitoring and alerting free of cost by checking the box next to the option, and you’re all set. Ensure you add a simpler Hostname for your Droplet and glance at all the details before clicking “Create Droplet.”

It will take close to a minute for the Droplet to get provisioned. Once done, click the “Get Started” link to get an overview of the Marketplace App and see what’s included.

Setting Up the Droplet

To set up your Droplet, accept incoming connections and route them to the application on your local terminal:

ssh root@YOUR-DROPLET-IP

Replace ‘YOUR-DROPLET-IP’ with the IP address in front of your Droplet on the Control Panel. Enter the password when prompted.

The next step is to update and upgrade the packages on the Droplet, and for that, execute the following commands:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

To remove the default page shown on the Droplet and occupy the 3000 port, use the following commands.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

You might need to power off your Droplet if the changes don’t reflect within 5 minutes and then turn it on again. If it happens, you must SSH into the Droplet on your local terminal again.

For the next steps, we’ll use Node.js, npm, and Nginx, which are preinstalled on the Droplet. Nginx is the tool that will handle all the routing to our Next.js application.

Configuring Nginx

Create a new Nginx configuration file using the following command:

sudo nano /etc/nginx/sites-available/hashnode

Paste the following configuration, replacing server_name with your Droplet IP address:

server {
  listen 80;
  server_name YOUR_IP_ADDRESS;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Once through, save and close the file. Now, we need to create a symbolic link to enable the configuration using the following:

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

To test the Nginx configuration for syntax errors, you can execute:

sudo nginx -t

This is what the output should ideally look like:

Now we are ready to restart Nginx and to do that using the command:

sudo service nginx restart

Installing Headless Hashnode

Navigate to the right directory:

cd /var/www

Clone the Headless Hashnode Github repository:

git clone https://github.com/hashnode/starter-kit

Choose a template and navigate to its directory. In this tutorial, we are deploying the Personal theme:

cd starter-kit/packages/blog-starter-kit/themes/personal

Copy the environment variables file:

cp .env.example .env.local

Next, edit the environment variables file:

nano .env.local

You need to change the environment variables to point to your Hashnode account. Change NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST to your endpoint and NEXT_PUBLIC_MODE to production. This is how the file will look like:

Execute the following to install dependencies:

pnpm install

Your screen should resemble the following:

With everything in place, you can now execute the following command to deploy Headless Hashnode on your Droplet. Note that it takes up to a minute to compile. Your terminal should resemble the following:

pnpm dev

Once compiled, you can visit your Droplet IP Address to see your Headless Hashnode site up and running!

With this, we have successfully deployed Hashnode headlessly on a DigitalOcean Droplet using a reverse proxy powered by Nginx!

Setting Up a PM2 Process Manager

Sometimes, the run command we executed may stop because the server restarted or needed to install updates. We will use a PM2 tool to ensure our application is always running. PM2 will even restart the application if it goes down.

With the Node.js Marketplace Image, PM2 comes pre-installed. To ensure your application always runs using PM2:

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start

To ensure PM2 starts on boot, run the following commands. This will generate a script that you can copy and paste into your terminal to enable PM2 to start on boot and save that setting.

pm2 startup 
pm2 save

Conclusion

Headless CMS tools are great for customizing user interfaces, and Hashnode facilitates an extremely scalable and flexible tool.

For improved security and SEO on your blog, consider setting up SSL certificates using Let’s Encrypt and enforcing HTTPS connections. Remember to configure your DNS settings if you’d like to add your domain name. Point your domain’s A record to your Droplet’s IP address to access the application using the domain name.

We can’t wait to see your blogs powered by DigitalOcean!