用vuepress免费搭建个人静态博客

之前也搭建了多次个人博客。有自己写前后端的,有使用Ghost搭建后自己改主题的。这些都需要自己有服务器,学生时买云服务器非常便宜,现在买服务器还是有点小贵,所以最近又重新捣腾了个静态博客。

工具 【VuePress】 vue 驱动的静态网站生成器

具体使用方法官方文档讲得非常清楚,这里就不赘述了。文档肯定是要看的,不然写都不知道怎么写

主题

官方的主题不能满足我的需求,嘿嘿!找了个vuepress-theme-reco一款简洁而优雅的 博客 & 文档 主题。

上线

国内使用github始终是速度慢啊,我用的是码云。注意了这里要想直接使用wangshiting.gitee.io这样直接访问你的博客,需要你创建的仓库名与你的用户名相同。创建好仓库后,将构建后的dist里的文件推送到这个仓库,在码云的》服务》Gitee Pages开启,这样就可以访问你的博客啦。

走一遍详细流程

  mkdir blog #新建文件夹
  cd blog\
  # 初始化package.json可以一直回车
  npm init
  # 安装vuepress
  npm i vuepress -D
  # 安装主题
  npm i vuepress-theme-reco -D
  # 在package.json的scripts中加入
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs",
  # 在根目录下建一个README.md文件,这里就是你的主页内容
  # 在根目录下创建一个docs文件夹
  # docs下创建一个.vuepress文件夹
  # .vuepress下建一个config.js,这就是配置文件
  # 使用主题
  // .vuepress/config.js
  module.exports = {
    theme: 'reco'
  }
  # 本地预览
  npm run docs:dev
  # 生成静态文件 会生成一个dist文件夹,在.vuepress下
  npm run docs:build
  # 然后就可以推送到码云上线了。

用vuepress免费搭建个人静态博客 | 王世庭的博客

你可能感兴趣的:(用vuepress免费搭建个人静态博客)