More recently, I’ve been working on my personal blog, which was based on the Hexo 3.x release. Over two years later, Hexo has been upgraded to the 5.x release, which brings a number of new features and greatly improved performance. My favorite Icarus theme has also been updated with a major version of the cyberpunk theme, which is amazing, but I don’t have to say much about it.

Now let’s quickly build a personal cyberpunk blog from scratch.

Step 1 Initialize the project using Hexo-CLI

Initializing the project is as simple as following the official website documentation. Note that Node and Git are mandatory. To avoid a global installation, use the NPX command:

$ npx hexo init <folder>
$ cd <folder>
$ yarn
Copy the code

Use the generate command to generate a static file, abbreviated as:

npx hexo g
Copy the code

Run the server command to start the local server to view the effect of the page.

npx hexo s
Copy the code

At this point, open localhost:4000 and a default landscape theme blog page will appear, as follows:

See the Commit for details

Step 2 Change the theme to Icarus

It’s also very easy to change the theme. Let’s look at the Icarus document. There are two main ways to change the theme. One is to install the theme using NPM, and the other is to download the source code and place it in the Theme folder. For simplicity, let’s start with the NPM approach:

$ yarn add hexo-theme-icarus
Copy the code

Use the hexo command to change the subject to Icarus:

$ npx hexo config theme icarus
Copy the code

The server is running on the same server.

The hint is clear, the dependency is missing, we add the dependency:

$yarn add [email protected] hexo-renderer-inferno@^0.1.3Copy the code

Try building and launching again, and the Icarus theme appears successfully:

Can’t wait to try out the cyberpunk theme, very simple, in _config.icarus.yml file:

# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
Copy the code

Trying to build and launch again, the cyberpunk theme emerged:

See this Commit for the code.

Step 3 Customize the configuration

Let’s modify the configuration files _config.yml and _config.icarus.yml to configure the website information.

These include logo, Favicon, Navbar menu and Links, footer, Donates (sponsorship messages, comment out useless payment channels), widgets.

Let’s take a look at widgets here. Widgets are widgets on a page that can be configured to change their location and details, depending on your preference for a three-column or two-column layout.

  • Profile widgets: This is the user information module, so you can change the information to your own, there’s a social_links, you can customize it, if you don’t have Twitter or FaceBook, you can comment out the information, you can add other links, Note that the icon is based on Fontawesome.

  • Neither Subscribe_email nor adsense are available and can be deleted

See the Commit for details.

The modified results are as follows:

Step 4 Use the Icarus theme in source style

There are two ways to use Icarus. The NPM package is easy to use, but it’s not easy to configure Icarus in a deeper way, especially since Icarus has always been source code. The corresponding NPM package is rarely mentioned, so we also use the source code to facilitate subsequent configuration.

First, delete the hexo-theme-icarus dependency, download the code from the ICarus repository, unzip it, and copy it to the Theme folder.

See the Commit.

Step 5 Configure an example

Let’s delete the default Hello World post and create one of our own.

Note the header profile information. In Icarus, you need to configure the cover option as follows:

---

title: ViteJS, the next generation of front-end build tools
date: 2021/ 03/08 11:"
categories:
- Front-End
- Tools
tags:
- Vite
- GitHub
- Translation
toc: true Whether to display the directory
thumbnail: '/images/vitet.png'  # the thumbnail
cover: '/images/vitet.png' # head figure
---

Copy the code

See the Commit.

Step 6 What should I do if the article is too long

The home page should show more articles, if the article is too long, the user will only see the same article, if we just want to let the user see part of the content to do? Very simple, add

See this Commit for the code.

Step 7 How to make the article two columns

At present, the article page is still the same as the home page, with a three-column layout. In order to effectively use the space, it is hoped that the article page can be arranged in two columns. We need to add the _config.post.yml file to the Icarus source folder and configure it as a two-column layout:

widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: false
        # Maximum level of headings to show (1-6)
        depth: 3
Copy the code

Here’s the effect:

See this Commit for the code.

Step 8 Deploy to GitHub Pages

This content will not be repeated, the official website has a detailed description of the operation method.

Configure the repository address for your GitHub Pages in _config.yml.

deploy:
  type: git
  repo: https://github.com/Ivocin/ivocin.github.io.git

Copy the code

Each time the build is complete, execute NPM hexo d for rapid deployment.

Step 9 Other functions

Of course, there are also features such as comments and Baidu statistics, which are described in detail on the Hexo website and in the Icarus documentation, but will not be covered here.

Other Content Management System (CMS) products

There are a lot of CMS products on the market with different focuses, listed as follows: Hexo, VuePress, Nuxt, Docsify, Docute, GitBook, Gatsby, Hugo, nex.js, Jekyll, WordPress, Drupal, Dumi.

Hexo had previously been Vue’s document hosting scheme, but the Hexo theme system was too static and relied too heavily on pure strings, hence VuePress. Of course, Hexo has many advantages, such as powerful Tag Plugins (but the private syntax also brings migration issues), a huge number of topics (currently 311, rich but of varying quality, no scoring, and a painful choice on the website), The latest 5.x version is also much faster, but in general, the blog is good enough. Other suitable bloggers are Gatsby, Hugo and Jekyll. I will not comment on them until I have used them in depth.

The choice of document class is not very difficult. VuePress for Vue and VitePress in the future. Dumi for React is fine.

In the future, I plan to try and compare other CMS products one by one, starting with Gatsby.

—- End —-

This article is participating in the “Nuggets 2021 Spring Recruiting activity”, click to see the details of the activity