GitBook使用教程(使用Nginx实现本地网页部署)

前面提到GitBook的基本使用方法。不了解的同学可以继续学习。

这一节我们来玩玩更高级的。在Windows下部署GitBook电子书,当然在Linux和Mac系统下操作类似,感兴趣的同学可以试着按照以下的步骤操作一下。

首先我们来解释以下什么叫做部署GitBook电子书?熟悉GitBook操作的同学可能知道,我们构建了一个GitBook工程,在本地是如何跑起来呢?

  • 运行gitbook serve命令行,默认在localhost的4000端口
  • 在浏览器打开localhost:4000端口访问我们构建的GitBook网站

以上有个比较烦的问题就是:你始终得挂着命令行以保证GitBook进程长期活跃在后台,否则无法通过浏览器访问电子书内容(当然你也可以写个脚本用nohup长期运行在后台进程)。

那么,对本章内容来说,什么叫做部署GitBook电子书呢?

其实就是在浏览器上通过localhost/IP+端口号的方式可以访问自己搭建的电子书。读完本章内容,你可以做到以下几件事:

  • 不用每次在本地运行gitbook serve命令就可以通过IP+端口号的地址来浏览自己构建的电子书网站
  • 可以通过localhost:port/mywebiste1localhost:port/mywebiste2分别访问mywebsite1和mywebsite2两个GitBook工程。

本章教程的核心重点主要是实现上面的两个功能,而实现这个功能的核心就是一个叫做Nginx的开源软件。

Nginx简介

Nginx是一个开源软件,由俄罗斯人开发。这个软件正活跃于企业服务器领域,目前的主要应用方向是实现高并发反向代理静态网页的部署

就在前几天,Nginx作者在俄罗斯被捕,作者曾在某公司内任职期间开发出Nginx,十多年后的今天,这个公司表示作者在工作期间内开发出Nginx,软件版本应该归属于这家公司。----哇,俄罗斯人真的好棒棒!

无论如何,Nginx是一个值得学习的开源软件。从2004年Nginx诞生一直到今天,在很多互联网企业的网站开发中,PHP+Nginx+MySQL的后台开发模式都非常流行。在这种开发模式下PHP用来开发后台,Nginx用作扛并发、反向代理和静态资源部署,MySQL实现数据库存储。

当然了,作为一个程序员或者码农,我们总记得耳边隐隐约约回荡着一句话:

PHP是地球上最好的编程语言。

开完玩笑干正事,对于Nginx,我这里就不慢慢讲解原理机制了,有兴趣的同学可以自己寻找学习资料。在本章内容中我们用到Nginx的功能主要是上面提到的静态网站部署

什么叫做静态网站部署

假设我们在服务器上有个文件夹比如叫做mywebsite,这个目录里有很多HTML文件,当然,少不了各种css和js文件,还有各种图片。通常在这个目录下面有个index.html或者index.htm的文件,这个index文件是这个站点的首页内容。现在这个主机在局域网中的IP地址是192.168.1.100,通过nginx的静态网站部署技术,我们在当前局域网的浏览器上能通过192.168.1.100:8080/mywebsite这样的地址来访问这个站点的内容。

简单讲,静态网站部署就是将一个主机上的文件夹下的静态资源(网页,图片,css等)映射成一个URI路径(最常见的映射成一个http地址),这样其他客户端能通过这个URI路径来访问这个主机下的静态资源。

这里的主机可以是远程的服务器,当然也可以是我们自己的电脑,因为我们的本地主机名字叫做localhost

下载安装Nginx

这里讲Windows系统下的Nginx下载安装,下载完解压就可以使用了。

Linux用户或者MacOS用户需要下载安装包,然后自己配置编译脚本和配置参数,安装过程有点麻烦,请自己想办法哈哈。

先打开Nginx官网的下载页面http://nginx.org/en/download.html,选择Windows下的稳定版本,如下图所示:

nginx_download.png

下载完解压到自己的本地文件夹,假设就放在D:/nginx-1.16.1下,当前文件目录如下:

nginx_dir.png

准备工作就完成了,太简单了吧哈哈哈。

新建一个简单的GitBook工程

我们在D盘新建一个GitBook工程并且初始化。我这里的文件夹叫做mywebsite

mywebsite目录下执行以下操作(我都是在Git Bash命令行操作的):

初始化工程

执行以下命令:

gitbook init

命令执行完成后会生成README.mdSUMMARY.md两个文件。如下图所示:

init.png

我们只是演示如何部署GitBook工程,先不编辑文件内容。

构建工程

运行以下命令:

gitbook build

构建完成后会发现多了个_book文件夹,如下图所示:

build.png

下面开始我们本章的重点内容,静态网页部署。我们需要做的事情是:

  • 每次修改完GitBook中的md文件,运行一下gitbook build命令就可以,不用再运行gitbook serve
  • 在本地浏览器能通过localhost:port/mywebsite来访问,对于局域网中的其他用户,可以通过192.168.1.100:port/mywebsite

这里的192.168.1.100是指局域网中的ip地址,在Windows系统下cmd中运行ipconfig查看,在Linux或者MacOS中通过ifconfig查看。

部署开始

  • 修改Nginx的conf文件
    第一步,我们先找到Nginx安装目录的配置文件目录下的conf文件夹,里面有个nginx.conf文件,如图:
nginx_conf_ls.png

打开nginx.conf文件,我们可以看到里面有个叫做server的节点内容如下:

nginx_port.png

在这个server节点下复制一个server节点信息,如下图所示:

# 这是nginx的默认配置信息,不要随意修改任何内容
server {
      listen       80;
      server_name  localhost;

      location / {
           ...
      }
 }

# 以下内容为新增的配置信息
server {
      # 这个端口可以随意指定,0-1024是系统端口,80和8080端口是常见的http通讯端口,避免用这几个敏感的端口号就行
      listen       8888;             
      server_name  localhost;

      location /mywebsite {
           # 这个路径是关键,就是GitBook工程下build出来的_book目录,需要运行gitbook build命令自动生成
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
      }
 }
  • 启动Nginx服务

在Nginx安装目录下面点击nginx.exe启动服务:

nginx_start.png
  • 打开浏览器访问

在浏览器输入http://localhost:8888/mywebsite,看是不是可以访问GitBook网站了呢?

这里需要注意以下几点:

  • localhost和192的局域网ip是一样的效果,如果需要提供地址给局域网中的其他用户访问,请使用局域网中的ip地址不要用localhost

  • 端口号8888对应上面的配置文件中的server配置信息的端口号配置

  • 部署多个GitBook工程

经过以上的步骤,我们通过http://localhost:8888/mywebsite来访问D:/mywebsite目录下的GitBook网站,那么假设我们本地有多个GitBook工程构建,应该如何配置呢?

如果以上的流程都跑通了,那么这一步很简单。

新建新的GitBook工程

这里简单起见,就复制刚才新建的GitBook工程,也就是D:/mywebsite文件夹,复制完成后重命名为D:/mywebsite2。这样我们有了两个独立的GitBook电子书网站了。假设现在我想实现以下功能:

  • 通过http://localhost:8888/mywebsite来访问D:/mywebsite下的GitBook站点
  • 通过http://localhost:8888/mywebsite2来访问D:/mywebsite2下的GitBook站点

以上的功能该如何实现呢?

其实很简单,打开nginx.conf文件,刚才我们新增的server节点配置如下:

server {
      listen       8888;             
      server_name  localhost;

      location /mywebsite {
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
      }
 }

在以上的配置信息中,我们已经设置了mywebsite的访问方式,我们如果需要访问mywebsite2的话,新增一个location配置项就可以,修改后的配置信息如下:

server {
      listen       8888;             
      server_name  localhost;

     location /mywebsite {
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
     }
     
     # 以下为新增配置信息 
     location /mywebsite2 {
           alias D:/mywebsite2/_book;
           index  index.html index.htm;
           autoindex on;
     }
 }

在任务管理器中杀死nginx.exe进程后,重新点击nginx.exe启动服务,然后打开浏览器分别输入以下网址,自己看看效果如何:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容