最开始只想搭建一个博客

1.选用vitepress

这段时间刚开始时原本想尝试搭建一下个人博客系统（PC和手机端都可以查看使用的响应式页面），搜索过程中看了一下vuepress，尝试搭建使用了一下，过程中发现了vitepress，感觉还是vitepress更方便快捷，基于文件路由，有不少的markdown扩展，转而使用vitepress 😁

2.github pages + github actions

过程中其实就是按照官方文档搭建项目，查文档，达到自己想要的效果。到了部署的时候，想到了github pages 和github actions 也是学习了一波，

在项目根目录创建.github/workflows/deploy.yml

发现有时候提交代码重新部署在github.io上只显示github仓库名，怎么都找不到问题，折腾了好久（过程非常曲折）换过分支、甚至多个远程地址,最终发现每次github action 总是执行两次，有点不对劲，搜索发现需要在仓库:Settings -> Pages -> Build and deployment 将source设置为 Github Actions，否则两边都执行 😂

到这里已经成功搭建，也可以在https://shangjundragon.github.io打开查看了，此时发现打开速度有些慢，有时候第一次打不开需要刷新几遍，而且微信中打不开。

3.寻找国内静态网站托管平台

然后想看一下啊国内有没有类似github pages的平台，最终选择的帽子云，直接可以对接github（ Installed GitHub Apps GitHub Apps augment and extend your workflows on GitHub with commercial, open source, and homegrown tools.）最终在github.io和maozi.io同时部署，推送代码后，两边都会构建重新发布，解决了github.io访问慢的问题

4.模仿copy好看的博客画面样式

然后又搜索了一下别人的博客（看一下博客应该是什么样子，应该放什么内容，copy一下好看的 😂），成功在知乎寻找到了目标 https://idealclover.top/,然后就先准备复制一下首页

截图
ai生成代码
问问deepseek，再改吧改吧

互相学习嘛😂，过程中学习到了

响应式界面

响应式界面，通过@media (max-width: 900px) @media (max-width: 600px)，在设备不同宽度的时候重写覆盖class的css，

css

.profile-page {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 8vw;
    position: relative;
}

@media (max-width: 900px) {
    .profile-page {
        flex-direction: column;
        gap: 0;
    }
}

css变量和切换主题

切换明亮和深色主题（css变量，定义主题相关变量，通过切换类名或属性更新样式）

css

/* 根元素定义变量 :root 中定义的变量是全局的，可以被所有子元素继承*/
:root {
    --bg-color: white;
    --text-color: black;
}

/* 深色主题变量 当 HTML 元素有 data-theme="dark" 属性时，覆盖变量值
当 <html> 元素添加 data-theme="dark" 属性时，属性选择器 [data-theme="dark"] 
的优先级高于 :root，因此会覆盖原有变量值。
*/
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: white;
}

/* 应用变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease;
}

多样式表切换：根据主题加载不同CSS文件（适合复杂主题）

function loadTheme(theme) {
  const link = document.getElementById('theme-stylesheet');
  link.href = `${theme}-theme.css`;
}

/**
 * 通过 JavaScript 修改 <html> 的 data-theme 属性，触发 CSS 变量的重新计算。
 所有使用 var(--bg-color) 和 var(--text-color) 的元素会自动更新样式
 */

5.博客内容想法

到这里首页基本上自己搭建（学习）完成了，想想内容应该是什么样的，

最终想法

1.分不同模块(技术、美食、生活、随笔、测评等等)，每篇内容可以属于多个模块
每个模块中分为系统性的归档目录索引文档，比如技术模块下java大类，linux大类，每个大类又分小类，也有日常随便写的普通文档（不属于模块的任何大类）

6.评论区功能

到这里又差不多了，然后就添加了一下文章博客，添加了搜索功能，搜索文章中的关键字，跳转打开到对象文章，到此应该算结束了，可是我又突然想要评论区功能 😂

本来打算自己手写，又想要免费的方案（白嫖静态托管服务，白嫖后端服务，白嫖数据库服务）

静态托管服务在国内和国外都很多
后端服务,搜索到了国外的Vercel、CLoudfare、 Netlify，国内的比如uniCloud的云函数（别的没有仔细查）
数据库，国内的SqlPub、uniCloud云数据库，国外的LeenCloud

第三方现有评论区方案

然后发现已经有现成的解决方案，直接接入就好了

Waline 一款简洁、安全的评论系统。
giscus 利用 GitHub Discussions 实现的评论系统，

Waline需要后端服务（完全免费部署可免费部署在 Vercel 上，搭配LeenCloud食用），giscus比较简单，接入github就好了两款中间都试过（过程比较曲折，看不懂太多英文文档，iconfont.js打包时有window，打包失败，搞了很久没找到问题在哪），最终选择了Waline

TIP

Waline部署在Vercel上给的域名(xxxxxx.vercel.app)在国内访问不了，查了很久的文档在域名服务商那里解析一个CNAME指向Vercel上给的域名，成功解决问题。

参考博客 PDF 文件

7.CMS

到此整体博客功能基本就搭建起来了，把以前记得一点笔记文章添加到了系统中，非常的ok，达到了预想的效果，但是每次都要代码编辑器，编辑md文档，提交上传代码还是感觉"太重了"，要是能实现在线编辑发布就好了，但是我这边是一个静态网站，没有后端服务该怎么做呢

最终搜索文档在问一下deepseek，找到了可行的方案：页面中引入，通过第三方平台授权github仓库，在线编辑仓库文件提交，自动提交部署

Netlify CMS
Decap CMS

最终使用了Decap CMS，在public目录下引入Decap CMS 的js库，配置config.yml(试错了很久😂) 最终虽然没有达到想象中的使用效果，但是退而求其次，也差不多可以较好的实现在线编辑和按日期分类的效果。

结尾

到此算是结束了，开始以为就是搭建了博客，维护md文件而已，没想到折腾了这么多东西(Waline、Decap CMS、Vercel、Netlify、域名解析CNAME) 这些使用过程，后面在慢慢补充到博客中，作为一个技术笔记。

最开始只想搭建一个博客 ​

1.选用vitepress ​

2.github pages + github actions ​

在项目根目录创建.github/workflows/deploy.yml ​

3.寻找国内静态网站托管平台 ​

4.模仿copy好看的博客画面样式 ​

响应式界面 ​

css变量和切换主题 ​

5.博客内容想法 ​

6.评论区功能 ​

第三方现有评论区方案 ​

7.CMS ​

结尾 ​