三分钟搭建一个博客网站

三分钟搭建一个博客网站

基于vuepress-theme-hope 和 github pages

• 样品-我的博客

准备运行环境

1. 安装nodejs 下载地址
2. 安装pnpm 参考资料

创建项目模板

pnpm create vuepress-theme-hope my-docs

创建过程

PowerShell 7.4.0
PS C:\Users\daiwencheng\Documents\BaiduSyncdisk\ob\ob\blogs> pnpm create vuepress-theme-hope my-docs
.../Local/pnpm/store/v3/tmp/dlx-7428     |  +83 ++++++++
.../Local/pnpm/store/v3/tmp/dlx-7428     | Progress: resolved 83, reused 61, downloaded 22, added 83, done
? Select a language to display / 选择显示语言 简体中文
? 选择包管理器 pnpm
生成 package.json...
? 设置应用名称 vuepress-theme-hope-template
? 设置应用版本号 2.0.0
? 设置应用描述 A project of vuepress-theme-hope
? 设置协议 MIT
? 项目需要用到多语言么? No
? 是否需要一个自动部署文档到 GitHub Pages 的工作流？ Yes
? 你想要创建什么类型的项目？ blog
生成模板...
? 是否初始化 Git 仓库? Yes
安装依赖...
这可能需要数分钟，请耐心等待.
我们无法正确输出子进程的进度条，所以进程可能会看似未响应
 WARN  2 deprecated subdependencies found: [email protected], [email protected]
Packages: +606
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 639, reused 409, downloaded 197, added 606, done
node_modules/.pnpm/[email protected]/node_modules/esbuild: Running postinstall script, done in 825ms

devDependencies:
+ @vuepress/client 2.0.0-rc.0
+ vue 3.3.10
+ vuepress 2.0.0-rc.0
+ vuepress-theme-hope 2.0.0-rc.2

The dependency was already listed in devDependencies.
If you want to make it a prod dependency, then move it manually.

Done in 25.3s
模板已成功生成!
? 是否想要现在启动 Demo 查看? Yes
启动开发服务器...
启动成功后，请在浏览器输入给出的开发服务器地址(默认为 'localhost:8080')

> [email protected] docs:dev C:\Users\daiwencheng\Documents\BaiduSyncdisk\ob\ob\blogs\my-docs
> vuepress dev src


  vite v5.0.6 dev server running at:

  ➜  Local:   http://localhost:8080/
  ➜  Network: http://10.246.84.128:8080/

访问

打开 http://localhost:8080/ 访问

效果

项目启动命令

• 需要先进入项目目录 my-docs

npm run docs:dev

发布到github

修改deploy-docs.yml

on:
  push:
    branches:
      # 确保这是你正在使用的分支名称
      - master

修改config.ts

export default defineUserConfig({
    base: "/my-docs/",

    lang: "zh-CN",
    title: "博客演示",
    description: "vuepress-theme-hope 的博客演示",

    theme,

    // Enable it with pwa
    // shouldPrefetch: false,
});

共享项目到GitHub

新建分支gh-pages,推送新分支到github

GitHub上开源

1. 打开仓库my-docs
2. 打开Settings
3. 底部设置Change visibility 为change to public
   

配置Github Pages

1. 打开仓库my-docs的Settings项,选中侧边栏pages,配置部署分支为gh-pages,点击save.
   
2. 在actions菜单栏中应该会触发自动发布,没有的话随便修改下master分支代码,就会触发自动发布
   
3. 发布完成后,此时pages页会显示访问域名,点击访问即可
   

发布后的效果

更新博客只在master分支上改,不要动gh-pages分支

master 是源码分支 gh-pages是发布分支
master的代码都是ts和一些markdown文件,需要build成html文件和js才行,即gh-pages

修复"编辑此页"功能链接跳转不对问题

• 修改theme.ts
• docsBranch: 文档所在分支,默认值: “main”

踩坑

踩了一些坑,可以看提交记录