Skip to content
vuepress static Blog with CI. Source branch: user. Publish Branch: master.
JavaScript
Branch: user
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
.vscode
docs
utils
.gitignore
README.MD
nginx.conf
package-lock.json
package.json
yarn.lock

README.MD

Codingyang Blog

Intro 介绍

Use vuepress build static personal Blog.

Just create or edit *.md markdown document,

quickly build it to static html site with good SEO.

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

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

demo 演示

document 文档

github 源码

相关技术

vuepress

Github Aciton

how to use 使用

  1. 克隆项目后进入

git clone https://github.com/Rackar/codingyang

cd codingyang

  1. 安装依赖并运行开发服务:

yarn install 或者 npm i

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

yarn docs:dev
  1. 编辑

编辑或新增*.md,以及修改 docs/.vuepress/config.js 中的 nav 导航栏等信息。具体可查看上面的 vuepress 文档,重新运行yarn docs:dev并 ctrl+f5 刷新浏览器查看设置更改。

  1. 打包
yarn docs:list
yarn docs:built

第一个命令将文章栏目下三个文件夹中的文件加入侧边栏(文章索引), 第二个打包为部署在根路径下的 index.html 文件和其他所有静态页面资源。

  1. 或者利用自动持续集成发布到 github page

这里需要:开启项目 action,开启 page,设置 secret,修改脚本中的/codingyang/为自己的项目名。然后 git push 就好,CI 脚本自动发布。

小提示

注意 yaml

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

无法热更新

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

想要自动发现新 md 文件并加入侧边栏索引列表?

BLOG 的最基本功能,需要加一点 node 的脚本来更新 sidebar:[]的配置。 放在了 utils/getFilenames.js 了。 脚本运行时会查找/article_child/等 3 个文件夹下的所有目录和文件,将名称列表置入.vuepress/config/sidebar.json。 之后重新 yarn docs:list,列表更新

百度统计代码

加入了 "vuepress-plugin-baidu-autopush" "vuepress-plugin-baidu-tongji" 两个包,统计功能虽然正常,但是首页检测代码失败。所以增加了一个 utils/db_hm.js 脚本,在 build 之后手动复制统计代码到首页。

如何打包为部署到非根目录下

docs:build:gitpage
docs:push:gitpage

使用这两条命令,编译为 github page 或其他部署到非根目录下的 html。

修改 package.json 中 docs:build:gitpage 命令里的: VUEPRESS_BASE=/codingyang/为自己要部署的子目录名, 其中 github page 即为项目名,发布方式为分支名 gh-pages 方式推送。

You can’t perform that action at this time.