本文使用中国移动CM311-1a机顶盒配合Ubuntu系统作为博客的服务器，通过本地Gridea SFTP的方法将静态网页上传至服务器内，并通过Nginx实现博客的局域网访问。

一、Gridea的安装

Gridea 是一个静态博客写作的跨平台开源客户端，使用该平台可以避免诸如Hugo、Hexo等静态博客生成工具的繁琐过程。且对于Git等操作可以实现图形化配置，一键Push至云端。这是其开源仓库链接。
其使用教程可根据官方Wiki配合菜单进行学习，这里着重记录一下有关Gridea SFTP上传至服务器的操作：

  1. 在服务器终端或路由器管理页面中获取服务器的IP地址，这里以192.168.0.16为例。服务器IP地址
  2. 在Gridea客户端中，选择远程->SFTP，如图一所示。
    在域名中输入http://+方才查询到的IP地址 ，如图中所示。
    对于端口选项而言，一般来说默认为22端口。
    Server一栏同样为IP地址。
    Username为服务器端Ubuntu的登陆用户名，同理Password为该用户名对应的密码。
    Remote Path为Gridea编译所得的静态网页将要发送至的地址，在这里作者设置为/home/username/Blog.

其他路径也无妨，只要在后续Nginx配置中同时进行修改即可。

至此，本地的Gridea配置暂时告一段落。

图1 Gridea客户端

二、服务器中Nginx的安装

（1）SSH配置

SFTP是SSH的一部分，且对于linux服务器来说，通过SSH进行远程访问才是常态。因此在这里首先通过systemctl status sshd命令检查服务器中是否装有SSH。

一般来说，Ubuntu系统默认会带有SSH，若系统未装有SSH，通过apt命令即可进行安装。

  • 通过sudo ufw enable开启防火墙。
  • 通过sudo ufw allow ssh打开SSH端口（默认为22）。
  • 通过sudo systemctl enable ssh设置SSH为开机自启，以便后续进行远程访问/传输。

（2）Nginx安装及配置

  1. 通过apt命令安装nginx[1]。
  2. 在/home/username/下创建Blog文件夹用来放置静态网页的文件。

    创建目录要与上文中Gridea中所配置相同。

  3. 通过vim /etc/nginx/nginx.conf打开Nginx配置文件。在http{}内添加如下代码即可。
     http{
     server {
         listen   80; //端口
         server_name 192.168.0.16; 	//访问的域名(本地博客这里设置为服务器的IP地址)
         root    /home/username/Blog;  //网站文件存放目录，要与上文所创建目录相同。
         location / {}
         error_page 404 /404.html;
             location = /40x.html { }
         error_page 500 502 503 504 /50x.html;
             location = /50x.html { }
         }
     }
  4. 设置完成后，通过sudo nginx -s reload命令来重启Nginx。重启完成后，查看是否有error/warning。若无即可在浏览器内通过192.168.0.16来验证nginx是否安装成功。

三、Gridea上传验证

在完成上述步骤后，在图一Gridea页面中通过左下角_检测远程连接_即可验证SFTP是否可以跑通。

关键在于Gridea中的配置及服务器端Blog目录的创建，与Nginx配置无关。

验证成功后即可点击图一中的上传按钮，将静态网页上传至服务器。

在本地端浏览器中通过192.168.0.16即可实现对博客网页的访问，如图二所示。

图二 博客网页访问

四、Blog搭配文件服务器使用

Nginx不仅仅作为web站点使用，也可以当做一个文件共享的使用，索引目录列表提供用户下载文件。Nginx自带的autoindex模块ngx_http_autoindex_module功能很简单，该模块是默认安装的。

（一）Gridea配置

首先，在下图的页面中，添加文件选项，并将其挂载至/download目录下，这样我们便可以通过域名/download或者直接在博客首页点击”文件“进入到文件服务器之中。
文件服务器

（二）Nginx配置

首先，通过sudo vim /etc/nginx/nginx.conf进入nginx的配置文件；
修改如下代码:

server{
        listen  80 ;
        server_name     100.122.130.115;
        #ip/根目录 为Blog的静态页面
        location / {
                root    /home/fbwenoll/Blog;
                }
        #ip/download地址为文件服务器
        location /download {
            #文件服务器挂在在Downloads文件夹上
            #改行代码请使用alias精确指定文件位置，不要用root命令（root指定的是上一层目录）
            #切记不要把服务器挂载在/Blog目录下！Gridea上传时会将其覆盖。
                alias   /home/fbwenoll/Downloads;
            #打开autoindex
                autoindex       on;
            #显示文件大小确切大小，单位为byte。若关闭则单位变为Kb/Mb/Gb
                autoindex_exact_size    off;
            #文件显示格式，可以是html | xml | json | jsonp
                autoindex_format        html;
            #显示时间戳
                autoindex_localtime     on;
            #编码格式
                charset utf-8;

                }

        error_page 404 /404.html;
                location = /40x.html{
                }
        error_page 500 502 503 504 /50x.html;
                location = /50x.html {
                }
        }

配置完成后通过sudo nginx -s reload重启nginx服务。

修改完成后即可在博客页面访问到文件服务器，如下图所示。

blog文件服务器2

（三）文件的下载/上传

  • 文件上传可通过Xshell配合Xftp或者命令行put命令等实现。
  • 文件下载可直接访问域名/download或在博客页面点击”文件“实现文件的下载。

五、通过TailScale实现远程访问

目前，我们所配置的blog+文件服务器只能用于同一局域网下，这里我们可以使用TailScale工具来实现虚拟局域网组网来打破这一限制。

Tailscale是一种基于 WireGuard 的虚拟组网工具，它能帮助我们把安装了 Tailscale 服务的机器，都放到同一个局域网内，即公司或者家里的 PC 机器连到同一网络，甚至云服务器都能放到同一个局域网。因此基于此方案，我们可以实现异地博客访问。TailScale配置方法如下：

  1. 在两台电脑上下载TailScale并登陆同一账号，可以使用微软/Github/谷歌等账号登陆。
  2. 打开Tail Sacle console即可查看被绑定设备的虚拟IP地址，如下图所示。
    tailscale

对于服务器而言，最好使用systemctl enable tailscaled 使tailscale服务可以自动启动。
如果使用TailScale，相对应的要将上文中设计IP地址的地方均替换为TailScale提供的虚拟IP地址。但是这样做会导致该博客只能在TailScale环境下使用，无法在局域网下使用。因此这里设置多个server_mame指向同一网站为宜。

（一）Nginx配置

首先，通过sudo vim /etc/nginx/nginx.conf进入nginx的配置文件；
将上文中Server{}区块中的代码复制一份，并仅对IP进行修改:

server{
        listen  80 ;
        #这里添加tailscale虚拟ip，与局域网ip以空格分隔开
        server_name     100.122.130.115 192.168.31.118;
        location / {
                root    /home/fbwenoll/Blog;
                }
        location /download {
                alias   /home/fbwenoll/Downloads;
                autoindex       on;
                autoindex_exact_size    off;
                autoindex_format        html;
                autoindex_localtime     on;
                charset utf-8;

                }

        error_page 404 /404.html;
                location = /40x.html{
                }
        error_page 500 502 503 504 /50x.html;
                location = /50x.html {
                }
        }

配置完成后通过sudo nginx -s reload重启nginx服务，大功告成。

六、结论

经由上述配置后，可以实现：

  • （虚拟）局域网内对博客的访问；
  • （虚拟）局域网内通过Gridea实现对博客内容的远程更新。
  • （虚拟）局域网内访问文件服务器对文件进行下载/上传。

在后续中如有必要，可购买域名通过DynDNS/No ip等工具将动态DNS绑定至特定域名内，来实现公网的访问。

在后续维护中，也可将服务器的图形界面关闭以节省性能，通过shell工具远程SSH实现对服务器的维护。

作者这里没有关闭图形界面，而是使用了VNC工具实现远程linux桌面访问，也可以使用TailScale虚拟组网。

关闭用户图形界面
sudo systemctl set-default multi-user.target
sudo reboot

开启用户图形界面：
sudo systemctl set-default graphical.target
sudo reboot

  1. https://devwl.com/posts/nginx+hugo/ ↩︎