vuepress 搭建 文档 博客

文档博客

怎么玩的,直接参考 vuepress 文档吧, 可以木事总结一些知识点,或者转载,每日反复翻看几遍,如沐浴春风般温暖,不扯其它了,简单写写自己搭建的模板怎么部署到 github 的静态页面, 由于git访问比较慢,所以最后 会搬到 码云上 边,那速度,飞一般的感觉....

先搭建模板吧,

node环境, vuepress环境就不说了,直接参考文档

小弟现下使用的是: reco 这个版本, 我替 杂南 打个广告, 记得广告费

老惯例一步步来, 最怕一篇文章写完了,读者看完了,来一句,艹,他妈的,傻逼玩意,写的毛啊, 哈哈, 这就失去了,写博客的意义, 博客不适合写原理, 想写原理去掘金,知乎啊 .大佬多, 文采排版好一点, 好多大佬会帮你斧正问题, 几天上完阅读量,还是没有问题的, 不过这些前提 就是肚子里待有墨水,  所谓,要想生活过的去,  木事就带用点绿,不废话了,开撸

1. 进入github,点击 new,创建仓库

2.  进入创建页面, 写你的仓库名,这些写完,最后 点击 create 按钮,会进入当前仓库页

 

3. clone 当前仓库,选择 用 ssh 的,有读写权限, https 没有写的权限

注: 不能克隆的,去点击右上脚头像, 找到倒数第二个 setting,在这里添加你当前电脑上的秘钥, 没有的就自己生成一下

4. 再桌面上克隆仓库

终端采用的是 cmder, 自带git, 喜欢的小伙伴可以去试试, 这个终端还是很棒的,

5. 克隆后按下列执行, 初始化package.json  脚本, 安装vuepress, 和 vuepress-theme-reco 皮肤到生产依赖

# git clone 仓库地址

# cd 项目目录

# npm init -y 

# yarn add vuepress vuepress-theme-reco

6. 根目录下新建一个 docs文件, 在docs 文件夹下,新建 README.md文件,如下操作

# mkdir docs

# cd docs

# touch README.md

在 README.md 文件中写入 下边一句话(这是markdown语法)

# Hello Vuepress

到现在最后目录是:

7. 配置启动脚本,再package.json 中的 scripts 中

  "scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs"
  },

8. 执行npm start 启动项目....,启动完成,打开下边的 地址,看到下边这个页面了

9. 接着配置vuepress, 再docs 文件夹下创建如下目录,config.js 是配置文件, puclic 文件夹是存放静态资源的,如图片等

config.js导出一个对象,如下, 关于具体配置,参考, 配置文档, 主题配置参考 reco, 就不做多赘述了

module.exports = {
  title: 'demo模板',
  description: '我的第一个',
  markdown: {
    lineNumbers: true
  },
  theme: 'reco', // 使用皮肤
  themeConfig: {
    nav: [{ text: '主页', link: '/', icon: 'reco-home' }],
    version: '1.0'
  },
  plugins: []
}

10. 重启项目...,看到如下

11. 部署到到 github 静态页面,

1. 首先去你的仓库, 把仓库名拷贝一下

2. 打开 docs 下的 config.js 文件,配置base属性, 名字就是的你的仓库名, 记得带上 双 / /

module.exports = {
  base: '/demo-vue-press/',
  title: 'demo模板',
  description: '我的第一个',
  markdown: {
    lineNumbers: true
  },
  theme: 'reco',
  themeConfig: {
    nav: [{ text: '主页', link: '/', icon: 'reco-home' }],
    version: '1.0'
  },
  plugins: []
}

3. 配置自动打包脚本,再根目录下新建 deploy.sh (叫啥名字无所谓,但必须.sh 作为文件名),把下边的内容写入进去,

记得把这个换成你自己的地址:

以下配置是自动打包,然后把打包的文件传到 仓库的 gh-pages 分支, 记得换成自己的仓库地址

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://.github.io/
git push -f [email protected]:frontend-qin/demo-vue-press.git master:gh-pages

cd -

4.  到这里后,接着执行这个脚本

你可以直接把这个脚本拖拽到终端里执行, 也可以再vscode 的终端里,直接输入命令执行这个文件

输入完之后,点击 确定 (Enter键), 会弹出git 窗口,如下, 等执行完之后, 这个窗口就会关闭, 切记前边的仓库地址步骤, 没有错误,否则这里是会执行报错的

5. 打开你的仓库页面,刷新一下,点击分支, 会看到一个gh-pages 分支,此时切换到这个分支, 会看到静态文件的

6. 点击仓库的 setting

7. 进入这个页面,下拉找到 GitHub Pages, 会看到有个地址,把分支 选择 gh-pages 分支

8. 点击这个地址,就是你刚才的页面了

9. 赋值这个地址,放到仓库页展示, 点击仓库,回到仓库页面, 点击 edit  编辑,把地址放到后边, 保存,到这里基本结束了

12. 我们都知道, github 再国内访问是很卡的, 尤其没有墙的小伙伴, 为了速度, 选择把这个博客部署到码云上, 

 登录进来后,在右上角下选择

13. 选择导入你刚才的博客模板

14. 导入完成, 点击服务,选择, 码云page

15. 选择分支后 , 点击 启动

16, 启动完成, 会出现部署地址

17. 点击这个地址, 就可以访问了, 以后小伙伴们就可以不借助任何东西,自己撸博客了