Writing
自己创建个人博客的详细步骤
这篇文章记录从准备素材、搭建静态页面、放入照片和文章,到用 GitHub 和 Cloudflare Pages 发布个人博客的完整流程。
1. 确定博客要放什么
先想清楚个人博客的用途。比如:生活照片、文章笔记、项目展示、联系方式、实时数据。内容越清楚,页面结构就越好搭。
2. 整理本地文件夹
建议把照片放到 assets/life,把文章和附件放到 assets/article,主页使用 index.html,样式使用 styles.css,动态渣染使用 script.js。
3. 搭建静态首页
用 HTML 把首页分成几个区域:首屏介绍、生活片区、文章和笔记、项目展示、实时数据、联系方式。每个区域都要有清楚的标题和内容。
4. 写好样式
用 CSS 统一字体、颜色、间距、卡片、按钮和响应式布局。手机屏幕上,三列网格应该自动变成单列,这样照片和文章才好读。
5. 加入生活照片
不要在网页里写 E:\ 这样的电脑绝对路径。正确做法是把照片放到站点文件夹里,比如 assets/life/old-bridge.png,然后在页面中用 ./assets/life/old-bridge.png 引用。
6. 加入文章
Word 文档在浏览器里往往会直接下载,不适合作为博客内的阅读页。更好的方式是把文章写成 HTML 页面,然后把 Word 文档当作附件保留。
7. 提交到 GitHub
修改完成后,在项目目录执行 git add .、git commit -m "Update blog content"、git push。也可以直接双击 edit-and-publish.bat 自动发布。
8. 部署到 Cloudflare Pages
在 Cloudflare Pages 里连接 GitHub 仓库。静态网站不需要构建命令,Build output directory 填 /。之后每次 git push,Cloudflare Pages 都会自动重新部署。
9. 常见问题
如果图片不显示,先检查图片是否已提交到 GitHub,再检查路径是否从 ./assets/ 开始。如果页面还是旧内容,按 Ctrl + F5 强制刷新。