南宁 网站建设 公司老吕爱分享 wordpress

新的改变

旧的github.io地址,现在不用

https://dl-hx.github.io/myBlog/

更新netlify托管之后为这个

https://dl-hxblog.netlify.app/

一 如何搭建1:

安装vitepress

首先新建文件夹，打开cmd窗口

pnpm add -D vitepress

初始化Vitepress

pnpm vitepress init

这是我的配置，简单介绍一下

• 第一个是在当前根目录下创建vitepress项目

• 站点标题和描述。后续可以在配置中改

• 主题，建议选择第二个，个人觉得比较好看

• 是否使用ts，我们个人学习就没必要ts了，主要还是我懒

• 是否添加脚本到package.json，这个还是需要的，启动命令，打包命令这些都得用
  

初始化成功后，使用vscode或webstorm打开文件夹，会看到这样一个目录。接下来简单介绍一下每个文件的含义

• .vitepress，最核心的目录，
• theme目录。自定义主题配置，css样式等
• config.mjs。最核心的文件，各种配置导航栏、侧边栏、标题什么的都是在这里
• node_modules。安装的依赖
• api-examples.md和markdown-examples.md。官方给的两个示例
• index.md。主页相关
• package.json和pnpm-lock.yml。包管理工具需要用的

启动项目

pnpm run docs:dev

打开，看到这个，说明初始化成功

二 如何部署2

0. 需要在config.mjs里面配置base，名称为github仓库名称，注意不要忘记改之前的icon

base: "/myBlog/"

修改package.json, 添加 "packageManager": "pnpm@8.6.12", 版本号要与后面yaml中的pnpm版本号一致

{"devDependencies": {"vitepress": "^1.6.3"},"scripts": {"docs:dev": "vitepress dev","docs:build": "vitepress build","docs:preview": "vitepress preview"},
+ "packageManager": "pnpm@8.6.12"
}

2. 在 github 中创建一个名称为myBlog的仓库
   
3. 在项目中初始化 git

$ git init

4. 根目录添加.gitignore 文件

# Project exclude paths
.idea
.DS_Store
node_modules
/dist

4. 上传代码

$ git push -u origin master

5. 选择github actions
   

6. 设置工作流
   

7. 重命名并设置deploy脚本2
   脚本文件：参考的vitepress官方文档：https://vitepress.dev/guide/deploy#github-pages
   这里发现参考资料里面的node包有问题,换成我们的
   

name: Deploy VitePress site to Pageson:push:branches: [master]workflow_dispatch:
# 设置tokenn访问权限
permissions:contents: readpages: writeid-token: write# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:group: pagescancel-in-progress: falsejobs:# 构建工作build:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0 # 如果未启用 lastUpdated，则不需要- name: Setup pnpmuses: pnpm/action-setup@v2 # 安装pnpm并添加到环境变量with:version: 8.6.12 # 指定需要的 pnpm 版本- name: Setup Nodeuses: actions/setup-node@v3with:node-version: 18cache: pnpm # 设置缓存- name: Setup Pagesuses: actions/configure-pages@v5  # 在工作流程自动配置GithubPages- name: Install dependenciesrun: pnpm install # 安装依赖- name: Build with VitePressrun: |pnpm run docs:build # 启动项目touch .nojekyll  # 通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了- name: Upload artifactuses: actions/upload-pages-artifact@v3  # 上传构建产物with:path: .vitepress/dist # 指定上传的路径，当前是根目录，如果是docs需要加docs/的前缀# 部署工作deploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URLneeds: build    # 在build后面完成runs-on: ubuntu-latest  # 运行在最新版本的ubuntu系统上name: Deploysteps:- name: Deploy to GitHub Pagesid: deployment  # 指定iduses: actions/deploy-pages@v4 # 将之前的构建产物部署到github pages中

8. 点击确定，耐心等待15秒左右，就可以了，接下来查看我们的域名：
   
   这里我自己的是这个https://dl-hx.github.io/myBlog/

点击之后.可以看到我们的页面

---

最后，就部署完毕了

视频教程 3