This commit is contained in:
xugaoyi 2019-12-08 16:33:46 +08:00
parent e5c79b5883
commit ee9c3de8c8
16 changed files with 328 additions and 99 deletions

View File

@ -29,4 +29,4 @@ jobs: # 工作流
BASE_BRANCH: master # 要部署的文件夹所在的分支.
BRANCH: gh-pages # 部署到的分支
FOLDER: docs/.vuepress/dist # 要部署的文件夹.
BUILD_SCRIPT: npm install && npm run build:gitpage && npm run chame:gitpage # 部署前要执行的命令 #&& npm run list
BUILD_SCRIPT: npm install && npm run build && npm run chame # 部署前要执行的命令 #&& npm run list

View File

@ -2,9 +2,7 @@
## 介绍
使用 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 创建 SEO 友好的静态博客站。一键发布到 GitHub Pages内置 [GitHub Action](https://github.com/features/actions) 自动部署脚本。
**您不需要在本地进行打包只需要把代码push到GitHubAction将自动为您打包和部署。**
使用 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 创建 SEO 友好的静态博客站。一键发布到 GitHub Pages内置 `deploy.sh` 和 [GitHub Action](https://github.com/features/actions) 两种自动部署脚本。
@ -19,47 +17,66 @@ cd evanblog
#### 2、安装依赖并运行开发服务
> 使用yarn的可以把以下`npm run`命令替换为`yarn`
```bash
npm install # or yarn install
npm run dev
npm run dev # or yarn dev
```
> 使用yarn的可以把以下`npm run`命令替换为`yarn`
#### 3、编辑
编辑或新增\*.md以及修改 docs/.vuepress/config.js 中的 nav 导航栏等信息。具体可查看上面的 vuepress 文档,重新运行`npm run dev`并 ctrl+f5 刷新浏览器查看更改。
#### 4、打包和部署
#### 4、部署
* **手动打包和部署**
本项目包含两种部署方式:
##### 1、使用deploy.sh脚本部署
第一步修改deploy.sh脚本内的仓库地址为你的仓库如有自定义域名则一并修改没有则注释
```bash
npm run list # 将文章栏目下三个文件夹中的文件加入侧边栏(文章索引)
npm run built # 打包
# 把打包好的代码提交到github仓库并设置github pages
# 如果是发布到自定义域名
echo 'www.evanblogweb.com' > CNAME
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
```
* **或利用GitHub Action自动持续集成推荐**
第二步,执行如下命令
第一步,这个项目需要将构建成果发到 GitHub 仓库,因此需要 GitHub 密钥。按照[官方文档](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line),生成一个密钥。
第二步,将这个密钥储存到当前仓库的`Settings/Secrets`里面。
`Settings/Secrets`是储存秘密的环境变量的地方。环境变量的名字可以随便起,这里用的是`ACCESS_TOKEN`。如果你不用这个名字,后面脚本里的变量名也要跟着改。
```bash
npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支
```
> windows系统下使用bash命令窗
第三步设置GitHub Pages为gh-pages分支。
##### 2、使用GitHub Action自动持续集成
第一步,按照[官方文档](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)生成一个GitHub 密钥。
第二步,将这个密钥储存到当前仓库的`Settings/Secrets`里面。
> `Settings/Secrets`是储存秘密的环境变量的地方。环境变量的名字可以随便起,这里用的是`ACCESS_TOKEN`。如果你不用这个名字,`.github/workflows/ci.yml`脚本里的变量名也要跟着改。
第三步提交代码到GitHub仓库master分支。
第四步设置GitHub Pages为gh-pages分支。
因为本项目已经内置 GitHub Action 自动部署脚本`.github/workflows/ci.yml` ,您不需要在本地进行打包,只需要 push 代码到githubAction将自动为您打包和部署。
参考 [教程](http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)
> 注意您需要在package.json中修改`/evanblog/`为自己的项目名。
> 注意您需要在package.json中修改`/evanblog/`为自己的项目名,如果您有自定义域名,一并修改`www.evanblogweb.com`为你的域名
>
> 如果您有自定义域名,一并修改`www.evanblogweb.com`为你的域名。
> 如没有自定义域名,需去掉`.github/workflows/ci.yml`脚本的`npm run chame:gitpage`命令
@ -89,17 +106,23 @@ npm run built # 打包
#### 3、使github pages与域名关联
在pageage.json文件scripts中添加如下脚本
deploy.sh添加如下脚本
```bash
echo 'www.evanblogweb.com' > CNAME # // 域名替换成你的
```
pageage.json文件scripts中添加如下脚本
```js
"chame:gitpage": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME"
"chame": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME"
// 域名替换成你的
```
在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy\>.env.BUILD_SCRIPT中添加脚本
```sh
npm run chame:gitpage
npm run chame
```
@ -111,32 +134,28 @@ npm run chame:gitpage
必须放在 md 文件在最上方才能生效
#### 无法热更新
修改 config.js 后,是没办法热更新的,只能 ctrl+c 结束任务然后重新 yarn dev
#### 想要自动发现新 md 文件并加入侧边栏索引列表?
BLOG 的最基本功能,需要加一点 node 的脚本来更新 sidebar:[]的配置。
放在了 utils/getFilenames.js 了。
脚本运行时会查找/article_child/等 3 个文件夹下的所有目录和文件,将名称列表置入.vuepress/config/sidebar.json。
之后重新 yarn list列表更新
之后重新 npm run list列表更新
#### 百度统计代码
加入了
"vuepress-plugin-baidu-autopush"
"vuepress-plugin-baidu-tongji"
两个包,统计功能虽然正常,但是首页检测代码失败。所以增加了一个 utils/db_hm.js 脚本,在 build 之后手动复制统计代码到首页。
#### 如何打包为部署到非根目录下
#### 百度自动推送和统计
```
build:gitpage
push:gitpage
加入了自动推送和统计插件
```js
'vuepress-plugin-baidu-autopush', // 百度自动推送作用加快将页面推送给百度搜索https://ziyuan.baidu.com/
[
'vuepress-plugin-baidu-tongji', // 百度统计https://tongji.baidu.com
{
hm: '8a59017a97d9fc47d607481723b7815d'
}
]
```
使用这两条命令,编译为 github page 或其他部署到非根目录下的 html。
要 **修改** package.json 中 build:gitpage 命令里的: VUEPRESS_BASE=/evanblog/为自己要部署的子目录名,
其中 github page 即为项目名,发布方式为分支名 gh-pages 方式推送。
> 如果你也需要百度统计功能请把hm参数该为你自己的请到https://tongji.baidu.com获取你自己的hm参数

View File

@ -4,7 +4,6 @@
set -e
# 生成静态文件
#npm run docs:build
npm run build
# 进入生成的文件夹

View File

@ -2,16 +2,18 @@ const nav = require('./config/nav.js');
const sidebar = require('./config/sidebar.js');
module.exports = {
title: 'Evan Blog', // 标题
description: 'Evan Blog 个人博客基于vuepress构建专注前端学习与总结', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
description: 'Evan Blog个人技术博客,基于vuepress构建,专注前端学习与总结。JavaScript,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
// process.env.VUEPRESS_BASE 在package.json生成
// base: process.env.VUEPRESS_BASE || '/', // 基础路径,默认'/',如果放到github pages要改成仓库名
head: [ // 注入到当前页面<head> 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?]
['link', { rel: 'icon', href: '/img/logo.png' }] //favicons资源放在public文件夹
['link', { rel: 'icon', href: '/img/logo.png' }], //favicons资源放在public文件夹
['meta', { name: 'keywords', content: 'Evan Blog,个人博客,技术博客,vuepress,技术文档,web前端,前端学习,技术总结与分享,JavaScript,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,面试问答集锦'}],
['meta', { name: 'baidu-site-verification', content: 'YwUALncFiI'}],
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
],
markdown: {
lineNumbers: true // 代码行号
},
plugins: ['@vuepress/back-to-top', '@vuepress/medium-zoom'], // 插件
themeConfig: { // 主题配置
logo: '/img/logo.png', // 导航栏logo
nav,
@ -40,7 +42,7 @@ module.exports = {
// }
// },
plugins: [ // 插件
'vuepress-plugin-baidu-autopush',
'vuepress-plugin-baidu-autopush', // 百度自动推送,作用:加快将页面推送给百度搜索
'@vuepress/back-to-top', // 返回顶部
[
'@vuepress/medium-zoom',
@ -51,9 +53,9 @@ module.exports = {
}
], // 缩放图片
[
'vuepress-plugin-baidu-tongji',
'vuepress-plugin-baidu-tongji', // 百度统计https://tongji.baidu.com
{
hm: '8a59017a97d9fc47d607481723b7815d'
hm: '837775213e724293b4af2b9526e238b4'
}
]
],

View File

@ -14,10 +14,11 @@ module.exports = [
{text: 'python', link: '/python/'}
]
},
{text: '其他',items:[
{text: '技术杂谈',items:[
{text: 'Git使用文档', link: '/other/git'},
{text: 'GitHub使用技巧', link: '/other/github'},
{text: 'Markdown使用教程', link: '/other/markdown'},
{text: 'npm使用教程', link: '/other/npm'},
{text: '学习网站分享', link: '/other/study'},
{text: '面试问答集锦', link: '/other/interview'}
]},

View File

@ -6,17 +6,20 @@ module.exports = { // 侧边栏
collapsable: false
},
{
title: 'GitHub使用技巧',
collapsable: false,
children: [
['github', 'GitHub高级搜索技巧']
]
title: 'GitHub高级搜索技巧',
path: 'github',
collapsable: false
},
{
title: 'Markdown使用教程',
path: 'markdown',
collapsable: false
},
{
title: 'npm使用教程',
path: 'npm',
collapsable: false
},
{
title: '学习网站分享',
path: 'study',
@ -28,32 +31,32 @@ module.exports = { // 侧边栏
collapsable: false
},
],
'/': [ // 在最后定义,在没有单独设置侧边栏时统一使用这个侧边栏
'',
'git',
'github',
'markdown',
'study',
'interview'
// '/',
// {
// title: 'foo', // 标题,必要的
// path: '/foo/', // 标题的路径,可选的, 应该是一个绝对路径
// collapsable: false, // 是否可折叠可选的默认true
// sidebarDepth: 1, // 深度,可选的, 默认值是 1
// children: [
// ['foo/', '子页1'],
// 'foo/1',
// 'foo/2',
// ]
// },
// {
// title: 'bar',
// children: [
// ['bar/', '子页2'],
// 'bar/3',
// 'bar/4',
// ]
// }
],
// '/': [ // 在最后定义,在没有单独设置侧边栏时统一使用这个侧边栏
// '',
// 'git',
// 'github',
// 'markdown',
// 'study',
// 'interview'
// // '/',
// // {
// // title: 'foo', // 标题,必要的
// // path: '/foo/', // 标题的路径,可选的, 应该是一个绝对路径
// // collapsable: false, // 是否可折叠可选的默认true
// // sidebarDepth: 1, // 深度,可选的, 默认值是 1
// // children: [
// // ['foo/', '子页1'],
// // 'foo/1',
// // 'foo/2',
// // ]
// // },
// // {
// // title: 'bar',
// // children: [
// // ['bar/', '子页2'],
// // 'bar/3',
// // 'bar/4',
// // ]
// // }
// ],
}

View File

@ -1,6 +1,6 @@
## Git使用文档
# Git使用文档
### 安装

View File

@ -1,4 +1,4 @@
## GitHub高级搜索技巧
# GitHub高级搜索技巧
`in:name <关键字>`
仓库名称带关键字查询

View File

@ -1,3 +1,5 @@
# 面试问题集锦
## 请做一下自我介绍
**回答提示:** 一般人回答这个问题过于平常,只说姓名、年龄、工作经验,这些在简历上都有。其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事,主要的成就等,要突出积极的个性和做事的能力,说的合情合理企业才会相信。

View File

@ -1,3 +1,5 @@
# Markdown使用教程
## 一、Markdown
### 简介

209
docs/other/npm.md Normal file
View File

@ -0,0 +1,209 @@
# npm使用教程
## 简介
npm是跟随node一起安装的包模块管理器。常见的使用场景有以下几种
* 允许用户从npm服务器下载别人编写的第三方包到本地使用。
* 允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
* 允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
## 常用命令
#### 检测是否安装及版本
```sh
npm -v # 显示版本号说明已经安装相应的版本
```
#### 生成package.json文件
```sh
npm init
```
> package.json用来描述项目中用到的模块和其他信息
#### 安装模块
```sh
npm install # 安装package.json定义好的模块简写 npm i
# 安装包指定模块
npm i <ModuleName>
# 全局安装
npm i <ModuleName> -g
# 安装包的同时将信息写入到package.json中的 dependencies 配置中
npm i <ModuleName> --save
# 安装包的同时将信息写入到package.json中的 devDependencies 配置中
npm i <ModuleName> --save-dev
# 安装多模块
npm i <ModuleName1> <ModuleName2>
# 安装方式参数:
-save # 简写-S加入到生产依赖中
-save-dev # 简写-D加入到开发依赖中
-g # 全局安装 将安装包放在 /usr/local 下或者你 node 的安装目录
# 安装方式参数可以省略,默认安装到开发依赖,即-D
```
#### 查看
```sh
# 查看所有全局安装的包
npm ls -g
# 查看本地项目中安装的包
npm ls
# 查看包的 package.json文件
npm view <ModuleName>
# 查看包的依赖关系
npm view <ModuleName> dependencies
# 查看包的源文件地址
npm view <ModuleName> repository.url
# 查看包所依赖的node版本
npm view <ModuleName> engines
# 查看帮助
npm help
```
#### 更新模块
```sh
# 更新本地模块
npm update <ModuleName>
# 更新全局模块
npm update -g <ModuleName> # 更新全局软件包。
npm update -g # 更新所有的全局软件包。
npm outdated -g --depth=0 # 找出需要更新的包。
```
#### 卸载模块
```sh
# 卸载本地模块
npm uninstall <ModuleName>
# 卸载全局模块
npm uninstall -g <ModuleName> # 卸载全局软件包。
```
#### 清空缓存
```sh
# 清空npm缓存
npm cache clear
```
#### 使用淘宝镜像
```sh
# 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
#### 其他
```sh
# 更改包内容后进行重建
npm rebuild <ModuleName>
# 检查包是否已经过时,此命令会列出所有已经过时的包,可以及时进行包的更新
npm outdated
# 访问npm的json文件此命令将会打开一个网页
npm help json
# 发布一个包的时候,需要检验某个包名是否存在
npm search <ModuleName>
# 撤销自己发布过的某个版本代码
npm unpublish <package> <version>
```
## 使用技巧
#### 多次安装不成功尝试先清除缓存
```sh
npm cache clean -f
```
#### 查看已安装的依赖包版本号
```sh
npm ls <ModuleName>
```
> 注意用此方法才能准确的知道项目使用的版本号查看package.json时有“^" 符号表示大于此版本
## nrm的作用与使用
#### nrm是什么
nrm(npm registry manager )是npm的镜像源管理工具有时候国外资源太慢使用这个就可以快速地在 npm 源间切换
#### nrm的安装
```sh
npm install -g nrm
```
#### nrm命令
```sh
nrm ls #查看可用的源(有*号的表示当前所使用的源,以下<registry>表示源的名称)
nrm use <registry> # 将npm下载源切换成指定的源
nrm add <registry> <url> # 添加源url为源的路径
nrm del <registry> # 删除源
nrm test <registry> # 测试源的响应时间,可以作为使用哪个源的参考
nrm help # 查看nrm帮助
nrm home <registry> # 跳转到指定源的官网
```
#### nrm使用
如果在你的网络不太理想或者受到其他网络限制导致不能使用npm原本的源进行下载时nrm就非常有用了你只需要
```sh
nrm ls # 查看可用的源
nrm use <registry> # 切换到指定源
```

View File

@ -1,3 +1,5 @@
# 学习网站分享
## 文档类
| 名称 | 网址 | 描述 |

View File

@ -0,0 +1 @@
> 敬请期待

View File

@ -0,0 +1 @@
> 敬请期待

9
package-lock.json generated
View File

@ -7646,15 +7646,6 @@
"integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
"dev": true
},
"push-dir": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/push-dir/download/push-dir-0.4.1.tgz",
"integrity": "sha1-KUgerNnCEGu7eUHbbTfRIqBx7LQ=",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"q": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz",

View File

@ -4,17 +4,14 @@
"scripts": {
"dev": "vuepress dev docs",
"list": "node utils/getFilenames.js",
"build": "vuepress build docs && node utils/bd_hm.js",
"build:gitpage": "export VUEPRESS_BASE=/evanblog/|| set VUEPRESS_BASE=/evanblog/&&vuepress build docs && node utils/bd_hm.js",
"push:gitpage": "push-dir --dir=docs/.vuepress/dist --branch=gh-pages --allow-unclean",
"chame:gitpage": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME",
"deploy": "bash deploy.sh"
"build": "vuepress build docs",
"chame": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME",
"deploy": "bash deploy.sh"
},
"license": "MIT",
"devDependencies": {
"@vuepress/plugin-back-to-top": "^1.2.0",
"@vuepress/plugin-medium-zoom": "^1.2.0",
"push-dir": "^0.4.1",
"vuepress": "^1.1.0",
"vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-baidu-tongji": "^1.0.1"