Building a blog website based on Hexo+hexo-theme-stun

Build a blog website based on Hexo + hexo-theme-stun

• • How to build a personal blog site
  • 1. Introduction to Hexo
  • Two, hexo-theme-stun theme
  • 3. Demonstration effect
  • 4. Build
  • 5. Configuration
  • • Hexo overall configuration
    • 1. First download the theme
    • 2. Modify the configuration file `_config.yml` in the root directory of the project
    • 3. Add website, URL and homepage configuration
    • 4. Add deployment path
    • 5. Set the background image and text of the home page
  • 6. Add fixed page
  • 7. Writing articles
  • 8. Generate Gitee Page from the blog project
  • 9. Reference domain name address

How to build a personal blog site

As a programmer, if you like to output technical articles, you must have had the idea of building a personal blog website. After comparing many blog frameworks, I found that the blog website built with the Hexo + hexo-theme-stun theme not only has a beautiful interface, but also has powerful functions. Today I will show you how to use Hexo to build a beautiful blog website. I hope it will be helpful to you!

1. Introduction to Hexo

Hexo is a fast, simple and efficient blogging framework. We can use Markdown to write articles, and then generate static websites through Hexo. Hexo has a very rich theme, and many blogs you have seen are generated using it.

2. hexo-theme-stun theme

When using Hexo, we usually use it with a third-party theme. Here we recommend a theme designed based on Material Design hexo-theme-stun. The interface is simple and beautiful, and the article content is beautiful and easy to read. With responsive design, the blog can be displayed well on desktops, tablets, mobile phones and other devices. Built-in rich plug-ins, powerful.

3. Demo effect

Let’s take a look at the effect first. The effect is still very good. Friends who want to build a personal blog can try it!

4. Build

We will first use Hexo to build a basic blog website, and then switch to the hexo-theme-stun theme.

• First, use the following command to install hexo-cli. Just look at the name and you will know that it is Hexo’s CLI tool;

npm install -g hexo-cli

• After successful installation, initialize a blog directory, enter the directory, and then install the dependencies;

# Initialize the blog directory
hexo init website-hexo
# Enter the blog directory
cd website-hexo
# Install blog related dependencies
npm install

• Such a basic blog website has been built. Can you build the blog website in seconds? Then use the following command to start the blog website;

hexo s

• After successful startup, we can visit the homepage. Friends who have used Hexo should know that Hexo needs to be used with a theme, otherwise it will be really ugly. Access address: http://localhost:4000/
  

5. Configuration

To build a blog website, some configurations need to be customized. Next, let’s talk about the overall configuration of Hexo and the theme configuration of hexo-theme-stun.

Hexo overall configuration

There are many themes that support Hexo. Here I chose hexo-theme-stun which I think is more beautiful.

1. Download the theme first

Unzip it to the themes directory of the project, download address: https://github.com/liuyib/hexo-theme-stun

2. Modify the configuration file _config.yml in the project root directory

This file is the overall configuration of Hexo. Change the theme attribute to hexo-theme-stun;

theme: hexo-theme-stun

3. Add website, URL and home page configuration

The _config.yml file can not only change the theme, but also many website configurations, such as website configuration, URL configuration, homepage configuration, etc.

# Website configuration
title: ljyxsg's technical growth record
subtitle: 'Ljyxsg's technical growth record'
description: 'Skill-oriented work attitude, interest-oriented interpersonal communication'
keywords: ljyxsg's technical growth record
author: ljyxsg
language: zh-CN
timezone: 'Asia/Shanghai'

# URL configuration
url: http://ljyxsg.github.io
permalink: :year/:month/:day/:title/

# Home page configuration
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
#Paging configuration
per_page: 10
pagination_dir: page

4. Add deployment path

Open _config.yml in the root directory and set the deployment path to your own gitee warehouse address

deploy:
  type: git
  repo: https://gitee.com/lou_jianyang/lou_jianyang.git
  branch: master

5. Set the background image and text of the homepage

Modify the _config.stun.yml file

header:
  enable: true
  show_on:
    post: true
  height: 80%
  # Set the state of the background image to true
  bg_image:
    enable: true
    # If you set the background image (source/images) in the theme path: /images/avatar.png
    # If you set the background image (source/uploads) in the source path: /uploads/avatar.png
    url: /uploads/dog.jpg
  banner:
    # Open the editing status of the banner
    enable: true
    # Set the title of the blog
    title: ljyxsg's technical growth record
    # Set the subtitle of the blog
    subtitle: ljy of Yidiandiannice
  # Turn on shadows and add shades for the blog
  mask:
    enable: true
    # mask value range: 0 ~ 1)
    opacity: 0.5

6. Add fixed page

• There are some navigation buttons at the top of the homepage, such as tags, categories, archives, etc. If we do not create corresponding pages, we will not be able to access them;
  

• Use the hexo new page "categories" command to create a new category page. The category page must contain at least the following content

---
title: categories
date: 2023-01-19 15:28:49
type: "categories"
layout: "categories"
---

• Use the hexo new page "tags" command to create a new category page. The category page must contain at least the following content

---
title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
---

• Use the hexo new page "about" command to create a new about page. The about page must contain at least the following content;

---
title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
---

• After the pages are successfully created, the project directory structure is as follows. The directory is posted here for everyone to understand.
  

7. Write an article

Set post_asset_folder in the _config.yml file to true before writing the article.

hexo n 'my first blog'

When generating my first blog.md in the source/_posts directory, a my first blog folder will also be generated. , you can put the pictures in the article under this folder.
Use markdown syntax to edit the blog page. For specific syntax details, see the markdown syntax link.
It should be noted that after hexo3.0 version, it is recommended to use the following syntax to insert pictures:

 {% asset_img example.jpeg this is an example! %}

After writing the article, run the following command to upload the blog code to gitee

hexo clean & hexo g
hexo d

8. Generate Gitee Page from blog project

1. Note that the project name and warehouse name need to be set to the same, so that no additional path is required after the code cloud domain name.
   

Select Service -> Gitee Pages on the blog project page, you need to enter your ID card information for the first opening, and the audit can be successful in about two working days.
2. After the review is successful, you can publish the blog page, but before that, you need to set the project to open source. The operation is as shown in the figure below:
Manage -> Select open source -> Check I agree -> Click OK

3. Click Manage -> Select branch -> Force https -> Update -> Click the link code> can jump to the blog page.
   
   

9. Reference domain name address

Link: https://lou_jianyang.gitee.io/