In today's information age, building a personal blog not only helps to record daily life and technical insights but also provides a stage to showcase one's thoughts and skills. Hexo is a simple, fast, and powerful static blog framework that is loved by developers and writing enthusiasts. This article will introduce how to set up a blog website using Hexo and recommend a beautiful and feature-rich theme—Butterfly.
Step 1: Install Node.js and Hexo#
Before setting up a Hexo blog, you need to ensure that Node.js and Git are installed. Hexo is based on Node.js, so Node.js is essential.
-
Install Node.js:
- Go to the Node.js official website to download and install the version suitable for your operating system.
- After installation, you can enter the following commands in the terminal to confirm the installation was successful:
node -v npm -v
-
Install Hexo:
- Open the terminal and enter the following command to install Hexo:
npm install -g hexo-cli
This will globally install the Hexo command line tool.
- Open the terminal and enter the following command to install Hexo:
Step 2: Create a Hexo Blog#
In the directory where you want to create the blog, run the following commands:
hexo init my-blog
cd my-blog
npm install
This will create a new Hexo blog project and install all necessary dependencies. Once completed, the structure of the Hexo blog will be set up.
You can start the local server to preview the blog with the following command:
hexo server -p 80
Visit http://localhost
in your browser, and you will see the default Hexo blog page.
Step 3: Install the Butterfly Theme#
The default theme that comes with Hexo is relatively simple, while the Butterfly theme, with its rich features and beautiful design, has become the first choice for many Hexo users. You can follow these steps to install the Butterfly theme:
-
Download the Theme:
In the root directory of your blog, run the following command to clone the Butterfly theme into thethemes
folder:git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
-
Modify the Configuration File:
Open the_config.yml
file in the root directory of thehexo
project, find thetheme
field, and change it tobutterfly
:theme: butterfly
-
Install Dependencies:
Navigate to thethemes/butterfly
directory and install the dependencies required by the theme:npm install
Step 4: Configure the Butterfly Theme#
The Butterfly theme offers extremely flexible customization options. You can adjust the appearance, layout, color scheme, and other details according to your needs.
-
Theme Configuration File:
The configuration file for the Butterfly theme is located atthemes/butterfly/_config.yml
. By modifying the configuration items within, you can customize the layout and functionality of your blog. -
Plugins and Styles:
The Butterfly theme supports various plugins and feature extensions, such as article sharing buttons, comment systems, code highlighting, dynamic backgrounds, etc. You can refer to the official documentation to learn how to enable these features.
Step 5: Generate Static Pages and Deploy#
Once the configuration is complete, you can generate static pages and deploy them to GitHub Pages or other static hosting platforms.
-
Generate Static Pages:
hexo generate
-
Deploy to GitHub Pages:
You can deploy to GitHub Pages with a single command using Hexo'shexo-deployer-git
plugin. First, install the plugin:npm install hexo-deployer-git --save
Then, add the following deployment configuration in
config.yml
:deploy: type: git repo: https://github.com/yourname/your-repo.git branch: gh-pages
Finally, deploy the blog with the following command:
hexo deploy
Conclusion#
By following the above steps, you can easily set up a feature-rich blog using Hexo and make your blog more attractive with the Butterfly theme. The Butterfly theme not only offers rich features but also supports high customization, making it one of the most popular themes in the Hexo community. If you are looking for a simple, beautiful, and powerful Hexo theme, Butterfly is definitely a choice worth trying.
Get started on creating your own blog now!
(This article was assisted by ChatGPT)