【詳細】使用MkDocs搭建個人部落格網站使用MkDocs搭建個人部落格網站

2023-06-25 15:03:07

使用MkDocs搭建個人部落格網站

0. 安裝python3.7

注意：可以在個人使用者下安裝，不要覆寫系統原有python

#下載下傳Python依賴環境
yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel -y

#沒有wget需要安裝
yum install wget -y   

#下載下傳安裝包
wget https://www.python.org/ftp/python/3.7.13/Python-3.7.13.tgz

#解壓
tar -zxvf Python-3.7.13.tgz

#編譯安裝
cd Python-3.7.13
./configure --prefix=/home/mkdocs/python3
make && make install

#配置環境變量
vi ~/.bash_profile 
#添加此配置
PATH=$PATH:/home/mkdocs/python3/bin

source ~/.bash_profile

#軟連接配接
sudo ln -sf /home/mkdocs/python3/bin/python3.7 /usr/bin/python3
sudo ln -sf  /home/mkdocs/python3/bin/pip3.7 /usr/bin/pip3

#驗證
python3 --version
pip3 --version

1. 安裝mkdocs

1、確定已經安裝python3環境，以及Python包管理器pip

2、安裝 MkDocs

pip3 install mkdocs

3、建立文檔項目，docs 是自定義檔案目錄

mkdocs new docs

4、切換到 mysite 目錄下，并運作

mkdocs serve -a ip:port

浏覽器輸入 ip:port就預覽到我們建設的文檔站點了

2. 安裝插件

安裝主題插件：

pip3 install mkdocs-material -i https://pypi.tuna.tsinghua.edu.cn/simple

安裝版本管理插件：

pip3 install mike

安裝生成pdf插件：

pip3 install mkdocs-with-pdf

安裝qrcode：

pip3 install qrcode

安裝weasyprint，版本需要指定52.5：

3. 配置

配置mkdocs.yml

#站點配置說明
site_name: Docs #站點名稱
docs_dir: docs #文檔位址
#主題配置
theme:
  name: material #指定主題
  custom_dir: overrides #定制目錄，同名覆寫
  palette: #顔色配置
    primary: indigo #主題顔色
    accent: deep orange #強調文字顔色
  language: zh #語言
  features:
    - navigation.top #tab頁展示方式 頂部 
    - header.autohide #表頭自動隐藏

#版本控制
extra: 
  version:            
    provider: mike

#with-pdf配置說明：
plugins:
  - search #添加搜尋框
  - with-pdf: #生成pdf配置
      copyright: copyright @ 2022#設定作者文本
      cover_subtitle: v1.1.0 #子标題
      author: author #作者
      cover: true #封面
      back_cover: true #底面
      output_path: pdf/檔案名稱.pdf #輸出路徑

4. 開發

1、把建立好的文檔項目，送出到git遠端倉庫

2、在windows端，拉取git文檔項目到本地，通過idea打開，標明一個分支，在docs目錄下，添加md文檔，進行編寫文檔即可

4、編寫完成，送出到git遠端，linux端拉取文檔

5、linux端拉取到最新文檔，執行指令

mkdocs build
mike deploy [version]
mkdocs serve -a ip:port

6、浏覽器通路ip:port，即可看到最新頁面

5.項目放到Nginx中

1、複制site檔案夾到Nginx

2、進行Nginx相關配置

3、通路網站

附錄：

mkdocs中文文檔：

https://mkdocs.zimoapps.com/#_14

插件商店可參考：

https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#pdf–site-conversion

mike配置可參考：

https://github.com/jimporter/mike/tree/v1.1.2

theme配置可參考：

https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/

with-pdf配置：

https://github.com/orzih/mkdocs-with-pdf