preface

Maybe you want to have a blog of your own, so that you can show yourself in an interview or record your life, but you haven’t found the right platform. Maybe you have some of your own gadgets want to deploy to the server, but the server is a little expensive, part-time workers and reluctant, then Vercel platform may be a good choice for you, no money, access speed, domain also have! The main purpose of this article is to help friends who want to own their own blog, to provide a complete set of blog building solutions, so start now!

introduce

vercel: Vercel provides a cloud platform that can optimize the entire project development and deployment experience. It has powerful features worth exploring. It is free for personal use and provides domain access.

hexoHexo: Hexo is a nodeJs-based static blog site generator that uses scaffolding to make commands easy to use, straight out of the box, support rich themes, and support a high degree of customization, using markdown syntax. You can develop your own plug-ins to optimize your blog.

Set up

Before setting up the blog, we needed to do some preparatory work, starting with an account for the Vercel platform, then installing nodeJS and hexo-CLI scaffolding.

Registered vercel

1. First, on the Vercel website (Vercel.com/) sign up for a new account, sign up for…Github, Gitlab, or Bitbucket account to authorize, with a phone number attached. After registration, you can change your email address on the configuration page. It is recommended to use Github for authorized login. It will also be convenient to choose a project on Github for direct deployment.2, after the successful registration, you can log in the system, view and set the related things. Here are some of the things I’ve deployed so far.

Install hexo – cli

Before installing Hexo-CLI, make sure nodeJS is installed on your computer. When nodeJS is installed, NPM is installed, and hexo-CLI is installed.

Installation command: NPM install hexo-cli -g

To check whether the installation is successful, run the following command on the terminal:hexo -vCommand. If the following information is displayed, the installation is successful.

Vercel + Hexo creates a project

The Vercel platform supports a variety of project templates, including but not limited to Next-js, Nuxt.js, Hexo, Angular, and many other types. Here, of course, we chose the Hexo template.

  • Log in and clicknew projectTo create a new project
  • Enter the project selection, you can select the existing projects in git repository or the template project provided by the system. Here, we select the template project provided by the system, click on the bottom rightBrowse All TemplatesFind the Hexo template project.
  • After selecting the template, enter the choice of creating the project location. At present, the team project needs the professional version, which needs to be charged. Select the individual and clickPERSONAL ACCOUNTSelect button on the back.
  • You can select Github, Gitlab, Bitbucket, and select the location to save your repository. I’m going to go with Github.
  • After selecting Github, because I’m authorized to use Github when I log in, my Github name is displayed here. We’ll use the name hexo, but you can also use any other repository name, such as blog, myBlog, etc. Create private Git Repository can be checked or unchecked to Create a private Git Repository that will not be visible to anyone viewing your Github. Once you’ve made your selection, click Continue to go to the next step.
  • After the next step, you need to configure the PROJECT NAME, that is, the NAME field in the package. Json after the PROJECT is generated, we keep the default here, or you can fill in the NAME you like; FRAMEWORK PRESET defaults to Hexo, because we want to create Hexo’s blog; Custom packing commands can be configured in Build and Output Seettings. After the Override option is turned on, we can set our custom packing commands and the folder name for Output after packing.
  • For example, I used gulp to compress the code after packaging in my project, so the command here is customized
  • After setting, click Depoly to create the project and deploy it. In less than a minute, the project is deployed. You will be redirected to the congratulations-successful project creation page. Then you can click the Visit button to access, because Vercel provides a free domain name, so you can directly access.access
  • At this point, the Hexo blog was set up, the blog project was automatically created on GitHub, and the process was simple and user-friendly.

The basic use

  • Clone the blog project we created locally on GitHub:git clone https://github.com/BoWang816/hexo.gitWhen opened, you will find the following file directory:There are three main folders: scaffolds, Source, Themes, and the outermost _config.yml project configuration file.

  • We’ve already installed the scaffolding of hexo-CLI locally before we set it up, so we’re ready to use it. In the project folder, open the terminal and install the project dependency first. You can install the dependency by using NPM install, CNPM install, or YARN install.

  • After the dependency is successfully installed, go tohexo server -p $PORT$PORT is 4000 by default. You can also change the PORT. Hexo also provides an easy way to start naming:hexo s, accessed in the browser after startup:http://localhosst:4000Can be opened.

  • Hexo common command

More commands can be viewed here

  • Hexo s starts the local service

  • Hexo Clean Clears the cache

  • Hexo g packaging

  • Hexo New Post Article Creates an article named Article

  • Hexo New Page About Creates a routing page named About

  • Configure the topic

Currently, hexo officially has 330 themes to choose from, and GitHub also has a number of individual themes available, some of which can be installed and configured using NPM packages. By default, you can clone the contents of the themes repository directly into the Themes folder and configure them in _config.yml according to the theme name. The configuration mode of a blog topic depends on the configuration items in the topic. Another option is to install the NPM package, which does not require the themes folder. After installing the theme package in package.json, you can configure it according to the theme developer’s instructions.

conclusion

At this point, our blog is up and available to outsiders. Vercel also supports custom domain names. If you have your own domain name, you can also configure to use your own domain name for access, such as my wangboWeb. You also don’t need to worry about the deployment issue. Once you commit your new article to Git on GitHub, Vercel will automatically package it and send you an email telling you that the deployment was successful. You can visit the drop!

reference

  • vercel.com/
  • hexo themes
  • hexo config

More and more

Recommend the theme I’m using now: Butterfly