Mac+Apache 实时预览 Hexo 博客

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

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

修改内容:

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

折腾开始

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

配置 httpd.conf

  1. 使用你喜欢的编辑器打开 httpd.conf
  2. 找到 Include /private/etc/apache2/extra/httpd-vhosts.conf
  3. 新建一行内容:Include /private/etc/apache2/extra/vhost-hexo.conf,将文件另存到桌面
  4. 备份 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

  1. 新建一个文件名字为 vhost-hexo.conf
  2. 复制以下代码至文件并保存

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <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>
  3. 拷贝到 /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

预览

  1. 重启 Apache

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

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

修改权限

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

自动化修改权限

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

加入插件 Shelljs

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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错误。

更简单的方案

  1. 关闭 Markdown编辑器的自动保存功能
  2. hexo clean
  3. hexo g
  4. hexo s

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