10 分钟带你免费搭建一个属于自己的博客
2026-06-04 13:27:17
10分钟内可完成一个免费博客的搭建，主要借助docsify工具生成文档网站，并利用GitHub和Vercel实现免费托管和快速访问。 以下是具体步骤：
安装必要工具- 安装Node.js访问Node.js官网，下载并安装。安装完成后，打开命令行输入node，若显示版本号（如Welcome to Node.js v14.17.1）则说明安装成功。
- 安装docsify在命令行输入以下命令全局安装docsify：npm i docsify-cli -g初始化项目目录：docsify init ./docs初始化完成后，目录结构如下：λ ls docs_coverpage.md _navbar.md _sidebar.md about.md blog/ index.html README.md wechat/
index.html为入口文件，README.md为首页文件，.nojekyll用于阻止GitHub Pages忽略下划线开头的文件。
启动本地服务器在命令行输入以下命令启动服务器，默认访问地址为
http://localhost:3000/：docsify serve docs使用Markdown语法编辑README.md文件，内容会实时更新。推荐使用
Markdown练习网站学习语法，本地编辑可用Typora工具。配置侧边栏新建_sidebar.md文件用于展示侧边栏内容，并在index.html中添加以下配置：
window.$docsify = { loadSidebar: true};
- 注册GitHub账号并新建仓库将本地docs文件夹内的所有文件上传至GitHub仓库。
- 启用GitHub Pages
打开仓库的Settings，找到GitHub Pages选项。
在Source中选择main branch / docs，保存后等待几分钟生效，博客即可通过GitHub Pages访问。
- 导入GitHub仓库访问Vercel官网，用GitHub账号登录后导入博客仓库。
- 配置部署选项
自定义博客名称。
设置ROOT DIRECTORY为docs。
点击Deploy，部署完成后即可获得Vercel提供的博客地址，访问速度更快。
图片显示问题
若使用本地图片，可通过Typora配合PicGo或upgit上传至GitHub图床。
若第三方图床图片提示403错误，在index.html中添加以下代码：<meta name="referrer" content="no-referrer" />
GitHub访问慢或打不开
使用加速工具（如
Dev-Sidecar）。手动修改hosts文件（路径：C:WindowsSystem32driversetc），需管理员权限。
博客功能配置
调整index.html中的window.$docsify对象，例如添加搜索栏、侧边栏等：window.$docsify = { name: '博客名称', loadSidebar: true, search: { maxAge: 86400000, paths: 'auto', placeholder: { '/zh-cn/': '搜索', '/': '输入关键词搜索' } }};
- 后续更新：修改本地文件后上传至GitHub，Vercel会自动同步更新。
- 扩展功能：可参考文档添加更多插件（如代码高亮、目录导航等）。
热门标签
