跳转至

使用Gitbook搭建静态网站,并配合Git实现自动发布

本文将实现在本地通过Git push后,服务器端自动gitbook build静态网页文件到nginx网站目录,达到自动更新gitbook网站的效果。大概的思路是这样的:服务器搭建git,本地电脑与其实现远程连接,本地电脑上完成gitbook的写作后,通过git将变化提交到服务器端git,再通过服务器端git hooks,有新的提交时触发该hooks,生成静态网站文件到配置的nginx目录,实现自动更新网站。

安装并配置Nginx

静态网站由nginx来承担功能,请参考Nginx简易教程安装并配置Nginx。

安装并配置Gitbook

安装nodejs

gitbook基于nodejs,因此首先得安装nodejs。顺着nodejs官网,一路找下去,给出的安装方法如下:

1
2
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs
建议按照上述链接进行安装,这样安装的是最新版,相应的npm也是最新版。本人之前踩过的坑:gitbook的安装使用npm,而Ubuntu官方包里面的nodejs版本较低,相应的npm也是,所以通过npm安装gitbook的时候始终很慢很慢...刚开始安装在本地,以为是网络问题,后来切换到服务器端也是一样,后来发现问题出在npm的版本上,只能通过安装最新版本的nodejs来更新npm,总之,装新版的nodejs。 通过以下命令查看nodejs版本,来确认是否安装成功。
1
nodejs -v

安装Gitbook

通过以下命令安装gitbook:

1
sudo npm install gitbook-cli -g
再输入gitbook -V查看版本号,首次运行需等待gitbook初始化完成(时间稍长,耐心等待😂):
1
gitbook -V

配置gitbook

切换到当前用户主目录:

1
cd ~/
新建文件夹zimohan.com,并初始化为gitbook,用于存放/中转我们的创造内容:
1
2
3
sudo mkdir zimohan.com
cd zimohan.com
sudo gitbook init

安装并配置Git

一般的Linux的发行版都安装有Git吧,所以就不介绍安装了。直接开始。

配置SSH密钥

密钥用于本地git与服务器端的git连接。如果之前已经使用过相关的功能,那么本地电脑应该已经生成了密钥。密钥路径为~/.ssh。可以查看其是否包含id_rsa及id_rsa.pub俩密钥文件。如果没用则可以通过以下命令生成。

1
ssh-keygen -t rsa -C 'youremail@example.com'
登录远程服务器,并将本地id_rsa.pub公钥文件的内容加入服务器端的~/.ssh/authorized_keys文件中。如果服务器中没有该文件,将新建,如果包含该文件,那么应该新起一行,再粘贴入本地的公钥。
1
sudo vi ~/.ssh/authorized_keys

建立服务器git仓,并克隆到本地

在服务器端建立裸仓。这里的示例是在当前用户的目录下建立zimohan.com.git的裸仓。

1
2
cd ~/
git init zimohan.com.git --bare
本地电脑克隆服务器端建立的裸仓
1
git clone <username>@zimohan.com:/home/<username>/zimohan.com.git
请将<username>替换你自己的用户名,"/home//zimohan.com.git"是git裸仓的具体路径,请根据实际情况完善。完成操作后,本地电脑的当前路径下将会出现一个名称为zimohan的文件夹,该文件夹就是从服务器克隆下来zimohan.com.git裸仓。 如果SSH使用的是非标准的22端口,则按如下操作:
1
git clone ssh://<username>@zimohan.com:端口/home/<username>/zimohan.com.git

配置hooks操作

进入hooks目录并新建post-receive文件,意思是在git receive到信息之后运行该文件中的命令。

1
2
cd ~/zimohan.com.git/hooks/
sudo vi post-receive
并粘贴入以下内容:
1
2
3
#!/bin/bash
sudo git --work-tree=/home/<username>/zimohan.com --git-dir=/home/<username>/zimohan.com.git checkout -f
sudo gitbook build /home/<username>/zimohan.com --output= /var/www/zimohan.com/
请将<username>替换你自己的用户名,“/home//”是相应文件夹的路径,请根据实际情况做适当修改。 以上命令大概是这么个意思:当有新的内容通过git提交时,git-dir后面的git仓内容导出到work-tree所在文件夹,然后将build后面的gitbook库生成网页静态文件到output所在文件夹(nginx所配置的网站所在文件夹)。 然后赋予post-receive可执行权限:
1
sudo chmod +x post-receive

实现自动发布

再次回到本地电脑端,相应的本地端也需要安装gitbook,请参照上面的步骤安装。 回到之前操作提到的克隆到本地的git仓所在文件夹zimohan.com,将其初始化为gitbook:

1
gitbook init
打开其中的README.md:
1
sudo vi README.md
将其内容修改为:
1
2
# Introduction
自动提交配置成功!
完成git操作:
1
2
git add *
git commit -am "git test"
最后将本地的修改推送到服务器端:
1
git push
现在浏览器访问https://zimohan.com即可看到效果了 以后本地通过gitbook增减文章后,git完成相关操作后,push到服务器,服务器即可自动生成并发布到网站,实现自动更新。