Hexo is a fast, concise, and efficient blogging framework that uses Markdown (or other rendering engines) to parse articles and generate static web pages from its many beautiful themes in seconds. It is this simplicity, free and extensible nature that has made Hexo increasingly popular with programmers. Here we go through a detailed tutorial to show you how to set up and deploy a personal website (blog) in 5 minutes.

We used the Hexo framework to build the blog site and hosted it on LeanCloud’s “Cloud engine” for final deployment. Let’s see what the specific steps look like.

1. Install dependencies

Hexo relies on Node.js and Git, and if you already have these two prerequisites installed on your computer, you can go straight to the next step. If you do not have the required program installed on your computer, please refer to the official guide to complete the installation.

2. Install Hexo

After the dependency installation is complete, Hexo can be installed using NPM.

$ npm install -g hexo-cli
Copy the code

3. Download the blog project template

The Hexo command line tool can create a typical blog project in which Hexo renders article content in Markdown format by using a specific theme to generate static files. Typically, you just need to deploy these static files to a remote server to get a usable site.

LeanCloud’s cloud engine provides excellent web hosting capabilities, as well as comprehensive log collection, monitoring and maintenance services, which require a site to support a few dynamic management interfaces (already implemented in the cloud engine project framework) in addition to basic static content.

To this end, we added a small number of dynamic response files required by LeanCloud cloud engine on the basis of Hexo project framework to form an open source project template, Hexo-Engine. Developers can download the project locally and start building their own blogs from there.

$ git clone [email protected]:leancloud/hexo-engine.git
Copy the code

After downloading the template, we need to install node.js project dependencies for subsequent operations:

$ cd hexo-engine
$ npm install
Copy the code

4. Add content

The Hexo framework places all blog posts in the source/_posts directory. We go to the hexo-engine directory and add a new blog post by executing the hexo new command.

For example, if we want to add a blog post about “Quick build your personal site in 5 minutes”, we can run the following command:

$ cd hexo-engine
$ hexo new "build your own website in 5 minutes"
Copy the code

After executing, we can see the following result information:

INFO  Validating config
INFO  Created: ./hexo-engine/source/_posts/build-your-own-website-in-5-minutes.md
Copy the code

Just go ahead and edit the new Markdown file (build-your-own-site-in-5-minutes.md).

5. Run it locally

Once the article is edited, we can run the hexo generate command to generate static files and hexo Server to start the local server to see the effect in action. On the command line, enter the following command:

$ hexo g
$ hexo s
Copy the code

Note that the g and S are short for generate and server, respectively. After executing, you should see the following information:

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at <http://localhost:4000> . Press Ctrl+C to stop.
Copy the code

Open it in your browser (http://localhost:4000) and see our own blog site up and running.

6. Deploy to LeanCloud

So far, our personal site has worked, but the only regret is that it has not been deployed to the Internet and cannot be freely accessed by other users.

Here we use the LeanCloud cloud engine service to complete the final step of deployment for free. First of all, we will apply for a LeanCloud account and create an application. This part is relatively easy to operate. You can log in to the official website of LeanCloud by yourself.

6.1 Preparations: Install the CLOUD Engine CLI tool

We first need to install the command line tool of the cloud engine (refer to the official website documentation):

  • MacOS users can run Brew Install lean- CLI;
  • Windows users can download the latest 32-bit or 64-bit MSI installation package based on the operating system version from the GitHub Release page.
  • Linux users can download the DEB package or pre-compiled binaries from the GitHub Releases page to install it.

Next we need to log in to our LeanCloud account (follow the instructions to select the area and enter the LeanCloud username and password) :

$ cd hexo-engine
$ lean login --region US
Copy the code

To associate your current project with the LeanCloud application, type the following command:

$ cd hexo-engine
$ lean switch
Copy the code

Select the region and target application as prompted.

For details about how to use the command line tool of the cloud engine, see the command Line Tool CLI Usage Guide.

6.2 Local Running

Run the following command in the project directory:

$ cd hexo-engine
$ lean up
Copy the code

Open http://localhost:3000 in your browser and you can see the first page of the blog site.

6.3 Deployment to the Cloud

If the previous steps are all right, we can deploy the current project to the LeanCloud cloud. On the cli, run the following command:

$ cd hexo-engine
$ lean deploy
Copy the code

Note that before deploy, we can delete the local public directory to avoid unnecessary file uploads. The result of deploy should look like this:

[REMOTE] [node.js] Using Node.js V12.19.0, Node SDK 3.7.0, JavaScript SDK 3.15.0 [REMOTE] version 20201118-064943 Build Complete [REMOTE] Start deploy 20201118-064943 to web1 [REMOTE] Creating a new instance... [REMOTE] Starting a new instance... {"runtime":"nodejs-v12.19.0","version":"3.7.0"} [REMOTE] Updating the cloud function information... [REMOTE] Deployment complete: One instance is deployed successfully. [INFO] Deleting temporary filesCopy the code

Go to the console of the LeanCloud cloud Engine and set an access domain name for the currently deployed cloud engine instance. The operation path is shown below:

We opened hexo-engine.avosapps.us in our browser to see the first page of the release.

With that done, our personal blog has been successfully launched! By some estimates, the whole process should take no more than five minutes, excluding the time it takes to create the account and download the tool.

7. Other

7.1 Customization

We can customize the current blog site by modifying the _config.yml file in the project root directory, such as changing the site title, description, keywords, and so on. See the official guide here for details.

7.2 Add comment function to blog

We recommend using Valine as a comment plugin. For more information, see this blog post.

7.3 Using more Themes

There are a number of developers who have contributed beautiful themes to Hexo, and replacing a new theme is very simple, and interested readers can read the documentation here.