10分钟部署一个个人博客

关于vuepress这里没必要过多介绍,感兴趣的可以直接去官网了解,下面是官网首页地址截图 :https://v2.vuepress.vuejs.org/zh/

透过这张图,我们也可以大致的对这个框架的特点有一定的认识,这就够了。其他的东西我们在使用过程中用到了会介绍。

本文就是基于他来进行的博客搭建以及部署。从搭建到部署10分钟绰绰有余了。


安装搭建

1. 环境依赖

安装之前务必先检测自己的环境:

这一步很重要,他自己决定了你搭建的速度和舒适度,不管是做前端还是后端环境出错都是非常痛苦的事情,为了不必要的返工,请保证这一步顺利。


2. 项目创建

根据官方文档的描述,创建一个vuepress项目的方式不唯一,这里推荐使用懒人式一键创建,看下面命令:

shell 复制代码
npm init vuepress vuepress-starter

vuepress-starter就是你博客项目的项目文件夹名称,自己想怎么写就怎么写。

创建完之后,你的项目大致的目录结构差不多是下面这样的:

rust 复制代码
├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

docs/.vuepress 目录,即源文件目录下的 .vuepress 目录,是放置所有和 VuePress 相关的文件的地方。当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

rust 复制代码
# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

pacjage.json中添加下面的script:

javascript 复制代码
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  • dev:本地运行
shell 复制代码
npm run docs:dev

下面的命令类似,但在本文中并不会用到,就不再赘述。

  • build: 部署打包

自定义博客信息

确保到这一步之前,你的项目可以通过npm run docs:dev命令成功跑起来。

首先,自定义我们能看到的首页一切,比如:下面是我自己博客的截图示例

  • 修改主页按钮信息

找到项目中的那个README文件,修改其中的内容,效果如下,根据自己的需求修改之后,再次运行项目查看效果,你就知道具体改动了哪些东西。

  • 修改主页logo和名称

找到项目中一个名为config.js的文件,这里可以修改右上角的功能导航栏、主页名称和座右铭;


写博客

核心内容来了,这些外在的东西打理好之后,我们如何书写并上传自己的博文内容呢?

其实,在项目中有一个posts的文件夹,里面存放的就是我们的博客文章,他对应博客中右上角的Article路由;比如这样:

需要注意的是,文章支持markdown语法,因此如果你了解一些他的语法基础,那将会如虎添翼,其中有一些写法格式是相对固定的。看下图,这是每一篇文章开头必须要写的,他将决定你的文章如何展示。


其他个性化

如果你有其他自定义的需求,请参考下面的修改建议:

  1. 新增主题和插件

config.js中进行调整。

  1. 自定义文章列表的样式

请在docs>components>ArticleList.vue进行修改;

  1. 其他...

不懂就问.


自动部署

节约成本,一切从简,这里直接部署在GitHub上,通过强大的Actions,借助脚本一键自动部署,你要做的就是更新完博客记得git push更新你的项目即可,其他的构建流程由脚本完成,无需干预。

看下面的目录:

如果没有自行创建一个dedploy-docs.yml;

workflows脚本内容如下:

powershell 复制代码
name: 部署文档

on:
  push:
    branches:
      # 确保这是你正在使用的分支名称
      - master

permissions:
  contents: write

jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
          # 如果你文档需要 Git 子模块,取消注释下一行
          # submodules: true



      - name: 设置 Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: npm

      - name: 安装依赖
        run: npm ci

      - name: 构建文档
        env:
          NODE_OPTIONS: --max_old_space_size=8192
        run: |-
          npm run docs:build
          > docs/.vuepress/dist/.nojekyll

      - name: 部署文档
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          # 这是文档部署到的分支名称
          branch: gh-pages
          folder: docs/.vuepress/dist

项目上传到github之后,等待一段时间,脚本会创建一个名为gh-page的分支,我们在settings中找到Pages,选择该分支作为部署分支,并且如果你有自定义域名的需求,也可以在这里进行设置;


流程大致就是这样,下面列两个需要注意的问题:

  • 部署完成之后,你可以通过你的项目地址直接访问博客首页,如果没有自定义域名的情况下,此时你可能会遇到首页CSS样式没有加载的情况;

我们就需要在config.js中新增一个base字段,内容为/vblog/这里的vblog指的是你github上的那个项目名称;

  • 如果你使用了自定义域名,访问时就将该字段留空字串即可,如下:

本文到此结束,有问题欢迎留言讨论。

相关推荐
ZwaterZ2 分钟前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七2 小时前
vue2-vuex
前端·vue
小小黑0074 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler7 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
逆旅行天涯12 小时前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
DDDHL_1 天前
vitepress博客模板搭建
前端·vue
说书客啊1 天前
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
java·spring boot·node.js·vue·汽车·毕业设计·课程设计
刚刚好ā1 天前
uni-app跳转外部链接方式汇总--超全
前端·vue.js·uni-app·vue·webview
木子七1 天前
vue2-脚手架
前端·vue
cronaldo911 天前
研发效能DevOps: Vite 使用 Axios 实现数据双向绑定
vue.js·vue·devops