步骤/目录:
1.静态博客
    (1)windows机器安装hexo
    (2)树莓派安装nginx并在局域网访问
    (3)修改frpc.ini并开放端口、公网访问
    (4)写作并发布博文
    (5)使用https协议与ssl证书
2.可评论的博客
    (1)安装typecho依赖项并配置
    (2)安装typecho
    (3)https设置
3.其他
    (1)md生成摘要
    (2)typecho添加备案号
    (3)调整允许上传的附件大小

本文首发于个人博客https://lisper517.top/index.php/archives/13/,转载请注明出处。
本文的目的是搭建能从外网访问的个人博客。
本文实验日期为2022年2月11日。使用的是树莓派4B(内存8G版),系统为Pi OS 32位桌面版(2022年1月28日更新,镜像名 2022-01-28-raspios-bullseye-armhf.img )。frps运行在阿里云服务器(系统镜像Ubuntu 20.04)。

1.静态博客

由于树莓派性能较弱、不太适合部署hexo(当然也可以这样干),所以选择在windows机器上写作,生成静态网页后上传到树莓派用于访问。

(1)windows机器安装hexo

nodejs官网下载安装node.js,注意不要额外安装其他工具,其中有新版python等,容易搞乱环境。

然后在cmd中输入以下命令安装hexo:

npm install -g hexo-cli

(2)树莓派安装nginx并在局域网访问

树莓派安装nginx:

apt install nginx

设置自开启并检查一下服务开启情况:

systemctl enable nginx
systemctl status nginx

nginx已成功开启,状态为active。

接下来打开80端口(若如后文一样使用了frp则这里也可以不打开,不过笔者需要从局域网访问,这里就打开了):

ufw allow 80 #没有装ufw的用其他工具打开

访问默认界面:win10机器与树莓派连接到同一wifi下,win10机器在浏览器输入 树莓派本地ip 或 树莓派本地ip:80 即可看到nginx默认页面:

#默认页面内容
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

该页面文件在树莓派的/var/www/html下,名为index.nginx-debian.html。之后自己生成的静态页面也放在该文件夹下(不同的设备可能不一样,如果是刚装上的nginx,这个文件夹在/etc/nginx/sites-available/default中查看,root后)。

(3)修改frpc.ini并开放端口、公网访问

在树莓派上开启frpc、在云服务器上开启frps参考 树莓派+云服务器,gogs+frp搭建私有git

其他教程中教的比较复杂,这里用最简单的方法设置frp。另外,以下操作前最好买一个域名(记得及时在工信部和公安局网站备案)。
在树莓派的frpc.ini中添加服务:

[pi4B-blog-http-1]
type = tcp
local_ip = localhost
local_port = 80
remote_port = 80

本例中的云服务器80端口并没有使用,所以可以直接用于frp穿透。
之后检查一下端口,云服务器的80端口需要开放。记得云服务器的端口在防火墙中添加规则,不要直接运行ufw allow。另外,禁用树莓派的80端口只会使得局域网访问不可用,frp穿透还是在的(frp使得树莓派以为从公网访问80端口就是在本地访问80端口)。
最后验证一下:浏览器访问买的域名(该域名已经绑定到服务器ip。没买域名就直接访问 服务器ip ),出现nginx默认页面即可。

(4)写作并发布博文

这里介绍一下hexo初次使用的步骤。

在win10机器上打开命令行,进行如下操作:

d: #进入D盘。想放在其他盘也可以
mkdir myblog #放博客的文件夹
cd myblog
hexo init #开始搭建。可能会提示vulnerabilities,不用管。该命令只需要运行这一次
hexo new 标题 #新建一篇博文。所有博文都在myblog\source\_posts中
hexo s #开启hexo服务器,默认使用本地4000端口(用于查看网页)。需要在D:\myblog中使用

输入hexo s后这个cmd界面不要关,浏览器输入 localhost:4000 即可在本地访问个人博客。然后就是编辑.md文件、写博客。笔者使用的是vscode,加以下扩展:

Auto Rename Tag #自动更改成对的html标签名
Draw.io Intergration #好用的画图软件。博客中需要思维导图时可以用
Markdown All in One #.md扩展排行榜第一位
Markdown Preview Enhanced #.md预览,在右上角会出现 MPE:打开侧边预览 的选项。不过这个和hexo网页看到的有些地方不一样,也可以不装,直接在网页查看

Markdown语法可查看Markdown 官方教程,之后就可以愉快地写作。
写作完成,在本地hexo网页查看觉得效果不错,就可以生成静态网页、传到树莓派上了。win10机器上新开一个命令行:

d:
cd myblog
hexo g #生成静态页面。在myblog\public中

接下来就需要将public文件夹下的所有文件传到树莓派上了。这里使用WinSCP(下载地址)。也可以用scp命令或PuTTY带的pscp命令,但是比较麻烦,还是图形化的工具好用。
上传之前用PuTTY登录树莓派看一下目录在不在,并修改权限:

#这里使用root用户
cd /var/www/html
chmod -R 755 /var/www/html

之后打开WinSCP,连接到树莓派上有sudo权限的用户。将win10机器上public文件夹下的所有文件复制到树莓派的/var/www/html/文件夹下。然后就可以在浏览器输入域名访问个人博客。
最后,WinSCP上传完成后,可以再次修改/var/www/html的权限。经过测试,705即可访问:

chmod -R 705 /var/www/html

最后提醒一下,上文中介绍的方法只用到了http协议,网页内容比较容易被篡改等(比如修改网页链接为恶意链接),所以不建议长期使用。下面介绍https协议与ssl证书。

(5)使用https协议与ssl证书

简单地说,https比http更安全。ssl证书是配置https需要用到的,在阿里云购买域名后可以顺便购买ssl证书(1700¥一年)。由于太贵,这里在阿里云上选择免费的ssl证书(建议仅用于个人或测试使用),即 DV单域名证书【免费试用】 ,一年能领20张证书(1张证书=1个域名的1年认证),个人来说已经够用了。申请完成后,下载证书(选择Nginx类型)并解压,得到.key文件和.pem文件。接下来到树莓派上进行配置。
首先查看ssl模块:

nginx -V

如果configure arguments:后出现了--with-http_ssl_module就说明已安装。如果没有,建议重新apt install nginx一下,或者参考其他文章从源码安装nginx。

然后需要把.key文件和.pem文件上传到树莓派。这里先新建一个文件夹:

mkdir /home/www-data/ssl_cert

这里的www-data是nginx默认使用的用户(在/etc/nginx/nginx.conf中user对应的),没有这个文件夹就mkdir并chmod和chown。
接着就用WinSCP将两个文件传到该文件夹中(记得chown和chmod 444一下)。

然后在树莓派的frpc.ini中添加服务:

[pi4B-blog-https-1]
type = tcp
local_ip = localhost
local_port = 443
remote_port = 443

最后配置nginx,目标是通过域名访问时,http请求会重定向到https(参考了nginx从http跳转到https)。nginx的其中一个默认配置文件为/etc/nginx/nginx.conf

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf_backup #改动之前先备份
nano /etc/nginx/nginx.conf

在http的{}里,最后加上一个server:

        server {
                listen 80;
                listen 443 ssl;
                server_name www.lisper517.top;
                ssl on;
                ssl_certificate .pem文件路径;
                ssl_certificate_key .key文件路径;
                charset UTF-8;
                ssl_session_timeout 5m;
                ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
                ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
                ssl_prefer_server_ciphers on;
                location / {
                    root /var/www/html;
                }
                error_page 497 https://$host$request_uri; #http请求发送到https端口会产生nginx 497错误,这里改写了请求的协议
        }

记得把 www.lisper517.top 换成自己的域名。
然后把/etc/nginx/sites-available/default里的内容都注释掉(记得备份。如果后面出错可以试试把这个文件还原)。
最后使用nginx -t检测一下配置文件有无问题(每次更改nginx配置后都推荐使用这个命令测试一下),有问题该命令会自动提示。
一切顺利的话,这时访问 https(或http)://自己的域名 就可以看到/var/www/html下自己的博客了,都会跳转到https,左上角提示为安全网站。配置https时,由于证书上的域名要和访问的域名匹配,所以访问本地的树莓派ip会提示链接不安全(不知道为什么,局域网访问http地址不会跳到https)。如果从公网访问时也提示链接不安全,就要看一下server_name和浏览器上看到的ssl证书提供的域名是否一致,是不是忘加www.等细节。

最后,刚开始使用nginx时nginx.conf最好原版备份一份,这里能访问hexo的也备份一份。

2.可评论的博客

上一种方法可以概括如下:win10机器上用hexo生成静态网页文件,上传到nginx的网页根目录。优点是消耗树莓派资源少,缺点是不可交互(Hexo的评论功能稍微麻烦一点)。博客毕竟还是要有评论功能才感觉热闹一点。下面介绍一款动态博客搭建软件:typecho。其十分轻量级(下文下载的tar.gz包大小只有470k左右),在树莓派上运行正合适。下面的流程主要参考了树莓派搭建个人博客服务器(Nginx+PHP+mysql+typecho)。顺便解释一下LNMP环境,即linux+nginx+mysql+php,linux是系统,nginx负责请求和响应,mysql是数据库,php解释动态网页。另外,也可以不在树莓派上运行typecho,而在github上托管一个博客,这里就不介绍了。

(1)安装typecho依赖项并配置

typecho是基于php的,需要nginx、php、mysql环境。nginx安装参考上文,mysql安装参考 树莓派+云服务器,gogs+frp搭建私有git ,提醒一下现版Pi OS只能下mariadb-server,没有mysql了,不过二者可以说是同卵双胞胎。typecho也可以用sqlite,不过笔者之前为gogs安装过mariadb了,所以这里就不换了。

安装php-fpm及其他依赖,并重启php-fpm:

apt install php-fpm
#此处信息提示安装的是php7.4系列

另外,还要安装php-mysql(使用sqlite就安php-sqlite):

apt install php-mysql #提示安装的也是php7.4-mysql
service php-fpm restart #重启一下服务

安装完成后,开始配置,记得修改前最好备个份。
这里只配置了nginx(这里的nginx是重新下的,其他配置没改),php配置不变。输入nano /etc/nginx/sites-available/default,将:

        index index.html index.htm index.nginx-debian.html;

改为:

        index index.php index.html index.htm index.nginx-debian.html;

在这个server的{}最后加上:

        location ~ .*\.php(\/.*)*$ {
                fastcgi_pass unix:/run/php/php7.4-fpm.sock; #注意自己的php-fpm版本
                include fastcgi_params;
                set $path_info "";
                set $real_script_name $fastcgi_script_name;
                if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {
                        set $real_script_name $1;
                        set $path_info $2;
                }
                fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
                fastcgi_param SCRIPT_NAME $real_script_name;
                fastcgi_param PATH_INFO $path_info;
        }

保存后退出,配置完成。这时可以测试一下,重启nginx,service nginx restart,在/var/www/html下新建一个myweb.php文件,内容为:

<?php
        phpinfo();
?>

然后在浏览器输入 树莓派ip/myweb.php ,就会显示经典的php信息页面。从这里也可以看出动态页面的意思,整个页面只有一个函数,交给php解释后,返回给nginx,显示在浏览器上的就是一大堆信息。

(2)安装typecho

typecho跑在/var/www/html中(也可以自己设置其他文件夹,新手建议按本文配置),这样就可直接访问到博客。进行如下操作:

chmod 755 -R /var/www/html #之前把html设成了705
rm -r /var/www/html/* #清空html前记得备份
cd /var/www/html
wget https://typecho.org/downloads/1.1-17.10.30-release.tar.gz
tar -zxvf 1.1-17.10.30-release.tar.gz
rm 1.1-17.10.30-release.tar.gz
mv ./build/* .
rmdir build
service nginx restart

接下来在网页输入 树莓派ip ,会自动跳转到 树莓派ip/install.php 页面(没有自动跳转可能是因为没有在nginx的index后加上index.php,这时可以手动输入 树莓派ip/install.php 进入该页面),开始配置typecho。数据库适配器选择mysql适配器(这里显示空可能是因为没有安装php-mysql),数据库用户就是root,库名为默认的typecho。如果不放心也可以自己新建用户,在这里改上(mysql新建用户的命令参考 frp+云服务器搭建能从外网访问的redis、mysql)。网站地址填自己的域名,填完其他的。
然后记得登录mariadb,创建typecho库:CREATE DATABASE typecho;
最后点击 开始安装 。提示安装程序无法自动创建 config.inc.php 文件,需要手动创建,这是因为/var/www/html的others权限为5(r-x),自己用root创建/var/www/html/config.inc.php即可,最后安装成功。

补充一点typecho的说明:
插件位置在 /var/www/html/usr/plugins(或者自己设置了其他根目录,这里用的是/var/www/html/);主题位置在 网页根目录/usr/themes;附件位置在 网页根目录/usr/uploads。最后把网站风格设置成喜欢的,就可以开始写博客了,未注册的用户也可以在博文下面发表评论,促进交流。

(3)https设置

最后,想让typecho搭建的php网页也使用https协议,就在nginx中如上文 1-(5).使用https协议与ssl证书 类似设置,区别是/etc/nginx/nginx.conf中最后加的server稍微改了一下:

        server {
                listen 80;
                listen 443 ssl;
                root /var/www/html;
                server_name www.lisper517.top;
                ssl on;
                ssl_certificate .pem文件路径;
                ssl_certificate_key .key文件路径;
                charset UTF-8;
                ssl_session_timeout 5m;
                ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
                ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
                ssl_prefer_server_ciphers on;

                index index.php index.html index.htm index.nginx-debian.html;
                location ~ .*\.php(\/.*)*$ {
                        fastcgi_pass unix:/run/php/php7.4-fpm.sock; #同样注意php-fpm版本
                        include fastcgi_params;
                        set $path_info "";
                        set $real_script_name $fastcgi_script_name;
                        if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {
                                set $real_script_name $1;
                                set $path_info $2;
                        }
                        fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
                        fastcgi_param SCRIPT_NAME $real_script_name;
                        fastcgi_param PATH_INFO $path_info;
                }

                error_page 497 https://$host$request_uri;
        }

记得把 www.lisper517.top 换成自己的域名。
同样注释掉/etc/nginx/sites-available/default,之后就可以访问https的博客,并且所有http请求会自动跳到https。

3.其他

(1)md生成摘要

如果不做处理,主页默认会显示文章全文,太长了。在文章中添加一行 <!-more-> (一个短横线换为两个短横线)即可指示文章的摘要处。比如在每篇文章的目录后加,那么主页只会显示文章的标题和目录,更加方便。

(2)typecho添加备案号

如果有域名,需要在页面底部加备案号。在typecho后台,点击 控制台-外观,编辑footer.php(或者直接改源文件),在页面底部标签(footer标签)里添加一个div标签:

<div class="blog-text-center"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow"><?php $this->options->bei(); ?></a></div>

然后在functions.php中的themeConfig里添加2个函数:

$bei = new Typecho_Widget_Helper_Form_Element_Text('bei', NULL, NULL, _t('工信部备案号'), _t('留空则不显示'));
$form->addInput($bei->addRule('xssCheck', _t('工信部备案号不能使用特殊字符')));

之后就可以在后台的 设置外观-设置外观 里找到输入工信部备案号的地方,输入即可。

(3)调整允许上传的附件大小

需要修改php-fpm和nginx的设置。
修改/etc/php/7.4/fpm/php.ini,将下面三个参数修改为:

upload_max_filesize = 50M; #上传文件上限
post_max_size = 50M; #post请求上传文件上限
max_execution_time = 600; #php页面最长执行时间

修改/etc/nginx/nginx.conf,将:

        server {
                listen 80;

改为:

        server {
                client_max_body_size 50m;
                listen 80;

这样在typecho中最大能上传50M的附件。

标签: frp, 树莓派, hexo, nginx, blog

仅有一条评论

  1. 一位不愿透漏姓名的张先生

    其实,静态博客不是不可以加评论功能的,页面实现也不是太难,实现过程大概就是在页面加载完成后,js执行查询功能查询该博文的评论数据,然后将数据渲染出来,这里应该用关系型数据库,例如MySQL,之类的,你要是有兴趣的话,我可以给你弄一个评论的后台支撑系统,

添加新评论