教你如何0基础免费搭建个人博客

Jogs原创大约 3 分钟

来自 gpt 的摘要：本文为零基础小白提供了一个简单易行的指南，教你如何使用 VuePress Theme Hope 框架搭建个人博客。无需任何前端开发经验，只需按照步骤操作即可。你需要准备 vscode 编辑器、Github 账号（可选）、git 工具（可选）、Node.js 和 npm。首先，通过命令创建初始项目，然后按照官方指南进行自定义设置。接着，本地运行项目进行预览，最后将项目打包并部署到 Github Pages 上。部署成功后，你就能通过项目链接访问自己的博客。详细步骤请参考文中说明，有任何问题欢迎在评论区提出。

写在前面

笔者在勘写本文时对前端开发一窍不通，本文旨在指导 0 基础的小白能够免费搭建出属于自己的个人网站，不涉及技术方面的讲解，读者只需跟随本文操作即可，如有讲述不妥的地方，欢迎评论区指出。
本文所搭建的博客选用 VuePress Theme Hope 博客框架，相关介绍参考官方文档。

你需要的准备

vscode 编辑器
github 账号（可选，用于在部署环节使用）
git 工具（可选，用于在部署环节使用）
Node.js（LTS 版本，version >= 18.19.0、20.x）
npm（version >= 8）

提示

可以在控制台执行 node -v 和 npm -v 检查是否安装成功和版本是否符合要求。

搭建你的博客

1）创建项目

创建项目路径：建议路径全英文（eg：D:\projects\vuepress-theme-hope\）
创建初始项目：打开控制台，路径对应上一步，执行 npm init vuepress-theme-hope@latest [dir]

提示

这里的 [dir] 是一个参数，你需要使用真实的文件夹名称替换它，例如 docs、blog 或其他你喜欢的名称。

此时会自动生成项目，第一个选项选择简体中文，后面的选项有精力的可以研究一下，可以全部回车跳过。

2）自定义你的博客

此时你的博客项目已经生成完毕，你可以通过官方指南对你的博客项目进行了解和自定义，这里就不赘述了。

提示

这里建议可以先进行下面的步骤，等成功部署好项目后再回来尝试更改你的博客。

3）本地运行你的博客

在 vscode 中打开 package.json 文件，选中并运行 docs:dev 脚本将项目部署在本地，可以在浏览器地址栏直接输入对应地址，默认地址为 localhost:8080。

部署你的博客

1）打包项目

在 vscode 中打开 package.json 文件，选中并运行 docs:build 脚本对项目自动打包，打包后的项目将存放在 \[dir]\src\.vuepress\dist 文件夹中。

2）将项目部署在 github page

github 创建仓库：仓库名称建议填写 [username].github.io，可以省去一些改配置的麻烦，有能力的可自行研究
push 你的 dist 项目文件：将 dist 的内容复制到新的文件夹下并右键打开 Git Bash ，参考以下命令：
```
git init
git add *
git commit -m "first commit"
git branch -M main
git push -f [仓库的SSH地址] main
```
在哪里找 SSH 地址：
提示
在 push 的时候有可能出现 git@github.com:Permission denied 报错，参考文章

3）获取项目链接

打开 github 项目仓库的 Settings ，在 Pages 中即可发现自己的项目链接，成功打开则部署完成。

总结

以上就是文章的全部内容了，关于博客的设计也可以参考大佬的开源项目，如果有什么问题欢迎在评论区提出，我会一一解答。