搭建免费的个人博客网站

约 1037 字大约 3 分钟

1. 概述

目前有各种博客开源工具，都可以将 Markdown 文件转换为静态网站并提供丰富的Markdown语法增强功能。

例如 Vuepressopen in new window, VitePressopen in new window ，Hugoopen in new window，Jekyllopen in new window，Hexoopen in new window, Docsifyopen in new window。

选择好博客工具之后，构建项目得到静态网站页面，部署至个人服务器或者第三方静态网站托管平台，个人博客网站即搭建完毕。

本文以基于Vuepressopen in new window的博客项目，部署至Cloudflareopen in new window，Netlifyopen in new window，Gitee Pagesopen in new window为例，帮助快速搭建免费的个人博客网站。

2. 本地环境搭建

2.1. VuePress

根据安装/使用open in new window，快速初始化基于 vuepress 使用 VuePress Theme Hope 主题的博客项目。

2.2. IDE

本地安装typoraopen in new window或者vsCodeopen in new window作为项目编辑器。

强烈推荐使用typora

个人觉得是最好的Markdown编辑器，并且支持集成各类图床。

2.3. 图床

图床需选择支持图片外链为https。

由于Chrome等浏览器默认安全策略，加载http图片失败。

需手动配置隐私和安全>更多内容设置>不安全内容>允许显示不安全内容

聚合图床open in new window

免费存储1000张图片。

集成typora
1. 配置PicGoopen in new window。token 访问用户中心open in new window可以获取。
2. 配置typora。
PicGo集成typora

定期备份

担心免费图床突然无法访问，可以按照如下步骤进行备份。

复制图片URL

运行脚本

# 图片URL列表
urls=("https://pic.imgdb.cn/item/65f5b2bd9f345e8d03f022c0.png"
"https://pic.imgdb.cn/item/65f5b2679f345e8d03ed0734.png")

# 循环下载
for url in "${urls[@]}"; do
    filename=$(basename "$url")
    curl -o "./$filename" --location --request GET "$url" \
    --header "Host: pic.imgdb.cn" \
    --header "Connection: keep-alive" \
    --header "Referer: $url"
done

项目目录
可以直接将图片存放至项目目录，配置typora复制图片到./assets文件夹。
图像设置

3. 部署

3.1. Cloudflare

提示

免费易用的Pages托管平台，站点在国内，访问稳定。

登录Cloudflareopen in new window，点击 Workers 和 Pages 概述，创建应用程序。
创建应用程序
选择构建源，支持GitHub，GitLab平台，以及手动上传资产。
注意
手动上传资产对只能上传小于25M的文件，超出大小的Page可以使用上传至GitHub或者GitLab平台，然后进行部署。
选择构源
选择存储库，设置构建和部署配置。
部署配置