hexo生成静态页面时主页只显示dom文本无法正常显示

​ 今天打算将原来在windows电脑上部署的hexo博客给迁移到macbook上，却遇到了很多问题，在网上找遍了很多却没有合适的答案，算是一个踩坑经历，特此记录。其中最主要的便是，当我hexo d -g生成静态页面之后，打开页面，没有渲染的主页，只有dom文本，打开生成的html文件，和显示在网页上的一致。

主页无法显示的问题

在网页上的显示：

{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{% endblock %} {% block page_class %} {% if is_home() %}page-home{% endif -%} {% endblock %} {% block content %}
{% for post in page.posts %} {{ post_template.render(post, true) }} {% endfor %}
{% include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %}

​ 经过检索我现在知乎上发现了一个类似的问题-hexo页面无法正常显示：、

image

解决方案是：

hexo某个版本没有添加
hexo-renderer-ejs
hexo-renderer-marked
hexo-renderer-stylus
这几个插件

​ 然而当我安装了这个插件时，依然没有发生变化，虽然这个答案没有解决问题，但是却给了我启发，因为我迁移到macbook上的时候，安装的依赖都是最新的，于是我开始怀疑我的hexo版本问题。当我检查新旧两个版本的hexo时果然发生了差异

//输入hexo -v之后
hexo: 5.0.2
hexo-cli: 4.2.0
os: Darwin 19.6.0 darwin x64
node: 12.18.2
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

​ 下面是我原来windows电脑上的的package.json

  "hexo": {
    "version": "4.2.1"
  },
  "dependencies": {
    "hexo": "^4.2.1",
    ...
  }

​ 于是我删掉了安装的node_module,修改了package.json的hexo版本

//重新安装
npm install
//一键三连
hexo clean && hexo g && hexo d

​ 最终终于显示了原来的博客主页，欢迎大家来访问我的博客

博客图片

迁移博客的其他问题

​ 在我想下载回原来的依赖时，发现了一些warning，如下：

(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

​ 通过在网上搜索，发现是node版本的问题，我在mac上是用brew直接下载的最新版本v14，然后网上的答案显示v12版本的node是没有问题的，所以更新了node版本，解决了问题。

在mac上如何重新安装某一版本的node

完全卸载本地环境原来的node

在安装node前，首先要考虑后续会不会切换版本，如果需要，必须要求nvm在Node安装之前

• 先安装nvm

• 在通过nvm安装自己需要的node

  否则，在nvm安装之前的安装的node是不会被nvm管理起来的！

那如果已经安装了node，却还要使用nvm管理版本的话，怎么办？我很不幸的告诉你，你需要删除已安装的node。

下面是删除的Node和npm的命令，在终端中执行即可。

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

下载nvm，使用nvm来管理Node版本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

此处注意不要使用brew安装，否则会掉坑。

关闭终端nvm失效，区分zsh和bash

对于一般的终端，默认是bash窗口，所以在安装完nvm后，根据如下图提示，进行操作

image

配置环境变量(无 .bash_profile)

1. 添加 .bash_profile在终端键入touch ~/.bash_profile

2. 打开 .bash_profile在终端键入open -e .bash_profile

3. 在 .basn_profile中输入

   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
   [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
   

4. 配置生效

   source ~/.bash_profile
   

此时就有坑点了，如果你不进行以下的操作，你会发现，node -v命令只会在当前窗口生效，而其他窗口node -v会说找不到指令，你可以看看你的终端名称是否是zsh，这说明我们还需要配置环境变量

配置环境变量

1. 添加 .zshrc在终端键入touch ~/.zshrc

2. 打开 .zshrc在终端键入open -e .zshrc

3. 在 .zshrc中输入

   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
   [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
   
   

4. 配置生效

   source ~/.zshrc
   

切换node版本失效

# 将要切换的版本设置为default
nvm alias default 8.16.0
# 切换版本，这样在那个窗口都可以使用切换后的版本
nvm use 8.16.0

zsh compinit提示“insecure directories”怎么办

当执行source ~/.zshrc之后显示如下提示：

zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?

解决方法如下：

zsh配置的所属权限问题。执行如下命令修改权限

$ cd /usr/local/share/zsh
$ sudo chmod -R 755 site-functions

再次执行 source ~/.zshrc，如果问题还未解决，这时你就需要修改 site-functions 的所有者

• OSX 10.9及以下系统执行如下命令：

$ cd /usr/local/share/
$ sudo chown -R root:root site-functions

OSX 10.9以上系统执行如下命令（user:staff 是 OSX 系统默认权限）：

$ cd /usr/local/share/
$ sudo chmod -R 755 zsh
$ sudo chown -R root:staff zsh

再次执行 source ~/.zshrc

终于搞定了

经验教训

迁移项目的时候，一定要注意环境的配置，依赖的版本，依赖不是最新的才是最好用的，最好能够保持原来的版本号，不要擅自更新！！！