本文所有的过程只能在 Mac 下才能使用，Linux 暂时没跑过还不知道，配合 hexo generate --watch 食用简直不要太舒服。

折腾了 HEXO 博客折腾了好几天，因为我是用的 vscode 来撰写博客，vscode 自带又自动保存功能，在开启了 hexo s 之后，使用{% note warning %}类似的标签功能的时候会报错，以及我自己在新增 Bootstrap 的效果，会编译错误，然后我需要不停的 clean 我的博客来查看我修改的代码在编译之后是否能通过，然后就越来越烦躁了每次都要 hexo clean; hexo g;hexo s;的命令查看最新的修改结果，就想到了能不能自己弄个服务器来来跑 public 文件夹中的最新内容（因为每次编译之后一定会生成一个 public 文件夹，其实也就是你的网站内容）。然后我就查到了在 Mac 电脑里默认就有安装好了 Apache 服务器，而且还是默认开机启动的。然后又开始折腾了。以下就我折腾出的总结步骤。

修改内容：

修改自动化脚本 2017-06-01 点击查看

折腾开始

打开 etc/apache2 文件夹 open /etc/apache2 并跳转到该文件夹cd /etc/apache2

配置 httpd.conf

使用你喜欢的编辑器打开 httpd.conf
找到 Include /private/etc/apache2/extra/httpd-vhosts.conf
新建一行内容：Include /private/etc/apache2/extra/vhost-hexo.conf，将文件另存到桌面

备份 httpd.conf，并将刚才编辑的 conf 文件替换原始文件

1
2
3

# 确保你已经在 /etc/apache2 目录下
sudo cp httpd.conf httpd.conf.bak
sudo cp ~/Desktop/httpd.conf httpd.conf

配置 vhost-hexo.conf

新建一个文件名字为 vhost-hexo.conf

复制以下代码至文件并保存

<VirtualHost *:80>
    DocumentRoot "/Library/WebServer/Documents"
    ServerName localhost
    ErrorLog "/private/var/log/apache2/localhost-error_log"
    CustomLog "/private/var/log/apache2/localhost-access_log" common
</VirtualHost> 
<VirtualHost *:80>
    DocumentRoot "/Users/{你的 mac 用户名}}/Documents/MyWorkSpace/HexoBlog/public/"
    ServerName hexoblog
    ErrorLog "/private/var/log/apache2/hexoblog-error_log"
    CustomLog "/private/var/log/apache2/hexoblog-access_log" common
    <Directory "/Users/{你的 mac 用户名}}/Documents/MyWorkSpace/HexoBlog/public/">
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Require all granted
    </Directory>
</VirtualHost>

拷贝到 /etc/apache2/extra/ 目录下，如果没有权限执行以下代码
1
sudo cp ~/Desktop/vhost-hexo.conf extra/vhost-hexo.conf

修改 host 文件

1
2
3

sudo vim /etc/host
# 添加一行
127.0.0.1 hexoblog

预览

重启 Apache
1
sudo apachectl restart
打开浏览器输入 http://hexoblog 即可畅快浏览了，前提是你的 public 文件存在，如果不存在就先编译一下咯。

然后，你就会遇到一个非常，非常，非常操蛋的问题了，没有权限。哈哈哈哈哈。。我就在这里折腾了好久好久。不停的修改配置文件，结果，非常简单，因为你的 public 目录 Apache 没有访问权限。

修改权限

参照vhost-hexo.conf中配置的目录，一级一级的查看目录权限，使用ls -l path的方式，如果看到对应的目录的权限最后一个没有x，使用chmod o+x folderpath的方式加入权限。
执行chmod -R o+x {public目录路径} 你可以选择直接将 public 目录直接拖到终端里面，路径自己就出来了
重启 Apache 就能看到效果了。

自动化修改权限

以上部分执行完能够在当次正常浏览网站，但是如果你是用了 hexo clean 之后 public 目录的权限又会出现问题所以需要加入 hexo 的插件来自动化解决。

加入插件 Shelljs

1 2	cd {Hexo 博客根目录} npm install --save shelljs

在你的博客根目录建立scripts目录，并加入一个 autochmod.js 文件，将如下代码贴入 js 文件中

require('shelljs/global');
try {
    var action = "none";
	hexo.on('generateBefore',function(){
		action = "generate";
	});
	hexo.on("exit",function(){
		if(action === "generate"){
			chmodX();
			action = "none";
		}
	});
} catch (e) {
	console.log("出现错误! 详情：" + e.toString());
}
function chmodX(){
	if (which('cmd')) {
		action = "none";
		echo(" In Windows.")
	}else{
		if(exec("chmod -R o+x public/").code !== 0){
			echo("chmod error");
			exit(1);
		}
		echo("=========== Change public Complete ==============");
	}
}

至此就可以执行完 hexo g 立即就能看到效果了。

如果你使用过hexo clean请先使用 hexo g编译一次，然后再使用hexo generate --watch来监测文件变动，否则会出现 apache 服务503错误。

更简单的方案

关闭 Markdown编辑器的自动保存功能
hexo clean
hexo g
hexo s

直到写完文章，保存，hexo服务器会自动刷新内容。

雨天的博客

Mac+Apache 实时预览 Hexo 博客