一分钱不花,炫酷博客带回家
相信每一个极客，都想拥有自己的博客。大家首先肯定会想到如CSDN类似的平台。但是作为一个极客,这样的平台显然不能满足我们的需求。
首先我心中的博客是什么样的
- 足够炫酷,至于是要现代风格。
- 代价低廉,最好白嫖。花钱是不可能的。
- 部署足够简单,同时迁移性够好。
- 类似分享文档的网站，不是传统意义上的博客
方案选择
wordpress
最开始的选择 https://wordpress.com/zh-cn/
我搞到了人生的一台服务器。拥有自己的服务器意味，我当时的第一个想法就是搞一个自己的博客。于是就百度一顿搜索，决定使用wordpress。同时主题也很多，十分符合我的要求一个够酷炫的博客。
但问题也来了。首先编写很麻烦，需要你上传照片。同时服务器优惠期后，迁移和麻烦。于是到了后期，写博客的动力就逐渐消失了。这个博客也就名存实亡。
Hexo+github page
妥协的选择 https://hexo.io/zh-cn/
接触Hexo是一个偶然的机遇。某天开开心心的网上冲浪的时候发现一个标题。免费部署博客,一听到免费,我这就来劲了。马上去研究了下。这个工具的优点在于它是免费静态渲染出页面，且迁移相对方便，配合github page。可以直接免费搭建博客。特别适合喜欢折腾白嫖搭建博客的技术党。
但是，后面这个博客也慢慢废弃了。why,这不优点多多吗。
首先，部署过程比较繁琐，需要手动配置，每次部署都要手动编译上传github。写作时还得遵循 Markdown 格式，并在文件头部添加 YAML Front Matter。每次都在消磨我的热情，同时目录生成也很麻烦，分享文档的分级很麻烦。
博客园+obsidin
曾经认为的最优解决 https://www.cnblogs.com/ https://obsidian.md/
接触到博客园，偶然看到博客园的救园信息。简单了解到博客园的历史，大呼这才是极客该去的地方。于是慷慨解囊，同时收获一个会员。然后本着会员不用白不用的想法。就了解了下博客园的博客功能发现还不错。但还是wordpress一样的问题，写作很麻烦。但这时,我接触到了神器obsidin。发现他存在一个插件，可以一键上传本地的md笔记到博客园。
这时，我想简直无敌。免费白嫖，还可以一键上传。这一定是最优解了吧。但是，我又又又改主意了。因为，我还是想要分享文档的网站。博客园的自由度太小啦，没办法改造结构。所以博客文档和本地的笔记文档是结构严重不统一的。
vuepress+obsidin+github page
又是一天网上冲浪突然发现，一个非常符合我心中完美博客的网站。查看前端源码发现，是使用gitbook搭建的。但可惜gitbook已经停止维护了，主题也比较少。这让我郁闷了很久，甚至动过自己魔改源码的想法。但考虑相关成本问题，最好还是放弃啦。
同时搜索gitbook类似项目时,发现了我的女神vuepres。完美符合我的一切需求，使用github page，一分钱不花，搭建网站。提供了文档模式，可以自动根据本地文件目录生成网站目录。同时提供了github action的自动部署流方案。
这时你肯定会说，这不还是要提交git吗。还是太麻烦吗，我太懒了。一个命令我都不想打。抱歉obsidin真的无敌，提供一个叫git的插件，只需鼠标一点即可提交git。
vuepress+ide+github page
又是写文章的一天，发现obsidin的git更新又又报错了。自动更新也很不稳定，每次都没有保存成功。于是我又开始琢磨有什么新方案没有。突然我灵光一闪，为什么不直接使用ide进行更新嘞。本身ide就原生支持git的各种提交。同时本身vuepress是一个vue项目，使用ide也便于管理。
博客搭建
VuePress官网：https://vuepress.vuejs.org/zh/guide/introduction.html，
我是直接使用的VuePressHope这个主题 https://theme-hope.vuejs.press/zh/
后面的根据官方文档来即可，同时部署到 GitHub Pages我们可以直接使用github action来实现页面生成。这里官方文档有一些坑，这里是我目前使用的配置
name: docss
on:
push:
branches: [main]
workflow_dispatch:
jobs:
docs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: 设置 pnpm
uses: pnpm/action-setup@v4
- name: 设置 Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: pnpm
- name: 安装依赖
run: pnpm install
- name: 构建 VuePress 站点
run: pnpm docs:build
- name: 复制 CNAME 文件到构建目录
run: |
if [ -f CNAME ]; then
cp CNAME src/.vuepress/dist/
fi
- name: 部署到 GitHub Pages
uses: crazy-max/ghaction-github-pages@v4
with:
target_branch: gh-pages
build_dir: src/.vuepress/dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}这里的 CNAME 文件是我绑定的域名，如果你没有删除这个即可。CNAME文件中的域名会被自动绑定到github page。