How I built this blog site

💡 Hexo is a straightforward and fast blog static site framework with various themes you can select from. The following will introduce how I build this blog site with Hexo and hexo-theme-cactus.

• 1. Prerequisites
• 2. Quick Start with Hexo
  • 2.1. Installing Hexo
  • 2.2. Setting up Hexo locally
  • 2.3. Posting your first blog
  • 2.4. Let’s write something
  • 2.5. Generating static files
• 3. Changing the theme
  • 3.1. installing hexo-theme-cactus
  • 3.2. Setting the Theme
  • 3.3. configuration
• 4. Deploying Hexo blog on Github Pages
  • 4.1. creating a repository
  • 4.2. One-command deployment

1. Prerequisites

• Node.js
• Git
  – For MacOs

$ brew install node
$ brew install git

– For Linux

$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install git

❗ make sure Node.js and Git are both installed on your machine.

2. Quick Start with Hexo

2.1. Installing Hexo

$ npm install hexo-cli -g

2.2. Setting up Hexo locally

$ hexo init ~/blog
$ cd ~/blog
$ hexo server

• Now, you can visit your basic Hexo blog at http://localhost:4000. Hexo will watch for all file changes and automatically render the site. You can press Ctrl+C to stop the server.

2.3. Posting your first blog

$ hexo new post "my first post"

• Restart the hexo server, and you will see your first post!

2.4. Let’s write something

• Before writing the first blog, let’s take a look at the Hexo file structure.

$ tree -L 3

|-- _config.landscape.yml
|-- _config.yml
|-- db.json
|-- node_modules
|-- package-lock.json
|-- package.json
|-- scaffolds
|-- source
|   `-- _posts
|       |-- hello-world.md
|       `-- my-first-post.md
`-- themes

• As we can see, the new post “my first post” has been created inside the source/_posts folder, and all of your posts will be stored in this folder if not assigned categories. By default, Hexo has created a hello-world.md tutorial post for us.
• Now, you can add any content to this new post.

$ vim ~/blog/source/_posts/my-first-post.md

	---
	title: my first post
	date: 2022-08-21 00:50:27
	tags:
	---

	Ciao! This is my first Hexo blog post!

• Press Esc and then type :wq to quit Vim. Restart Hexo server and refresh http://localhost:4000, you will see the post.

2.5. Generating static files

$ hexo generate 

• All static files will be generated under /blog/public/ folder.

3. Changing the theme

💡 Changing the theme of Hexo blog is straightforward. There have more than 300 items you can choose from [Hexo Themes](https://hexo.io/themes/), or customized themes from Github repo. Here, I’ll pick the [Cactus](https://github.com/probberechts/hexo-theme-cactus) theme.

3.1. installing hexo-theme-cactus

$ cd ~/blog
$ git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

3.2. Setting the Theme

• Modify the value of theme: in _config.yml file to cactus, and restart Hexo server.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: cactus 

$ hexo server

3.3. configuration

• Most of the site settings can be found in the _config.yml file.

# Site
title: Magic Cat
subtitle: 
description: Not done yet, I\'m trying
keywords:
author: Clark
language: en
timezone: ''

• More theme detail settings can be found in ~/blog/themes/cactus/_config.yml

projects_url: https://github.com/username/username.github.io
direction: ltr
nav:
  home: /
  about: /about/
  articles: /archives/
  Gallery: /gallery
  Archives: /
  Search: /search/
  
social_links:
  github: https://github.com/username
...
# Available color schemes are 'dark', 'light', 'classic' and 'white'.
colorscheme: light
...

• For more Features of cactus themes please visit hexo-theme-cactus.

4. Deploying Hexo blog on Github Pages

💡 If you want to deploy the Hexo blog to a server, Github will provide a good way to publish your website.

4.1. creating a repository

• Create a new public repo named username.github.io on your Github, make sure to get the username right, if the repo name doesn’t match with your username, it won’t work.

$ cd ~
$ git clone https://github.com/username/username.github.io

• Generating Hexo public files

$ cd ~/blog
$ hexo clean
$ hexo generate

• Copy all the files generated under ~/blog/public to ~ @/username.github.io

$ cp -r ~/blog/public/* ~/username.github.io/

• Push it

$ cd ~/username.github.io/
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main

• Wait for a few minutes, then go to username.github.io on a browser, you can see your new blog on Github Pages, and you’re done!

4.2. One-command deployment

• Hexo provides a more straightforward way to deploy your site. First, install hexo-deployer-git

$ cd ~/blog
$ npm install hexo-deployer-git --save

• Next, add configs to the bottom of the _config.yml file as follows.

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  branch: main

• Then, run:

$ hexo clean && hexo deploy

• Wait for a few minutes, check your webpage at username.github.io