0x01 - Hexo Fluid Theme Setup

“Hexo is a fast, simple, and powerful blog framework. You write posts in Markdown (or other markup languages), and Hexo generates static files with a beautiful theme in seconds.” - Hexo official website.

The basic Hexo deployment is pretty bland, but the real magic of Hexo comes into play with the introduction of themes and plugins. Here, I will provide a step-by-step guide on how to set up Hexo and also install the most popular Hexo theme known as Fluid.

This Hexo installation guide is created for Ubuntu machines.

Installation

Elevating the priviliges:

sudo su -

Disabling firewall:

ufw disable

Updating the machine:

apt update && apt upgrade -y

Installing required

apt install build-essential libssl-dev nodejs npm wget -y

Installing nvm (node(js) version manager):

wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

Adding path of nvm:

run the following command as one command

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Installing/upgrading node(js) and updating sources:

nvm install stable
source ~/.profile

Installing Hexo:

npm install -g hexo-cli

creating hexo project:

hexo init 0x00daemon.github.io
cd 0x00daemon.github.io/
sudo npm install

Installing the Fluid theme:

cd themes
git clone https://github.com/fluid-dev/hexo-theme-fluid.git
mv hexo-theme-fluid/ fluid

Adding the Fluid theme to Hexo blog:

cd ..
vi _config.yml # or nano _config.yml

change the theme to Fluid from Landscape which is the default

To install the css package:

npm install css --save

Running the Hexo server (to test):

hexo server

Github Deployment

The github deployment can be performed two ways using Hexo git deployer (which uses Github workflow) or through git pages setup

Option 1 - provides github pages deployment
Option 2 - provides github workflow/actions deployment (preferred and what I myself use)

Option 1 - Using Hexo git deployer

Installing hexo-deployer-git:

npm install hexo-deployer-git --save

Authenticating to Github:

Installing Github

apt install gh -y
gh auth login

Optional - but recommended github configs:

git config --global credential.helper "cache --timeout=3600"
git config --global user.name "username"
git config --global user.email "email@example.com"

be sure to change the username with your username and email@example.com to your email.

Adding the github pages details:

Make sure to edit the _config file with the following changes:

deploy:
  type: git
  repo: <repository url>
  branch: gh-pages
  message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

Make sure to change the repo to your repo link.

Generating the blog:

hexo clean && hexo deploy

Option 2 - Github workflow/actions deployment

Authenticating to Github:

Installing Github

apt install gh -y
gh auth login

Optional - but recommended github configs (I did these):

git config --global credential.helper "cache --timeout=3600"
git config --global user.name "username"
git config --global user.email "email@example.com"

be sure to change the username with your username and email@example.com to your email.

Uploading the blog to github:

git init
git add --all
git commit -m "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"
git branch -M main
git remote add origin <repo-link>
git push -u origin main

Now if you may be thinking how can we edit the default title, images, icons, etc. and for that you can read the official documentation for Hexo and Fluid which is cryptic to say the least or follow through this blogging using hexo & fluid 101 guide