【从0到1】用Github Pages和VuePress搭建博客

发布时间 2023-09-01 13:49:18作者: 从零开始的acm

写在前面

优点:

  • 免费
  • 简单,上手快
  • 相比博客园和CSDN自定义程度高

缺点:

  • 静态页面,缺少一些交互功能

我选择了它是因为只是想用博客做记录,不想花时间自己写前端~

Github Pages

在GitHub里新建一个Repository,命名为 [your_github_name].github.io,博客的网址就是这个啦~

eg. 这是我的博客网址 https://starlightlmy.github.io/

注意:进入网页后默认显示的页面的名字是index.html,可以在setting里修改默认的页面(也可以是docs文件夹下的index.html页面)

VuePress

它是“Vue驱动的静态网站生成器”

官方中文文档:

https://vuepress.vuejs.org/zh/guide/

下载、配置都可以参考官方文档,注意目录结构要和文档里一致

具体地,我在 vscode 里新建了一个项目,然后在 terminal 里用 yarn 包处理的(亲测 yarn 比 npm 好用)

注意:在安装过程中可能会出现 error:03000086:digital envelope routines::initialization error 错误,这是因为node.js版本过高,这时只需要在命令行输入 $env:NODE_OPTIONS="--openssl-legacy-provider" 便可继续往下执行

Git

在上传新博文的过程中,需要用到 Git 这个版本管理工具。

具体地,先 clone 刚才创建的Repository的网址,然后cd进入这个.git的文件夹下更新文件,再上传

git操作

  1. git add [file_name] 或者 git add . 表示将更新信息存入暂存区
  2. git commit -m "备注的更新信息(啥都行,写给自己看)",提交一次更新
  3. git push 把所有更新信息都从本地push到网上

更新博客

先在本地写好,然后使用 yarn build 命令,编译生成静态文件,它会更新到 /dist 下,然后push到网上即可