树莓派部署个人博客(hexo)

如何在黑夜里停止大脑在荒芜的草原上漂泊，抓紧时间学习。

---

最近搞到了公网IP，手头里还有一个域名，恰恰好好的手里还有一块吃灰的树莓派，嘿嘿。

所以呢我也没办法啊，只能部署一个博客了。OK FINE！

---

大致步骤：

1. 在Win10 上生成hexo 代码
2. 上传到树莓派上的Git 服务
3. 在树莓派上部署Nginx 服务
4. 在路由器上端口映射端口
5. 外网访问

让我们先来看第一步

1. 生成hexo 静态博客

1.1 安装环境

电脑上需要安装 Git NodeJs

下载之后一路安装，安装完成后我们打开刚刚Git的命令行，右击桌面空白处打开GitBash，输入如下指令查看hexo和npm的版本：

node -v
npm -v

返回版本信息就说明安装OK

1.2 安装Hexo

使用nodejs的npm安装包管理工具安装hexo，指令如下

安装指令：

npm install -g hexo-cli

查看是否安装成功：

hexo -v

出现版本信息说明安装成功

1.3 Hexo 生成网页

新建一个文件夹，右键打开GitBash，然后输入初始化指令

hexo init

输入后Git 会从远程拉取初始化代码下来，显示如下

然后文件夹内就有Hexo 源码了：

接下来输入下方指令

hexo生成网页指令：

hexo g

开启本地端口访问：

hexo s

在浏览器输入如下内容，就可以本地访问Hexo生成的网页代码了：

localhost:4000

---

hexo 有很多主题，可以去hexo 官网寻找主题

1.4 Hexo 图片插件（推荐）

一般使用Typora 编写md 文件，插入图片我们可以在设置里设置为在当前目录新建文档同名文件夹，使用相对路径：

但是Hexo 生成网页时，并不可以直接使用，如果只在config.yaml中更改post_asset_folder: true 是没用的

因为在Typora编辑器中，使用![](1/image.jpg)显示图片，而在hexo中，是使用![](image.jpg)。

所以我们需要下载一个插件 hexo-asset-image

这里我们安装插件hexo-asset-image:

npm install hexo-asset-image --save

打开 hexo安装目录下的_config.xml 文件，用 ctrl+f 找到 post_asset_folder属性，将其值修改为 true。

post_asset_folder: true

---

这里这个插件可能有问题，如果使用后，还是不显示图片，图片链接不正确，可以修改博客下这个插件的位置node_modules\hexo-asset-image 打开index.js 找到24行，修改为var endPos = link.length-1; 就可以了

然后就可以愉快的写文档啦！

2. 创建树莓派上的Git 仓库

树莓派镜像安装啥的就不说了，网上很多教程，我用的是Ubuntu Server版本。

首先安装好镜像后，换源，然后update 源，然后安装Git 服务（一般系统自带Git）

2.1 安装Git环境

安装

sudo apt install git

查看版本

git --version

2.2 创建Git 仓库

在树莓端安装Git 后，我们用Git 建立一个远程仓库，用来作为本地PC提交网页源码的中间站，这样更新网页，就可以直接git 上传代码即可（即使用指令hexo d），具体步骤如下：

创建一个文件夹存放Git 仓库

sudo mkdir -p /home/xx/myRepo	#创建一个文件夹
sudo chown -R $USER:$USER /home/xx/myRepo/	#给分到用户组
sudo chmod -R 755 /home/xx/myRepo/	#改变文件夹权限

• mkdir -p 选项 确保目录名称存在，不存在的就建一个。

建立Git仓库

cd /home/xx/myRepo/
git init --bare myblog.git

• –bare 选项代表生成的是一个裸仓库，是没有工作区的，只会记录git提交的历史信息，git log是可以看到各个版本信息的，但是没办法进行版本回退或者切换分支的操作，但是有一个好处是可以通过添加hooks钩子在其他目录下新建一个存放项目源码的文件夹，也就是说将git仓库与项目源码分离，这样推送的更新会马上显示到项目文件上

---

这里建立仓库后，需要再建一个文件夹给用于存放项目源码（也就是Web文件 | Nginx根目录）

sudo mkdir -p /home/xx/www/hexo

修改目录权限

sudo chown -R $USER:$USER /home/xx/www/hexo
sudo chmod -R 755 /home/xx/www/hexo

然后在仓库 myblog下创建一个钩子，将上传的项目文件传送到Nginx 根目录下，即 /home/xx/www/hexo 下面。

创建钩子文件：

sudo vim /home/xx/myRepo/myblog.git/hooks/post-receive

添加如下内容：

#!/bin/bash
git --work-tree=/home/xx/www/hexo --git-dir=/home/xx/myRepo/myblog.git checkout -f

保存后，添加可执行权限：

sudo chmod +x /home/xx/myRepo/myblog.git/hooks/post-receive

这样添加脚本后，每次上传Git 后，仓库内容就会被推送到/home/xx/www/hexo 目录下了

2.3 Git 仓库地址

项目的地址：ssh://用户名@ + 地址 + ：+ 端口 + 项目所在目录

内网 若端口是默认ssh的22，可省略
git clone ssh://ubuntu@192.168.1.110:/home/xx/myRepo/myblog.git

外网 假设端口为10000，映射树莓派ssh的22
git clone ssh://ubuntu@www.xxx.com:10000/home/xx/myRepo/myblog.git

3. 在树莓派上部署Nginx 服务

安装nginx

sudo apt install nginx

查看当前版本

nginx -v

上一步我们已经创建好网页根目录，并且已经做好文件传送钩子，这一步我们配置Nginx的配置文件，开启Nginx并将根目录映射到我们创建的目录下

设置Nginx 网页根目录：

sudo vim /etc/nginx/sites-available/default

修改root的值为我们设置的根目录文件夹/home/xx/www/hexo:

设置好后，重启Nginx 服务：

sudo service nginx restart

重启后我们输入树莓派IP，如下图，表示Nginx 服务启动成功：

下一步就是将Hexo 生成的网页文件上传至树莓派的Git 仓库了。

---

4. 上传Hexo 网页代码至树莓派Git

生成Hexo 网页：

hexo g

修改hexo git仓库地址，打开根目录下的 _config.yml文件：

部署Hexo 网页文件至Git：

hexo d

这样子 Hexo 生成的网页文件就上传到树莓派的Git仓库了，由于我们前面添加了Hook 脚本，所以文件会自动更新到我们设置的Nginx 的根目录下。这个时候我们再次访问树莓派IP 地址，就可以看到我们的网页了：

现在我们访问是在内网的，要想在外网访问，需要一个公网IP，最好用域名DDNS 解析到自家的路由器上，因为域名不会变，所以可以很好地访问我们的Web服务。

---

5. 在路由器上端口映射端口

在有公网IP的情况下，设置DDNS 将域名解析到自家路由器后，把树莓派的网站服务端口映射出去，就可以外网访问了。

这里就不再赘述DDNS 过程了。（最好将树莓派的IP设置为静态DHCP，将IP绑定到树莓派的MAC 地址，不然IP可能会变化）

我们进入路由器端口映射界面，将树莓派的Web 服务端口映射出去：

如图，我树莓派的IP 是192.168.1.31 ,然后本地端口是80（Http Web服务默认端口就是80）,然后外网端口我映射到888（这里可以随意端口，不要冲突就好）。

映射好后就可以通过 你的域名:888 访问网站了，至于为什么要加端口号才能访问，是因为家用的公网IP，一般80 端口（Http）和443 端口（Https）是封锁的，外网是访问不了的。所以无奈只能使用其他端口号了。

(如果直接将树莓派Web端口号映射到公网80 端口，我们在访问的时候就可以直接用域名访问了，前提是公网IP的 80端口没有被封)

6. 外网访问

我们打开手机，用蜂窝数据，访问域名，成功即OK！