使用mkdocs撰寫技術文檔並免費部署上線


新版git下的說明

由於github最近改版了,如果想在別的電腦上修改的話,使用https的方式pull下來代碼后,之前想要提交改動的話只需要做一下用戶名與密碼的校驗即可,現在如果想要使用https的方式提交改動得加一下私人的token。

創建私人的訪問令牌在這里:創建私人訪問令牌

然后還需要使用 gh auth進行認證才行:

brew install gh

gh auth認證過程參考:gh auth認證

提示

本文演示使用的Python解釋器版本為3.6.8;操作系統為MacOS。

另外本人在實際使用中出現過一個問題:如果同一個Github項目既在Mac端又在Windows端編寫本地文檔與yml配置文件的話展示出來的頁面會有問題!所以強烈建議大家同一個在線文檔項目使用相同的操作系統平台編寫,避免不必要的bug出現。

安裝mkdocs模塊

pip3 install mkdocs

安裝完后查看一下版本:

mkdocs --version
'''
mkdocs, version 1.0.4 from /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/mkdocs (Python 3.6)
'''

在本地創建一個項目

# 這里項目名是pythonGuide
mkdocs new pythonGuide

執行完上面命令后我們會看到在當前目錄下自動生成了一個pythonGuide項目目錄,我們看看里面的東西:

ls pythonGuide
'''
docs        mkdocs.yml
'''

pythonGuide這個項目目錄有一個docs目錄,主要存放我們文檔的源文件以及圖片的資源;mkdocs.yml是配置文件,文檔頁面的目錄結構以及主題等等都是在這里配置的。

本地調試

進入pythonGuide項目目錄,在與mkdocs.yml同級的目錄下執行命令 mkdocs serve即可:

cd pythonGuide

mkdocs serve

啟動后默認在 本地8000端口 可以看到文檔的在線呈現的內容。

項目的本地配置

這里我把項目的目錄結構配置成了下面這樣:

.
├── docs
│   ├── imgs
│   │   └── egg.jpeg
│   ├── index.md
│   └── python基礎
│       └── python基礎1.md
└── mkdocs.yml

截圖如下:

注意:里面的index.md文件不可以刪除!我們可以在index.md中配置一下主頁展示的內容。

mkdocs.yml中的內容

site_name: Python入門與進階指南
theme: readthedocs

nav: 
  - Python基礎:
    - 01 基礎1: python基礎/基礎1.md

index.md中的內容

### Python入門與進階指南

這是我的Python入門與進階指南。
![egg](imgs/egg.jpeg)

注意這里引入圖片的路徑

python基礎目錄下基礎1.md的內容 

這是python基礎1.md的內容

運行serve命令在本地查看一下效果

進入網站主頁是這樣的:

點擊 01 基礎1 就可以看到我們在 基礎1.md 中編輯的內容:

將項目放在Github上進行版本管理

在GitHub上創建一個倉庫,建議與本地項目重名便於管理:

接下來根據提示將我們的項目放在Github上即可:

最后我們可以看到本地項目放在Github上了:

關於gitignore的說明

大家可以看一下我的.gitignore文件:

*~
/benchmarks/
/spell/
/.vault.vim
/.local.vimrc
/.stignore
/.stfolder
/.stversions
.vim
.DS_Store
site docs

注意最后那兩個 site 與 docs。

site是執行了 mkdocs build命令后的存放靜態文件的目錄,沒有必要放進去;

docs目錄是我們編寫文檔的源文件,后面我要介紹如何將項目托管到gitpages上,用不到這個docs目錄,為了安全起見不建議將我們本地文檔的源文件也上傳到Github上。

將項目部署上線

激動人心的時刻來了!

還是在之前的目錄下,直接執行命令:

mkdocs gh-deploy

你會看到下面這個提示:

執行完這行命令后,訪問 https://Wanghongw.github.io/pythonGuide/ 即可在線看到我們寫的技術文檔頁面了!

授人以魚不如授人以漁 ***

項目部署上線的過程實在是太簡單了!接下來我給大家詳細介紹一下執行完 mkdocs gh-deploy 這個命令究竟發生了哪些事情

在本地生成網站

執行完mkdocs gh-deploy命令后我們可以看到在本地多了一個 site 目錄:

這個site目錄其實就是build命令生成的網站資源。

關於build命令的使用大家可以參考這里:https://mkdocs.zimoapps.com/#_12

自動生成gh-pages分支並將網站的靜態資源放在這個分支中

在執行gh-deploy之前我一直是在master分支上操作的。

執行完之后我們看看分支情況:

git branch '''
  gh-pages
* master
'''

大家可以看到它幫我們自動創建了一個分支:gh-pages。

然后我們切換到這個分支下看一下里面的東西:

git checkout gh-pages

可以看到,這個分支里面是根據docs目錄與mkdocs.yml這兩個生成的網站的靜態資源!

將網站訪問指向這個分支

這一步我們在Github中看。

找到我們的項目,點擊settings:

在settings看一下GithubPages這個設置項:

是的!所有的一切都是 mkdocs gh-deploy 一鍵生成的!!!!!!

個人作品

本人之前也使用mkdocs搭建了一個Django與Python的使用指南,歡迎大家訪問:

https://huoyingwhw.com/golangGuide/

https://huoyingwhw.com/djangoGuide/

https://huoyingwhw.com/pythonGuide/

https://huoyingwhw.com/pythonUpper/

mkdocs的使用文檔

https://mkdocs.zimoapps.com/

https://www.mkdocs.org/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM