Update TECH.md

This commit is contained in:
Wcowin 2024-02-22 12:33:15 +08:00
parent 4541222510
commit f61d7dd57a

169
TECH.md
View File

@ -9,14 +9,11 @@ tags:
我的个人网站成果:<http://wcowin.work/>{target=“_blank”}
## 一、准备工作(重要)
## 一、准备工作
1.下载[Github Desktop](https://github.com/desktop/desktop){target=“_blank”}
2.有一个GitHub账号
3.打开电脑终端安装mkdocs: `pip install mkdocs-material`
1.下载[Github Desktop](https://github.com/desktop/desktop){target=“_blank”}
2.有一个GitHub账号(有手就行)
***
## 二、Creating your site
@ -24,66 +21,110 @@ tags:
[利用mkdocs部署静态网页至GitHubpages更新版](https://blog.csdn.net/m0_63203517/article/details/129755527?spm=1001.2014.3001.5501){target=“_blank”}
与其他教程不同我首先建议先在Github创建一个名为你的名字+github.io的仓库(不是这个名字的仓库也可以,你需要类比一下)
![img](https://cn.mcecy.com/image/20230324/51a12510e3b332b6ceea6827f40c1f2f.png)
![img](https://cn.mcecy.com/image/20230324/7f19bb393e39fb9add953ee19f9e2d91.png)
与其他教程不同我首先建议先在Github创建一个名为你的名字+github.io的仓库
![img](https://s1.imagehub.cc/images/2024/02/02/5074a3e2b7284355e0f777fd9e621ee3.png)
![img](https://s1.imagehub.cc/images/2024/02/02/5c39f0c9754f067759497361524d2b95.png)
然后打开github Desktop 克隆到本地
![img](https://cn.mcecy.com/image/20230324/ff3682428cc987cad79625951ef6d7bc.png)
![img](https://cn.mcecy.com/image/20230324/e896de95bd6fa737e7c6c3fa21c079fb.png)
![img](https://cn.mcecy.com/image/20230324/791834a5ac01c95ef174ab77d47c0f3a.png)
![img](https://cn.mcecy.com/image/20230324/80430d0f8be7ea09368c3e63fe5a91ff.png)
![img](https://s1.imagehub.cc/images/2024/02/02/5c06d33549ea0c4a1357697acc6f8f5d.png)
![img](https://s1.imagehub.cc/images/2024/02/02/f862b16316fa4ad0f727a0f656cc5cf1.png)
![img](https://s1.imagehub.cc/images/2024/02/02/6483c0b9ee144e0c1e035dccf3339991.png)
打开Wcowin.github.io目录进入终端运行:
```
mkdocs new mkdocs-site
```
出现下图的几个文件
![img](https://cn.mcecy.com/image/20230324/2f3f28cb5ee726ac154102de2ffb43da.png)
![img](https://s1.imagehub.cc/images/2024/02/02/140869d445e8c6dfd026e71e3ff0fc09.png)
docs文件下是以后网站的内容mkdocs.yml是配置文件配置主题目录插件等
你在这个目录下写的任何东西都可以通过github Desktop 上传到github上
以VScode为例我们打开具体看看里面的东西
执行下面的代码添加一个GitHub Workflow
***
???note "过时的PublishMySite.yml"
(执行下面的代码添加一个GitHub Workflow(**已经过时但是仍然能用最新方法见下方ci.yml**)
(必须先执行下面的代码添加一个GitHub Workflow)
```
mkdir .github
cd .github
mkdir workflows
cd workflows
vim PublishMySite.yml
```
在PublishMySite.yml里面输入以下内容
```yaml
name: publish site
on: # 在什么时候触发工作流
push: # 在从本地main分支被push到GitHub仓库时
branches:
- main
pull_request: # 在main分支合并别人提的pr时
branches:
- main
jobs: # 工作流的具体内容
deploy:
runs-on: ubuntu-latest # 创建一个新的云端虚拟机 使用最新Ubuntu系统
steps:
- uses: actions/checkout@v2 # 先checkout到main分支
- uses: actions/setup-python@v2 # 再安装Python3和相关环境
with:
python-version: 3.x
- run: pip install mkdocs-material # 使用pip包管理工具安装mkdocs-material
- run: mkdocs gh-deploy --force # 使用mkdocs-material部署gh-pages分支
```
)
***
```
mkdir .github
cd .github
mkdir workflows
cd workflows
vim PublishMySite.yml
```
vim ci.yml
```
在PublishMySite.yml里面输入以下内容
```
name: publish site
on: # 在什么时候触发工作流
push: # 在从本地main分支被push到GitHub仓库时
.github/workflows/ci.yml然后复制并粘贴以下内容
```yaml
name: ci
on:
push:
branches:
- master
- main
pull_request: # 在main分支合并别人提的pr时
branches:
- main
jobs: # 工作流的具体内容
permissions:
contents: write
jobs:
deploy:
runs-on: ubuntu-latest # 创建一个新的云端虚拟机 使用最新Ubuntu系统
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2 # 先checkout到main分支
- uses: actions/setup-python@v2 # 再安装Python3和相关环境
- uses: actions/checkout@v4
- name: Configure Git Credentials
run: |
git config user.name github-actions[bot]
git config user.email 41898282+github-actions[bot]@users.noreply.github.com
- uses: actions/setup-python@v4
with:
python-version: 3.x
- run: pip install mkdocs-material # 使用pip包管理工具安装mkdocs-material
- run: mkdocs gh-deploy --force # 使用mkdocs-material部署gh-pages分支
- run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
- uses: actions/cache@v3
with:
key: mkdocs-material-${{ env.cache_id }}
path: .cache
restore-keys: |
mkdocs-material-
- run: pip install mkdocs-material
- run: mkdocs gh-deploy --force
```
!!!重点来了
仓库setings/Actions/General 勾选这两项
![](https://cn.mcecy.com/image/20231014/60f48ab66eea11b52f572b8fd489ea92.png)
目录树状图:
```
$ tree -a
@ -91,11 +132,17 @@ $ tree -a
├── .github
│ ├── .DS_Store
│ └── workflows
│ └── PublishMySite.yml
│ └── ci.yml
├── docs
│ └── index.md
└── mkdocs.yml
```
!!!重点来了
仓库setings/Actions/General 勾选这两项
![](https://s1.imagehub.cc/images/2024/02/02/02fd4e77eb52d4ce18c227f0e29b2c6d.png)
## 三、配置完善
打开终端运行
@ -103,21 +150,12 @@ $ tree -a
打开**mkdocs.yml**
把以下的内容输入进去(最简单配置)
把以下的内容输入进去(最简单最基础的配置)
```
```yaml
site_name: 网站名字
```
```
site_url: 网站链接
```
```
site_author: 你的名字
```
```
theme:
name: material #主题
```
@ -131,36 +169,27 @@ theme:
```
mkdocs serve
```
![img](https://cn.mcecy.com/image/20230324/f11af9fb64a8418181bc3655a88d8635.png)
![img](https://cn.mcecy.com/image/20230324/c745b71840c17d639e1ea144bc8c5732.png)
![img](https://s1.imagehub.cc/images/2024/02/02/b4a5ac989f1f390573a85bad8c80f49b.png)
![img](https://s1.imagehub.cc/images/2024/02/02/38bbc1fad9016ebfa0d894f093b82e3d.png)
这个网站就算是初步建好了
最后去github Desktop上传到github
![img](https://cn.mcecy.com/image/20230324/53ad3fdbe7d05668b99a46780930845a.png)
![img](https://s1.imagehub.cc/images/2024/02/02/3a15b16d3947825f3f469b4eafedd5ef.png)
!!!重点来了
去setings/pages 选择下图示意的路径
![](https://cn.mcecy.com/image/20231014/ac6d1bc1a236737a18d9dd6bd2bd97dc.png)
**!!!重点**
**去仓库的setings/pages选择下图示意的路径**
![](https://s1.imagehub.cc/images/2024/02/02/64a25964ef4e99e4b580084daec10662.png)
等待一会网址就出来了
你的网站网址就是:​
```
https://你github的名字.github.io/ (根据仓库名改变)
https://你github的名字.github.io/
因为我绑定了域名所以网址是https://wcowin.work/
```
![img](https://cn.mcecy.com/image/20230324/51a12510e3b332b6ceea6827f40c1f2f.png)
## 快速开始
打开终端安装mkdocs: `pip install mkdocs-material`,在你第二步克隆到本地的文件夹下(比如我的就是Wcowin.github.io这个文件夹)的终端执行`git clone git@github.com:Wcowin/Mkdocs-Wcowin.git`克隆本模版,把Mkdocs-Wcowin文件里的文件复制出来到Wcowin.github.io文件里随后在Wcowin.github.io文件目录终端里`mkdocs serve`即可
为了测试随手建的名为1的文件夹
![](https://cn.mcecy.com/image/20231014/f94d765bd86d56d35f7d558270d21bd5.png)
完美运行!
![](https://cn.mcecy.com/image/20231014/af910d370c91e06b8a6fc2e11ae3c6c9.png)
**浏览器进入<http://127.0.0.1:8000/>{target=“_blank”}即可看到端口网页效果**
![img](https://s1.imagehub.cc/images/2024/02/02/7f149d6da7ecc6364d86c9517b2c4624.png)
下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)