閱讀本文你將了解的知識點：

• 了解樹莓派做網頁服務器的流程框架
• 使用Hexo生成靜態網頁
• 使用樹莓派做服務器部署靜態網頁
• 穿透內網從外網訪問部署的網頁

樹莓派做服務器運行Hexo博客網頁

? 手頭有一塊樹莓派4B，為了不讓樹莓派閑著，我用它做一個網頁服務器，掛載自己的個人網頁，分享一下自己的部署程序

1.服務器框架

? 配置樹莓派網頁服務器前首先要了解一下整體的框架，然后按照框架的內容進行服務器配置，這里我做了一個框圖方便大家理解搭建樹莓派網頁服務器需要

的步驟

具體框架主要是以下幾個部分：

• 本地PC端：

  ? 首先要在本地PC端建立一個Git倉庫，安裝Hexo相關依賴，使用Hexo生成靜態網頁代碼，然后通過Git上傳到遠程倉庫

  1. Hexo 是一個基于nodejs 的靜態博客網站生成器，用戶可以借助該工具快速生成網頁

  2. Git是一種分布式的版本管理系統，由Linux的創造者Linus所創建，Git可以幫我們做很多事情，比如代碼版本控制，分支管理等，其主要包含的幾個功能有遠程倉庫，克隆，本地倉庫，分支，提交，拉取，合并，推送等，

• 樹莓派端：

  ? 在樹莓派端需要建立一個Git遠程倉庫，用于接收網頁資料，同時樹莓派要安裝Nginx，用于將本地網頁映射到內網IP上去

  Nginx是一款高性能的http 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器，可以作為一個HTTP服務器進行網站的發布處理，以及作為反向代理進行負載均衡的實作

• 外網訪問：

  ? 如果只映射到內網IP，那訪問服務器只能在內網訪問，這顯然不是我們所期待的，所以后面的步驟就是將外網的IP通過埠映射，映射到內網IP，之后互聯網的其他用戶就可以通過外網的IP訪問服務器了，但訪問的瀏覽器還是通過地址訪問，安全性比較低，因此我們在加入一個域名決議，將域名決議到外網IP同時加裝SSL證書進行加密保護！

  內網（局域網）和外網（廣域網）的區別：

  1. 范圍大小
     局域網（LAN）相對于廣域網（WAN）而言，主要是指在小范圍內的計算機互聯網路，這個“小范圍”可以是一個家庭，一所學校，一家公司，或者是一個政府部門，BT中常常提到的公網、外網，即廣域網（WAN）；BT中常常提到私網、內網，即局域網（LAN），

  2. IP地址
     廣域網上的每一臺電腦（或其他網路設備）都有一個或多個廣域網IP地址（或者說公網、外網IP地址），廣域網IP地址一般要到ISP處交費之后才能申請到，廣域網IP地址不能重復；局域網（LAN）上的每一臺電腦（或其設備）都有一個或多個局域網IP地址（或者說私網、內網IP地址），局域網IP地址是局域網內部分配的，不同局域網的IP地址可以重復，不會相互影響

  SSL協議：

  SSL (Secure Sockets Layer 安全套接字協議)和繼任者傳輸層安全（Transport Layer Security，TLS）是為網路通信提供安全及資料完整性的一種安全協議，TLS與SSL在傳輸層與應用層之間對網路連接進行加密，簡單來說HTTPS中的S就是SSL

2.本地Hexo設定

本地Hexo設定就是下載Hexo開發需要的依賴，下載配置完成后使用Hexo生成一個靜態網頁，具體步驟如下：

2.1 安裝GIT

去官網安裝Git工具，然后安裝，和普通軟體安裝方式相同，打開安裝包后一路回車，直到安裝完成，官網鏈接：Git Windows Download；

安裝完成后在桌面右擊就會出現GitBash控制臺，代表安裝成功

2.2 安裝NodeJs

Hexo框架是基于nodejs撰寫，所以安裝hexo之前需要安裝nodejs，nodejs下載網頁：Node.js，下載LTS版本

下載之后一路安裝，不會的可以百度具體安裝教程，不多說，安裝完成后我們打開剛剛Git的命令列，右擊桌面空白處打開GitBash，輸入如下指令查看hexo和npm的版本

node -v
npm -v

回傳版本資訊就說明安裝成功：

2.3 安裝Hexo

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

1. 安裝指令

npm install -g hexo-cli

2. 查看是否安裝成功

hexo -v

3. 出現版本資訊說明安裝成功

2.4 Hexo生成網頁

兩個工具就緒后我們開始生成靜態網頁：

我們首先創建一個檔案夾，用來存放網頁資料

在檔案夾內右擊打開gitbash，輸入初始化指令 web_blog_name 由用戶自己定義

hexo init web_blog_name

輸入后git會從遠程拉取初始化代碼下來，拉取后Git顯示如下

然后檔案夾就有了Hexo的原始碼了

在Git中改變當前目錄的位置，進入該檔案夾，代碼如下

cd web_blog_name/

使用hexo生成代碼指令

hexo g

然后開啟本地埠訪問

hexo server

在瀏覽器輸入如下內容，就可以本地訪問Hexo生成的網頁代碼了：

localhost:4000

到此網頁的生成就完成了！

除了網頁生成外，我們本地還要生成一個ssh公鑰，用于后期向樹莓派遠程倉庫提交網頁原始碼，git指令如下

ssh-keygen -t rsa -C “郵箱地址”

然后一路回車，直到出現下面的圖案，代表公鑰生成成功，

公鑰（.pub）一般在 C:\Users\用戶名\.ssh 下面，公鑰的作用我寫在了后面，暫時無需管他

到此本地設定基本完成

3.樹莓派服務器設定

有了靜態網頁了，我們下一步就是配置樹莓派了，首先通過SSH連接樹莓派，這里我使用的VSCode的remote - SSH工具來連接樹莓派（VSCode，永遠滴神，不接受反駁！），工具在VSCode內部git安裝：

安裝完成后我們通過樹莓派的IP登錄樹莓派（樹莓派要連接網路，且要獲取對應的IP）

獲取IP方法可以參考這篇文章：查看樹莓派ip地址的幾種方法

獲取IP之后通過Remote遠程登錄（樹莓派和PC要在同一個局域網下）：在VSCode打開Remote

添加遠程連接，按照如下格式輸入登入IP和賬號密碼：

ssh + 樹莓派用戶名@樹莓派IP地址

輸入位置如下：

輸入之后會提示在輸入登錄密碼，輸入即可登錄樹莓派，連接后打開終端，如下圖

之后我么就可以輸入shell指令來控制樹莓派了，下面我們開始正式配置樹莓派服務器！

配置步驟：

• 更新樹莓派源

打開樹莓派鏡像源串列 (此處用的vim編輯器，具體操作可以百度！不習慣可以將vim替換gedit)

sudo vim /etc/apt/sources.list

將內容替換為清華大學源

deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi

更新源

sudo apt-get update

更新完成

• 安裝git

安裝指令，sudo指令要輸入一下密碼

sudo apt-get install git

查看版本

git --version

安裝完成：現象和第一次下載不一樣，但只要出現版本基本沒問題

• 安裝nginx

下載指令

sudo apt-get install nginx

查看當前版本

nginx -v

此處我已經下載好，因為已經下載，所以現象和第一次下載不一樣，但只要出現版本基本沒問題

• 建立遠程Git倉庫

在樹莓端安裝Git后，我們用Git建立一個遠程倉庫，用來作為本地PC提交網頁原始碼的中間站，這樣如果我們要更新網頁，就不用登錄到樹莓派然后傳檔案這么麻煩的步驟，具體建立步驟如下：

1. 創建一個新的檔案夾

sudo mkdir /var/repo/	#創建一個檔案夾
sudo chown -R $USER:$USER /var/repo/	#給分到用戶組
sudo chmod -R 755 /var/repo/	#改變檔案夾權限

2. 檔案夾建立后，改變當前路徑到建立的檔案夾，輸入如下指令建立Git倉庫（web_blog為自定義的名字）

cd /var/repo/
git init --bare web_blog.git

• 映射倉庫到另外一個檔案夾

Git倉庫創建完成后，我們需要再創建一個檔案夾，用來做Nginx的根目錄

sudo mkdir -p /var/www/hexo

并修改目錄權限

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

然后在倉庫 web_blog 下創建一個鉤子，將靜態 HTML 檔案傳送到樹莓派服務器的根目錄下，即 /var/www/hexo下面，鉤子代碼如下：

#使用vim在倉庫下創建一個新的鉤子檔案
sudo vim /var/repo/web_blog.git/hooks/post-receive

在檔案下添加如下shell腳本檔案 （因為使用的是Vim編輯器，具體的操作方式需要自行百度了解一下！）

#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/web_blog.git checkout -f

保存退出檔案后，改變檔案權限，讓該檔案變為可執行檔案，

sudo chmod +x /var/repo/web_blog.git/hooks/post-receive

• Nginx網頁根目錄設定

上一步我們已經創建好網頁根目錄，并且已經做好檔案傳送鉤子，這一步我們配置Nginx的組態檔，開啟Nginx并將根目錄映射到我們創建的目錄下

打開Nginx默認配置項

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

然后找到如下位置，修改root的值為我們設定的根目錄檔案夾

保存退出，重新啟動Nginx

sudo service nginx restart

在和樹莓派同一個局域網下訪問樹莓派的IP地址，訪問如下說明目錄設定成功了，Nginx配置基本完成

• 添加本地公鑰到遠程Git倉庫

添加公鑰到樹莓派，其實就是添加本地PC到Git的白名單中，之前我們已經在本地生成了公鑰，下一步我們就是上傳公鑰，方法很簡單，在公鑰目錄下面打開Gitbash，按格式輸入如下shell指令

ssh-copy-id -p 埠一般為22+樹莓派用戶名@樹莓派IP地址

安裝完成會有提示，我這個就是已經安裝的提示

• 配置本地Hexo設定，上傳網頁代碼

在上面都配置完成后，我們在配置一下本地網頁的傳輸代碼，就可以上傳一開始生成的靜態網頁了！

在網頁原始碼位置修改_config.yml檔案

首先修改一下推送地址路徑和推送方式

deploy:
  type:  git
  repo:  pi@自己的IP地址:/var/repo/web_blog
  branch: master

修改后如下：

除此之外還有修改網頁的源地址，按照下圖中的格式修改，添加自己的IP

修改完成后，在原始碼目錄使用GitBash

hexo生成靜態網頁代碼：

hexo g

提交遠程代碼

hexo d

• 內網訪問博客網頁

代碼提交成功后，就會出現在Nginx的根目錄下，這時我們在內網訪問Nginx的埠就可以訪問剛剛的網頁啦

4.內網穿透

通過以上的步驟，我們現在已經可以通過內網訪問部署在樹莓派服務器上的網頁了，有的朋友可能不滿足于此，想要網頁通過外網也能訪問，下面我分享一下如何做內網穿透，通過外網訪問內網服務器！

首先需要準備一些內容：

1. 一個云服務器（我的是騰訊云服務器，一年100塊）
2. 一個域名（在阿里云購買的域名，一年20塊）

云服務器會分配一個公網IP，通過這個IP的埠映射到內網IP埠進行穿透內網，而域名就是我們常說的網址，比如：https://www.csdn.net 就是一個域名，我們準備一個域名然后對他進行決議到服務器IP，就可以通過網址訪問網頁了

我們通過frp來穿透內網，具體的教程參考這一篇CSDN文章：十分鐘教你配置frp實作內網穿透

穿透后我們就可以在外網通過公網IP訪問網頁了（注意使用服務器的公網IP做穿透時一定要記得設定防火墻，讓指定埠通行），此處我穿透到公網IP的8080埠，該埠可以通過外網訪問

為了讓網頁訪問地址更加合規，將購買域名的二級域名決議到80埠后，使用Nginx進行埠轉發到8080，Nginx組態檔修改如下：（主要為紅框的那一段，上邊的代碼是我自己部署在服務器的網頁，不是本節的內容）

到此我們就可以通過網頁的二級域名決議后進行訪問了

5.結語

樹莓派服務器內容就寫到這了，文章大概描述了一下部署網頁到樹莓派服務器的內容，有問題可以在評論區或者私信向我反饋，希望大家給個關注，后期還會持續更新樹莓派有關的DIY