CodingYang

vuePress-theme-reco Rackar    2018 - 2024
CodingYang CodingYang

Choose mode

  • dark
  • auto
  • light
首页
类别
  • 技术
  • 个人
  • 思考
  • 儿童
标签
时间线
联系
  • 关于
  • RSS订阅 (opens new window)
  • GitHub (opens new window)
  • 简书 (opens new window)
  • CSDN (opens new window)
  • WeChat (opens new window)
GitHub (opens new window)
author-avatar

Rackar

67

文章

44

标签

首页
类别
  • 技术
  • 个人
  • 思考
  • 儿童
标签
时间线
联系
  • 关于
  • RSS订阅 (opens new window)
  • GitHub (opens new window)
  • 简书 (opens new window)
  • CSDN (opens new window)
  • WeChat (opens new window)
GitHub (opens new window)
  • Codingyang Blog 静态文章站

    • 更新
      • 相关命令
        • 其他说明
          • 相关技术

          Codingyang Blog 静态文章站

          vuePress-theme-reco Rackar    2018 - 2024

          Codingyang Blog 静态文章站


          Rackar 2019-11-01 Vue.js

          # 更新

          站点更换为 vuepress-theme-reco 主题。自动分类和标签聚合,以及分页和评论。

          有些注意事项:

          1. 不使用一级标题,使用 yaml 来编辑元数据。日期中要注意前面补齐 0。
          ---
          title: Node 爬虫编写
          date: 2019-05-18
          tags:
            - Node.js
          categories:
            - 技术
          ---
          
          
          1
          2
          3
          4
          5
          6
          7
          8
          9
          1. 评论使用 Valine

          2. 编译结果在/public/,而非docs/.vuepress/dist

          3. Github Action 脚本可用,只要 push blog 分支,自动将生成静态文件文件写入 master 分支,Page 直接访问。同时支持使用 scp 静态复制文件到服务器。

          # 相关命令

          没有安装 yarn 的,把以下命令中的 yarn 替换为 npm run

          # 安装依赖
          yarn install
          
          # 本地启动
          yarn dev
          
          # 编译
          yarn build
          
          # 编译为非根目录站点 (还需修改package.json中的script中的参数)
          yarn buildSubpath
          
          # 自动上传静态部署文件
          yarn autopush
          
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14

          # 其他说明

          使用 vuepress 创建 SEO 友好的静态文章站。一键发布到 github page,内置 github action 自动部署脚本。

          vuepress 通过一定号称简单的配置之后,为每一个 md 文件生成静态 html 脚本,并通过主题挂接起来。用来写文档是非常不错的。写文章就要做一点工作,踩一点坑。

          demo 演示 (opens new window)

          github 源码 (opens new window)

          # 注意 yaml

          必须放在 md 文件在最上方才能生效

          # 无法热更新

          修改 config.js 后,是没办法热更新的,只能 ctrl+c 结束任务然后重新 yarn dev

          # 百度统计代码

          增加了一个 utils/db_hm.js 脚本,在 build 之后手动复制统计代码到首页 index.html 中。请自行从百度申请统计和推送链接代码。

          # 使用 Github Aciton 自动发布到 Github Page

          开启项目 action。

          开启 page。并使用 master 分支为 Page 源地址。

          设置 secret。在Settings-tTokens (opens new window)里选择第一项 repo 生成 token,复制 token 到项目 Settings-Secrets 下新建的ACCESS_TOKEN中

          然后 git push 就好,CI 脚本自动发布。

          如果要发布到非根目录。要 修改 package.json 中 buildSubpath 命令里的两处: VUEPRESS_BASE=/codingyang/ 中的 codingyang 替换为自己要部署的子目录名。然后修改 Action 脚本 nodejs.yml 中最后一行脚本中的 npm run build 为 npm run buildSubpath 。

          # 相关技术

          vuepress (opens new window)

          主题文档 (opens new window)

          参与编辑此文章 (opens new window)
          更新于: 4/8/2020, 2:52:52 PM