Use Hexo to build a personal blog website

This blog will guide you to build a personal blog website from scratch, using Hexo, a powerful static blog generator. Starting from installing and configuring Hexo, to creating and managing articles, to customizing themes, extending functions, deployment and optimization, and finally introducing promotion and sharing strategies to help you build an eye-catching personal blog website.

1. Introduction to Hexo

In the Internet age, having a personal blog website has become a popular way to share knowledge, experience and interests. However, if you are not a professional website developer, setting up a blog can seem complicated and time-consuming. This is where Hexo comes in.

1.1 What is Hexo?

Hexo is a fast, simple and powerful static blog generator. It is developed using Node.js and uses markup languages such as Markdown to convert your article content into static HTML pages. Key features of Hexo include:

Fast: Hexo builds very quickly, which means you can deploy new content and changes quickly.
Easy to use: Hexo uses simple markup languages such as Markdown to write articles, without the need for in-depth knowledge of web development.
Customize the theme: Hexo provides a wealth of themes and plug-ins, you can freely choose according to your personal taste, or even create your own theme.
Static website: The generated website is static and does not require a complex database, making it more secure and stable.
Easy deployment: Hexo supports a variety of deployment methods, including GitHub Pages, Netlify, etc., making your blog easy to go online.

1.2 Why choose Hexo?

There are many reasons to choose Hexo, some of the main ones include:

Easy to use: Hexo’s commands and configuration are relatively simple, making it easy for even beginners to get started.
Fast speed: Since Hexo generates static pages, the loading speed is very fast, providing a better user experience.
Active community: Hexo has a large community of users and developers, so you can easily find solutions to your problems.
Extensibility: Hexo supports a variety of themes and plugins to expand blog functionality according to personal needs.

In short, Hexo is an excellent blog building tool that can meet your needs whether you are a new blogger or an experienced blogger. Next, we will step by step introduce how to install, configure and use Hexo to create your own personal blog website.

2. Install and configure Hexo

After introducing the advantages of Hexo, we will learn step by step how to install and configure Hexo to create your own personal blog website.

2.1 Install Node.js and Git

Before you start installing Hexo, you need to make sure that Node.js and Git are installed on your computer. These two tools are the basic dependencies of Hexo. You can download it from the official website and follow the installation instructions to install it.

Node.js download link: https://nodejs.org/
Git download link: https://git-scm.com/

2.2 Install Hexo globally

After installing Node.js and Git, open the command line tool and enter the following command to install Hexo globally:

npm install -g hexo-cli

This command will install Hexo’s command line tools, allowing you to use Hexo commands globally.

2.3 Create Hexo blog

After installing the Hexo command line tool, you can choose a suitable folder as the root directory of your blog. Then, perform the following steps on the command line:

Enter the selected blog root directory:

cd your_blog_directory

Create a new Hexo blog:

hexo init my_blog

Enter the newly created blog directory:

cd my_blog

2.4 Configuring Hexo: themes, plug-ins, site information

After the Hexo blog is created, you need to perform some basic configuration. First, open the _config.yml file in the blog root directory. This is the Hexo configuration file. You can use a text editor to edit this file.

In the configuration file, you can make the following common configurations:

Theme selection: Hexo supports various themes, you can select a theme and configure theme-related options in the configuration file.
Plug-in installation: Depending on your blog needs, you can choose to install various Hexo plug-ins to extend the functionality of your blog.
Site information: Configure the blog’s title, description, author and other basic information.

Once the configuration is complete, save the file and close the editor.

3. Create and manage articles

After you have successfully installed and configured Hexo, the next critical step is to create and manage articles. Hexo uses Markdown language to write articles, allowing you to focus on content creation without worrying about complex formatting.

3.1 Use Markdown to write articles

Markdown is a lightweight markup language that is widely used for writing documents, blogs, and articles. Its syntax is simple and easy to understand, allowing you to write articles using a plain text editor and then convert them into beautiful web pages through Hexo.

Markdown basic syntax example:

Title: Use # to represent titles of different levels, such as # Title 1 represents a first-level title, ## Title 2 represents a second-level title, And so on.
Lists: Use * or - to create an unordered list, use numbers and . to create an ordered list.
Link: Use [link text](link address) to create a hyperlink.
Image: Use ![image description](image link) to insert an image.
Quotes: Use > to create a quote block.
Bold and italic: Use **text** for bold and *text* for italic.

Detailed Markdown syntax documents and tutorials can be found online to help you get started quickly.

3.2 Create new article

To create a new article in Hexo, just follow these steps:

Open the command line tool and make sure you are in the Hexo blog root directory.
Run the following command to create a new article:

hexo new "My new article"

This will create a Markdown file named My new post.md in the source/_posts directory of the Hexo blog. You can open this file with any text editor and start writing the article content.

3.3 Manage articles: publish, draft, delete

Hexo provides flexible article management functions. You can manage article status according to your own needs:

Publish an article: To publish an article, just write the article content in the Markdown file, and then run hexo generate and hexo deploy in the command line command to generate and deploy the article to your blog site.
Save Draft: If you haven’t finished the article yet, or want to temporarily save it as a draft, just keep the Markdown file in the source/_drafts directory. Drafts are not generated as web pages and are only moved to the source/_posts directory when you decide to publish them.
Delete Posts: If you need to delete an article, simply delete the corresponding Markdown file located in the source/_posts directory and run hexo clean and the hexo generate command to clean up the legacy files of deleted articles.

With these simple steps, you can easily create, publish and manage posts to keep your Hexo blog clean and organized.

4. Custom theme

Choosing a theme that suits your blogging style is one of the key steps in building a personal blogging website. Hexo offers users a variety of theme options that you can customize according to your needs and preferences.

4.1 Select Hexo theme

The Hexo community has a rich theme library from which you can choose a theme that matches the theme of your blog. Here are some popular Hexo themes:

NexT: A powerful and highly customizable theme with a fresh design and rich features.
landscape: The default theme officially provided by Hexo is concise, clear and suitable for writing.
Cactus: A simple single-column theme focused on reading experience.
Butterfly: A modern multi-column theme that supports rich plugins and customization options.
Material: A theme based on Google Material Design, focusing on aesthetics and user experience.

After you select a theme, you can follow the guidance of the theme documentation to install and configure it.

4.2 Theme configuration

Once you have chosen a theme, the next step is to configure the theme to suit your needs. Typically, theme configuration can be found in the _config.yml file in the root directory of the Hexo blog. Theme configuration files may include the following options:

Menu settings: You can define the content and links of your navigation menu.
Social Media Links: Add your social media links to your topic to make it easy for readers to follow you.
Color and Style: You can customize your theme’s colors, fonts, and style to match your brand or personal preferences.
Sidebar Widgets: Some themes allow you to add widgets to the sidebar, such as recent posts, tag clouds, etc.
SEO Settings: Configure options regarding search engine optimization to increase the visibility of your blog.

4.3 Custom styles and layouts

You can also make more advanced customizations if the theme’s default style and layout don’t suit your needs. Typically, you can edit the CSS files in the theme directory to change the style, or modify the theme’s template files to adjust the layout.

To customize the style of your theme, you can find a file named style.css or custom.css in your theme directory and edit it as needed. Make sure to back up your files just in case.

To customize the layout of your theme, you can edit the template files in the theme directory, such as layout.ejs or index.ejs, to suit your needs. This requires some basic knowledge of HTML and the EJS template language.

Customizing theme styles and layouts requires caution. It is recommended to back up the theme files before making modifications to prevent inadvertent damage to the theme.

By choosing the right theme and making the necessary customizations, you can create an impressive personal blogging site that showcases your content and personality.

5. Plug-in extension

As a powerful static blog generator, Hexo supports a wealth of plug-ins to extend its functionality. In this section, we will introduce commonly used Hexo plug-ins and how to install and configure them to enhance your blog functionality.

5.1 Introduction to commonly used Hexo plug-ins

There are a large number of plug-ins to choose from in Hexo’s plug-in library, covering various functions from SEO optimization to image compression. Here are some commonly used Hexo plugins:

hexo-deployer-git: Plug-in for deploying blogs to Git repositories, supporting GitHub, GitLab and other platforms.
hexo-generator-sitemap: Automatically generates sitemaps to help improve search engine optimization.
hexo-generator-feed: Automatically generate RSS feeds to facilitate readers to subscribe to your blog.
hexo-tag-fontawesome: Supports the use of Font Awesome icons to beautify article content.
hexo-excerpt: Allows the use of tags in articles to generate excerpts.
hexo-wordcount: Counts the word count of articles and provides writing reference.
hexo-browsersync: Provides a local preview server and supports real-time refresh.
hexo-admin: Adds a blog management backend to edit and manage articles in the browser.

5.2 Install and configure plug-ins

To install the Hexo plugin, you first need to use npm (Node.js package manager) to install the plugin package. For example, to install the hexo-deployer-git plug-in, you can execute the following command:

npm install hexo-deployer-git --save

Once installed, you need to configure the plugin in the Hexo configuration file (usually _config.yml). Taking hexo-deployer-git as an example, the configuration is as follows:

deploy:
  type: git
  repo: <your-repo-url>
  branch: <your-branch>

Each plugin may be configured differently, check the plugin documentation for details.

5.3 Use plug-ins to enhance blog functions

Once the plugins are installed and configured, you can start utilizing them to enhance the functionality of your blog. For example, if you install the hexo-generator-sitemap plugin, it will automatically generate a sitemap file to help search engines index your blog. If you use the hexo-tag-fontawesome plugin, you can easily add beautiful icons to your posts.

Each plugin has different functions and uses, choose the right one based on your needs to customize and improve your blog.

In summary, the Hexo plugin is a powerful tool for extending and customizing your blog. By installing and configuring the appropriate plugins, you can provide your readers with a better user experience and improve the functionality and usability of your blog.

6. Deploy Hexo blog

Now you have created great blog content and customized it. Next, we’ll learn how to deploy a Hexo blog to the internet so you can share your knowledge and insights with the world.

6.1 Deployment Options

There are a variety of deployment options for Hexo blogs, here are some common choices:

GitHub Pages: Hosting your Hexo blog with GitHub Pages is an easy and free way. You can store blog source files and generated static pages in a GitHub repository and provide online access through the GitHub Pages service.
Netlify: Netlify is a powerful static website hosting platform that supports automated deployment, custom domain names and HTTPS configuration. It integrates well with the Hexo blog, making deployment easy.
Vercel: Similar to Netlify, Vercel is another popular static website hosting platform that offers automated deployment and a high-performance global CDN.
Own server: If you have your own server, you can choose to deploy Hexo blog manually. This requires more technical knowledge and maintenance, but provides more freedom.

6.2 Automated deployment process

No matter which deployment option you choose, automating the deployment process is a good idea. Automated deployment ensures that your blog is automatically regenerated and deployed every time a new article or update is published, reducing the need for manual intervention.

The following is a general automated deployment process:

Set up continuous integration (CI): Use CI tools (such as GitHub Actions, Travis CI, etc.) to set up automated build and deployment processes.
Configure the build script: In the CI configuration, write the build script, which is responsible for generating the static website from the Hexo source files.
Trigger conditions: Configure trigger conditions, such as triggering the build process when you push a new article to your GitHub repository.
Automatic deployment: Set up deployment steps to automatically upload the generated static files to the hosting platform or server.
Notifications: Configure notifications to receive notifications or logs when builds and deployments are complete.

6.3 Domain name binding and HTTPS configuration

If you want your blog to have a custom domain name (such as www.yourblog.com), you need to bind the domain name. The steps for domain binding depend on the hosting platform you choose, but usually include configuring DNS records to point the domain name to your blog’s IP address or CNAME.

In addition, in order to provide a more secure access experience, it is recommended to configure HTTPS. Many hosting platforms (such as Netlify, Vercel) provide free SSL certificates to make your blog secure when accessed.

All in all, deploying a Hexo blog is an important step in exposing your content and insights to the world. Choosing the right deployment options, automating the deployment process, and ensuring domain binding and HTTPS configuration will make your blog more professional and reliable.

7. Optimization and maintenance

You have successfully created your own Hexo blog, but blog maintenance and optimization are equally important. In this section, we’ll discuss how to improve the quality and availability of your blog through SEO optimization, performance optimization, and regular backups and updates.

7.1 SEO optimization

SEO (Search Engine Optimization) is one of the key factors in improving your blog’s ranking in search engines. Here are some key steps for SEO optimization:

Keyword Research: Use keyword research tools to identify keywords relevant to your blog content. Include these keywords in your article titles, body text, and metadata.
Friendly URLs: Create short, descriptive URLs so search engines and visitors can more easily understand your content.
Metadata Optimization: Write engaging meta titles and meta descriptions to attract more clicks in search results.
Internal Links: Create internal links within articles to link related articles together to improve user experience and search engine rankings.
Image Optimization: Optimize images used in your blog, including compression and adding descriptive ALT text to images.

7.2 Performance Optimization

Blog performance is one of the keys to attracting visitors. Here are some suggestions for performance optimization:

Compress images and resources: Use the appropriate tools to compress images and other resources to reduce page load times.
Use a CDN: Use a content delivery network (CDN) to accelerate global access.
Caching: Use browser and server caching to speed up page loading.
Responsive design: Make sure your blog has a well-responsive design across different devices to provide the best user experience.

7.3 Regular backup and updates

Regular backups are key to protecting your blog from data loss. Regular backups include the following:

Database Backup: Back up your Hexo database regularly to prevent loss of articles and configurations.
Static file backup: Back up the generated static web pages so you can restore your blog if needed.
Plugin and Theme Updates: Regularly update Hexo plugins and themes to get the latest features and security fixes.
Check Links Regularly: Regularly check the links in your blog to make sure they are still working and there are no 404 errors.

In short, optimization and maintenance are an integral part of blog operation. With SEO optimization, performance optimization, and regular backups, you can ensure your blog gets better visibility in search engines while providing a great user experience.

8. Promotion and sharing

Now that you’ve created your Hexo blog, it’s time to share it with more people. This section explains how to promote and share your blog to attract more readers.

8.1 Social media sharing

Social media is a powerful promotional tool that can help you promote your blog to a wider audience. Here are some strategies for social media sharing:

Create social media accounts: Create accounts on popular social media platforms such as Twitter, Facebook, Instagram, and more.
Share regularly: Share your new articles and blog updates regularly. Use relevant tags and keywords so more people can find your content.
Engage with readers: Reply to comments and engage with your readers. This helps build a loyal readership.

8.2 Blog promotion strategy

In addition to social media, there are other blog promotion strategies to consider, such as:

Search Engine Optimization (SEO): Optimizing your blog content to rank better in search engines.
Guest Blog: Post guest posts on other relevant blogs to direct their readers to your blog.
Email Subscription: Provide an email subscription option to keep readers updated with your updates.

9. Summary and Outlook

9.1 Benefits brought by Hexo

With this guide, you learned how to create and manage your own blog using Hexo. Hexo brings many benefits, including:

Quick setup: Hexo’s simplicity and efficiency enable you to quickly create a blog website.
Customizability: You can choose your favorite themes and plugins to meet your individual needs.
Easy to maintain: Hexo generates static web pages and does not require complex background management.

9.2 Next step

After creating and promoting your Hexo blog, the next step is to continually update and maintain it, interact with readers, and continually improve the quality of your blog. You may also consider the following extensions:

Create more content: Publish valuable content regularly to attract more readers.
Connect with readers: Reply to comments to connect with your readers and build a loyal readership.
Learn More Tips: Learn more about Hexo and advanced blog writing techniques to continuously improve your skills.

10. Reference links and resources

In this guide, we’ve covered every aspect of how to use Hexo to build a personal blog website. If you need further help or resources, here are some helpful reference links and resources:

10.1 Hexo official documentation

Hexo’s official documentation is your best resource, providing detailed information about Hexo, configuration options, and a list of plugins. You can find the official documentation on the Hexo official website: Hexo Official Documentation

10.2 Hexo theme

If you want to choose a theme that suits your blog, there is a theme list on the Hexo official website. You can find themes of different styles here: Hexo theme list

10.3 Hexo plug-in

The Hexo community has developed many useful plugins to extend the functionality of your blog. You can find and install these plug-ins in the plug-in list of the Hexo official website: Hexo plug-in list

10.4 Hexo deployment options

Learn how to deploy your Hexo blog to different hosting services, including GitHub Pages, Netlify, and more. Check out the deployment section in the official Hexo documentation for more information.

10.5 Blog writing and SEO skills

If you want to improve the quality of your blog and attract more readers, you can find resources on blog writing and SEO (search engine optimization). There are many blogs and articles on the web that can help you learn these techniques.

10.6 Hexo Community

Join the Hexo community to exchange experiences, ask questions and find help with other Hexo users. You can visit Hexo’s official forum or find Hexo-related social media groups.

With these reference links and resources, you can better understand Hexo and continue to improve and expand your personal blog.

In short, Hexo is a powerful blog building tool that helps you create an excellent personal blog. I hope you find this guide helpful and I wish you great success with your blog!