使用nginx部署hexo博客框架搭建实践分享

December 28, 2023 5438

前言

因为前段时间有购买阿里云的轻量服务器同时个人对于服务器的使用也很有兴趣，原先是自己搭建博客项目通过nginx部署，但只能是静态而且也没太多时间去优化升级，浏览网页发现了博客框架hexo的官网，于是….

下载hexo脚手架

hexo官网
进入hexo官网，里面也有相关文档介绍，在下载之前最重要的就是需要node.js以及GIT的安装了，安装这些东西就不需要过多介绍了，直接快进下一步
（ps：node版本的选择可以选长期维护的，git的话就找到git官网去下就好了git下载，选“64-bit Git for Windows Setup.”这个下载就好了）
安装hexo脚手架
以下命令在hexo官网上是使用git命令行去安装的，但也可以使用自带的cmd去安装的

1
2
3
4
npm install -g hexo-cli
有可能会下载的很慢，可以先去下载淘宝镜像再执行上面一行命令应该会快很多
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后，使用 hexo -v 命令行就可以显示出相关版本号

就像这样
显示以上内容的话就说明，已经成功安装啦，进入正题
找一个磁盘D、E新建文件夹名称自定义就好了，因为是要部署在服务器上，以上操作是同步的，至于服务器安装的地方么，看个人配置吧，我是最基础的放C盘了。

1
2
3
hexo init
初始化hexo
安装完成会出现：INFO Start blogging with Hexo!

到此，就完成了安装hexo，在命令行运行hexo s/hexo server

因为hexo启动默认端口就是4000当然也可以更改端口号

1
hexo server -p 4001


因为我是使用了主题zhaoo，默认显示的会是hexo官方提供的默认模板
如果以上安装有不懂的可以点击这里，文章内容介绍的很清楚

安装nginx

1
2
3
nginx启动/停止
nginx -s stop //停止服务
nginx 		  //启动服务

因为需要部署在服务器，用的最多的就是nginx啦，
nginx下载

下载完成就会有以下的东西，
conf文件夹最重要的文件是nginx.conf
html文件夹里存放的就是项目包了
Nginx详解
完成以上步骤就是进入到最后阶段

生成hexo静态文件

hexo官网也有讲到部署，但实际上是部署在github代码库里，通过github的链接就能访问到你部署的博客
当然，个人还是觉得生成静态文件部署在nginx上就舒服很多

1
2
hexo generate 
执行此命令会生成项目静态文件夹，跟vue使用webpack打包一样

z

在这里插入图片描述

在这里插入图片描述
就像以上这样，弄好这些，复制剪切都行，放到nginx的html目录下就ok了
当然了，到这里，nginx都还没配置呢，运行nginx是肯定不行滴

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

#user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       81;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
server {
        listen       80;  # 定义端口号;
        server_name  127.0.0.1;# 定义服务名

        location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Headers' *;
        add_header 'Access-Control-Allow-Methods' *;
        add_header 'Access-Control-Expose-Headers' *;
            root   html/public; # 打包后的文件目录,这里是相对路径，也可以写带磁盘的绝对路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;	 # 防止刷新出现404
        }
      
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}


}

以上的这个是我个人的相关配置，来自conf文件夹的文件nginx.conf
完成了这些再去运行nginx命令就可以了，通过服务器的公网ip就可以访问到你刚刚部署的博客了
就像这样

补充

如果需要使用hexo的主题的话就例如我使用的主题，zhaoo主题作者的博客，里面详细介绍了主题的安装和使用
刚开始的时候我遇到的问题就是生成静态文件部署发现jq是未定义的，其实去到主题的配置文件cdn里修改一下jq的cdn链接再生成就好了
在这里插入图片描述
切换主题
在这里插入图片描述
刚刚修改cdn的文件在themes文件夹里的zhaoo文件夹的config.yml里
注意，写字段的时候写完字段和英文冒号记得空一个格噢！

以上内容是在本地计算机和服务器同步进行，我个人是将hexo项目放在码云平台上，在服务器通过git的方式获取新的修改，再次生成静态文件放入nginx的html文件夹当中，后续会尝试本地计算机通过内网穿透的形式达到启用本地计算机使公网能够访问博客内容，（先让我试试，然后分享实践内容）