《动手学深度学习》(PyTorch版)本地WEB访问打开姿势

[yongboy]

针对使用Mac/Linux等终端（不支持Windows）各位，可以快速本地以web方式访问《动手学深度学习》(PyTorch版)项目。

这不是一个 Issue，目的想让大家本地阅读本文档时更为舒服一些 :))
管理员可随时关闭掉......

快速体验

• git clone https://github.com/ShusenTang/Dive-into-DL-PyTorch.git
• 终端下执行make wwwdocs命令

# cd Dive-into-DL-PyTorch
# make wwwdocs
bash script/prepare_wwwdocs.sh
本脚本将自动创建 .wwwdocs 目录
初始化项目依赖时将使用 docsify 工具自动生成本地文档web访问文档
本web文档为绿色创建，不会对现有项目产生副作用！不会产生产生git需要提交文件！
请放心食用 :))
根据项目README.md自动生成目录文件 ......
根据项目根目录下README.md以及docs/README.md合并生成项目所需${docs}导航 ......
生成 docsify 所需入口文件......
为各章节markdown文件以及图片建立软连接 ......
启动web server，稍后请在浏览器中打开：http://localhost:3000 ，即可访问 ......

Serving /Users/nieyong/ai/book/Dive-into-DL-PyTorch/.wwwdocs now.
Listening at http://localhost:3000

• 在本地浏览器访问 http://127.0.0.1:3000/ 即可完整显示所有数学公式了

截图展示

启动成功之后，请在chrome等现代浏览器内访问：http://localhost:3000 即可。

来一个首页和导航标签显示：

内置JS完整支持数学公式显示（不再需要在Chrome上安装任何插件）：

代码显示增加拷贝支持：

增加搜索支持：

其它

本方案非常绿色：

• 完全不会对现有项目造成侵入
• 经常执行git fetch ; git rebase命令即可更新上游文档内容
  • 完全不用重新构建！
  • http://127.0.0.1:3000/ 会实时刷新等

希望能给各位带来一点帮助 :))

[ShusenTang]

首先感谢的你的工作，我已经merge了，但是make wwwdocs报如下错误:

然后我查了一下，从ghickman/classify#16 处看到了一个解决方案，就是把

python -m SimpleHTTPServer 3000

改成

python -m http.server 3000

现在倒是能启动了，但是还是有bug：

[yongboy]

哎，MacOS也出现兼容问题了 :))

• macOS High Sierra
• 系统版本：10.13.6
• iterm 终端
• mac内置awk：

awk --version
GNU Awk 4.2.1, API: 2.0 (GNU MPFR 4.0.2, GNU MP 6.1.2)
版权所有 © 1989, 1991-2018 自由软件基金会(FSF)。

......

把你的OS版本、awk版本，以及终端执行环境等，以发过来吧，我瞅瞅看。

[yongboy]

@ShusenTang

itern终端进入项目根目录（.wwwdocs目录假设是存在的）执行如下语句，试试看会不会出错，若不出错，我稍后提交PR修正。

docs='.wwwdocs'
cat README.md \
  | awk '/^## 目录/ {print "* [前言]()"} \
  	 /^### / && /.md)$/ {print "* "substr($0, 5)} \
  	 /^### / && ! /.md)$/ {dot=$2; gsub(/\./, "\\.", dot); print "* "dot " " $3;} \
  	 /^\[/ {print $0} /\.\.\./ {print "   * "$0}' \
  | sed 's/https:\/\/github.com\/ShusenTang\/Dive-into-DL-PyTorch\/blob\/master\/docs\///g' \
  | sed 's/^\[/   \* \[/g' \
  > ${docs}/_sidebar.md

sredme=`cat docs/README.md`
cat README.md | awk -v sredme="${sredme}" '!/^### / && !/^\[/ && !/更新/ {print $0} /^## 目录/ {print sredme}' | sed 's/## 目录/## 说明/g' > ${docs}/README.md

[ShusenTang]

哎，MacOS也出现兼容问题了 :))

• macOS High Sierra
• 系统版本：10.13.6
• iterm 终端
• mac内置awk：

awk --version
GNU Awk 4.2.1, API: 2.0 (GNU MPFR 4.0.2, GNU MP 6.1.2)
版权所有 © 1989, 1991-2018 自由软件基金会(FSF)。

......

把你的OS版本、awk版本，以及终端执行环境等，以发过来吧，我瞅瞅看。

mac os 10.13.2
awk:

iterm终端

执行下面那个第二句的时候会报错

[yongboy]

@ShusenTang

针对执行出错的那行命令，稍微放宽一下限定条件，试试下面这个：

docs='.wwwdocs'
cat README.md \
  | awk '/^## 目录/ {print "* [前言]()"} \
  	 /^### / && /.md/ {print "* "substr($0, 5)} \
  	 /^### / && ! /.md/ {dot=$2; gsub(/\./, "\\.", dot); print "* "dot " " $3;} \
  	 /^\[/ {print $0} /\.\.\./ {print "   * "$0}' \
  | sed 's/https:\/\/github.com\/ShusenTang\/Dive-into-DL-PyTorch\/blob\/master\/docs\///g' \
  | sed 's/^\[/   \* \[/g'

说一点闲话，写一个同时可运行在Mac终端和Linux（主要指的是CentOS）下终端的脚本，兼容性的最大挑战反而来自MacOS每一个小版本的细微区别，有些让人略显无奈。

嗯，MacOS下awk、sed、grep等命令往往和Linux下命令在很多细节方面有所不同，各位可要注意喽 :))

[ShusenTang]

@ShusenTang

针对执行出错的那行命令，稍微放宽一下限定条件，试试下面这个：

docs='.wwwdocs'
cat README.md \
  | awk '/^## 目录/ {print "* [前言]()"} \
  	 /^### / && /.md/ {print "* "substr($0, 5)} \
  	 /^### / && ! /.md/ {dot=$2; gsub(/\./, "\\.", dot); print "* "dot " " $3;} \
  	 /^\[/ {print $0} /\.\.\./ {print "   * "$0}' \
  | sed 's/https:\/\/github.com\/ShusenTang\/Dive-into-DL-PyTorch\/blob\/master\/docs\///g' \
  | sed 's/^\[/   \* \[/g'

说一点闲话，写一个同时可运行在Mac终端和Linux（主要指的是CentOS）下终端的脚本，兼容性的最大挑战反而来自MacOS每一个小版本的细微区别，有些让人略显无奈。

嗯，MacOS下awk、sed、grep等命令往往和Linux下命令在很多细节方面有所不同，各位可要注意喽 :))

这个运行没报错，输出了整个目录

[yangjiandong]

mac 10.15，还需手工拷贝下 readme，不然首页就是 404

[yongboy]

@yangjiandong

把执行 make wwwdocs命令出错信息贴出来，我看一下 :))

[ShusenTang]

我想达到的效果就是http://tangshusen.me/docsify_demo ，但是目前存在一个问题: 我必须把img文件夹放在docs下（这个倒好办，移动一下img就是），但是我在md中插入图片时只能

<img width="500" src="./img/chapter02/2.1_jupyter.jpg"/> 

而不是我预料的

<img width="500" src="../img/chapter02/2.1_jupyter.jpg"/>

所以要么在网页上能正常显示而本地md预览不能正常显示（使用方式1），要么在网页不能正常显示而在md本地能正常显示（使用方式2），所以就很迷。

需要注意的是，docsify serve docs本地预览时能很好的显示图片不存在这个问题，迷

------更新-----
已解决，见docsifyjs/docsify#936

[yongboy]

@ShusenTang

图片地址被解析成了当前站点的根目录了，这和你初衷 docsify_demo/img/ 存放路劲有冲突，因此无法访问。可建立img目录的软连接到当前站点根目录下。

另，建议当前目录层次不要去再做改动，当前挺好。

推荐做一个简单以及自动化一点的站点：

1. 在你的虚拟机或主机上，某一个路径下检出项目，比如 /data0
2. 使用nginx或apache建立一个站点，其根目录为：/data0/Dive-into-DL-PyTorch/.wwwdocs
3. 为其申请以及绑定一个新的二级域名，比如：docsify_demo.tangshusen.me
   • 嗯，这个域名不怎么贴切呢
4. 进入cd /data0/Dive-into-DL-PyTorch，执行 make wwwdocs &
   • 可选项，建议传入一个参数，不启动端口号为3000的server好了
5. 设置crontab定时器，每一个小时或每天定时执行脚本：
   • 进入项目目录
   • git命令更新/检出最新代码
   • 执行 make wwwdocs &

这样做好处不少：

1. git仓库只管更新即可
2. 对外开放的静态站点随着仓库更新自动更新

:))

[ShusenTang]

@ShusenTang

图片地址被解析成了当前站点的根目录了，这和你初衷 docsify_demo/img/ 存放路劲有冲突，因此无法访问。可建立img目录的软连接到当前站点根目录下。

另，建议当前目录层次不要去再做改动，当前挺好。

推荐做一个简单以及自动化一点的站点：

1. 在你的虚拟机或主机上，某一个路径下检出项目，比如 /data0

2. 使用nginx或apache建立一个站点，其根目录为：/data0/Dive-into-DL-PyTorch/.wwwdocs

3. 为其申请以及绑定一个新的二级域名，比如：docsify_demo.tangshusen.me

   • 嗯，这个域名不怎么贴切呢

4. 进入cd /data0/Dive-into-DL-PyTorch，执行 make wwwdocs &

   • 可选项，建议传入一个参数，不启动端口号为3000的server好了

5. 设置crontab定时器，每一个小时或每天定时执行脚本：

   • 进入项目目录
   • git命令更新/检出最新代码
   • 执行 make wwwdocs &

这样做好处不少：

1. git仓库只管更新即可
2. 对外开放的静态站点随着仓库更新自动更新

:))

还是想直接部署到github pages上，我这两天一直在想如何只做最小的改动达到这个目的

[ShusenTang]

《动手学深度学习》(PyTorch版)网页版现已推出，公式完美渲染，感谢持续关注