获取个人博客

获取个人博客

前置工作

提示

• 先卸载 自己电脑上的 node （nvm 不是必须装的 但是 我感觉 有个版本控制工具会更好一点！）

通过以下 链接 获取 nvm （node 版本控制的 工具）

• nvm

nvm

根据操作 下载 并 安装 nvm

    nvm -v  //查看 当前 nvm 版本号 
    nvm list  // 查看 已经安装的 node 版本 
    nvm install [node-version] // 安装对应版本的 node 
    nvm use [node-version]  // 应用对应版本的 node 
    node -v // 查看 当前 使用的 node 版本

搭建博客项目

提示

• 在安装好 nvm 和 node 之后 搭建一个 简易的 博客项目文件 vuepress-theme-hope

• 首先在安装目录下创建docs目录，然后使用如下命令初始化项目；

    npm init vuepress-theme-hope@next docs

• 初始化过程中 会安装所有依赖，还需要对项目进行一些设置，具体参考下图：

初始化项目

• 安装完成后可以选择立刻启动，也可以使用如下命令启动；

    npm run docs:dev

• 启动成功后即可访问，访问地址：http://localhost:8080/

提示

• 如果 有 idea 工具的话 可以直接用 idea 工具打开项目 并且可以 编辑

到此 简易的 项目模板就 拥有了 ！！！

使用 GitHub 保存项目代码

项目搭建好以后，推荐把源码放到 GitHub 仓库中。Cloudflare Pages 后面可以直接绑定 GitHub 仓库，每次提交代码以后自动构建和发布。

先进入 GitHub 注册并登录账号，然后新建一个仓库，例如：myBlog。

githubCreate

创建仓库时建议这样选择：

• Repository name：填写你的项目名，例如 myBlog
• Public / Private：个人博客建议选择 Public
• README、.gitignore、license：如果本地项目已经存在，可以先不勾选，避免第一次推送时产生冲突

提示

如果仓库已经创建好了，可以直接复制仓库地址。HTTPS 地址一般长这样：

https://github.com/你的用户名/你的仓库名.git

SSH 地址一般长这样：

git@github.com:你的用户名/你的仓库名.git

推送项目前的准备

通过 idea 打开 项目以后 会有 以下的 目录 文件

目录结构

这样 就可以 自己 随意发挥了 可以 放上自己的文章 可以做笔记 等等

提示

• 打包项目

npm run docs:build

VuePress 打包后会生成 src/.vuepress/dist 目录。这个目录是构建产物，不建议提交到 GitHub。Cloudflare Pages 会在服务器上重新执行构建命令，并使用构建后的 dist 目录发布。

所以需要在 .gitignore 中加入：

src/.vuepress/dist/
node_modules/

gitIgnore

使用 Git 提交到 GitHub

电脑上需要先安装 Git。安装完成后，可以在项目根目录右键打开 Git Bash，也可以在 idea 底部的 Terminal 中执行命令。

第一次使用 Git 前，建议先设置提交用户名和邮箱：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

如果当前项目还不是 Git 仓库，先初始化：

git init
git branch -M main

然后把项目文件提交到本地仓库：

git add .
git commit -m "初始化个人博客项目"

绑定 GitHub 远程仓库：

git remote add origin https://github.com/你的用户名/你的仓库名.git

如果之前已经绑定过其他仓库，可以改成：

git remote set-url origin https://github.com/你的用户名/你的仓库名.git

最后推送到 GitHub：

git push -u origin main

提示

现在 GitHub 不支持账号密码直接推送。HTTPS 推送时，Password 位置需要填写 GitHub Personal Access Token。也可以配置 SSH Key 后使用 SSH 地址推送。

后续每次改完文章，都可以用下面三条命令提交：

git add .
git commit -m "更新博客内容"
git push

使用 Cloudflare Pages 发布博客

代码推送到 GitHub 后，就可以用 Cloudflare Pages 自动构建并发布静态网站。

进入 Cloudflare 控制台，选择左侧的 Workers & Pages，然后点击 Create application，选择 Pages。

新增项目

选择 Connect to Git，然后授权 Cloudflare 访问 GitHub。

创建项目

授权完成后，选择你的博客仓库，例如 myBlog，然后进入构建配置页面。

配置项目

构建配置可以这样填写：

Project name: myBlog
Production branch: main
Framework preset: None / VuePress
Build command: npm run docs:build
Build output directory: src/.vuepress/dist
Root directory: 留空

环境变量建议添加：

NODE_VERSION=20
NODE_OPTIONS=--max_old_space_size=4096

其中：

• NODE_VERSION=20：指定 Cloudflare 使用 Node 20 构建
• NODE_OPTIONS=--max_old_space_size=4096：给 VuePress 构建更多内存，避免文章或图片较多时构建失败

点击 Save and Deploy 后，Cloudflare 会拉取 GitHub 仓库代码，自动安装依赖、执行构建命令，并把 src/.vuepress/dist 发布成静态网站。

部署成功后，会得到一个类似下面的访问地址：

https://你的项目名.pages.dev/

部署成功

常见问题

如果页面可以打开，但是没有 CSS 样式，通常是 VuePress 的 base 配置和 Cloudflare 部署路径不一致。

如果你的网站直接部署在 Cloudflare Pages 根路径，例如：

https://你的项目名.pages.dev/

那么 src/.vuepress/config.ts 中建议配置：

export default defineUserConfig({
  base: "/",
});

如果你部署在子路径，例如：

https://你的域名.com/myBlog/

才需要设置：

export default defineUserConfig({
  base: "/myBlog/",
});

提示

每次推送到 GitHub 的 main 分支后，Cloudflare Pages 都会自动重新部署。你可以在 Cloudflare Pages 的 Deployments 页面查看构建日志。

到此 你的 个人博客就 配置完成啦！！！ 可以愉快的 发布自己的 文章 自己的 笔记 respect all fear none

以下相关文章

• 搭建项目1

• 搭建项目2