Yige

Yige

Build
HomeArchives作品集

Building a Blog Record

#blog46
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The blog setup is based on Hexo and uses various resources including a template from Siricee and CDN services from Cloudflare. It provides a guide for initializing a local Hexo environment, including installing Node.js via NVM, setting up Hexo, and creating a blog directory structure. Key files include `_config.yml` for site configuration, `package.json` for application information, and a `scaffolds` folder for templates. To deploy the blog, users should create a GitHub repository, sync their local files, and use Vercel for deployment. It also addresses potential issues with Node.js version compatibility during deployment and provides steps for upgrading Node.js and Hexo, including commands for cleaning and regenerating the site. Finally, it suggests checking theme configurations if the deployed site appears blank.

Preface#

  • The blog is open-sourced on GitHub under the MIT License, thank you
  • The blog engine is based on hexo, thank you
  • The blog template comes from Siricee's Chic, thank you
  • The dynamic background comes from canvas-colorful-nest.js, thank you
  • The book list page comes from the plugin hexo-douban, thank you
  • The CDN acceleration service comes from Cloudflare, thank you
  • The deployment service uses vercel, thank you
  • The local environment is based on MacOS

Node Environment Preparation#

It is recommended to use NVM to manage node versions, repository address: nvm
After installation, open the terminal and execute node -v and npm -v, if there are no errors, the installation is successful.

Hexo Local Environment Initialization#

First, install hexo-cli npm install -g hexo-cli
The above code is for global installation. If you are familiar with npm, you can remove -g and use local installation.

After installation, you can execute hexo in the following two ways: npm hexo <command>
Or add Hexo to the environment variable so you can directly use hexo <command>

First, enter npm root -g in the command line to check the globally installed directory.
Then add the node_modules\hexo-cli\bin directory under that directory to the environment variable PATH.
After that, use hexo version to check if it was successful.

Local Site Setup#

Executing the command below will automatically create the <folder> directory and download the code. We assume the directory is blog.

hexo init <folder>
cd <folder>
npm i

The specified folder directory structure after execution:

blog
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

  • config.yml: Configuration information for the website. Most parameters can be configured here. If using a theme, modify according to the theme.

  • package.json: Information about the application, including the installation version information of hexo and its plugins.

  • scaffolds: Template folder. When you create a new article, Hexo will create files based on the scaffold, filling in some template content.

  • source: Resource folder where user resources are stored. Files/folders starting with _ (underscore) and hidden files will be ignored, except for the _posts folder.

  • themes: Theme folder. Hexo will generate static pages based on the theme.

Finally, execute

hexo clean	# Clear cache files (db.json) and generated static files (public). You can skip this on the first site setup.
hexo generate # Generate static files.
hexo server # Start the local server. By default, the access URL is: http://localhost:4000/.

Vercel Deployment#

  1. Create a new repository on GitHub, then sync the local blog directory files to the repository.
git init
git add .
git commit -m "init commit"
git remote add origin [email protected]:xxx/blog.git
git push -u origin main
  1. Register a vercel account at https://vercel.com/
  2. Import your repository into vercel, then follow the instructions step by step to deploy.

Issues#

Node Version Issues#

Error during deployment:

TypeError [ERR_INVALID_ARG_TYPE]: The "mode" argument must be of type number. Received an instance of Object
.....

Because the default node version in vercel may be relatively high, you need to check if it is compatible with the current hexo environment Node.js Version Limitations

Node Upgrade#

Since I was using nvm before, it's quite simple,

nvm ls-remote
nvm install --lts     # Install the latest lts version, which is recommended
nvm ls                # Check which versions are currently installed
nvm uninstall v8.12.0 # Find the old version and delete it

Hexo Upgrade#

  1. Upgrade hexo-cli globally.
  2. Use npm-check to check if there are any plugins in the system that need upgrading.
  3. Use npm-upgrade to upgrade the relevant plugins in the system.
  4. npm update -g to check for upgrades to npm itself.
npm install -g hexo-cli
hexo version

npm install -g npm-check
npm-check

npm install -g npm-upgrade
npm-upgrade

npm update -g
npm install -g npm

hexo clean # Clean hexo data and regenerate pages and deploy
hexo g -s
hexo d

Vercel Version Deployment Successful but Page is Blank#

  • Check if the configured theme is valid.
  • Check if the theme files, i.e., the theme configuration folder under the theme directory, have been uploaded to the GitHub repository.
  • If you need to delete the theme and pull it again, remember to keep the configuration files.
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.