更新:README.md

This commit is contained in:
xugaoyi 2020-03-06 17:01:58 +08:00
parent dbc8a8954f
commit d61142356a
10 changed files with 98 additions and 214 deletions

215
README.MD
View File

@ -1,191 +1,96 @@
# 基于VuePress构建的静态博客
## 简介
## Introduce
基于 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 构建静态博客站。内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages
1. 根据 vuepress 的默认主题修改而成,追求**极简主义**
* **简洁至上**
* 继承了[VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 简洁至上的特性,以 Markdown 为中心的项目结构,让你专注于写作
* **高自动化**
* 项目结合了各种自动化技术,[自动生成侧边栏](https://github.com/xugaoyi/blog/issues/113)[CI持续集成部署](https://xugaoyi.com/pages/6b9d359ec5aa5019/)[自动百度链接推送](#百度自动推送和统计)结合GitHub Actions开发的自动化[每天定时推送](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/)
* **SEO友好**
* 让你的博客给更多人看到
2. 这是一个兼具**博客文章** 与 **学习笔记** 管理的博客主题。
3. 添加博客所需的**评论**、**时间轴**、**分类**、**最近更新** 等。
4. 这主题可以很方便的管理你的**学习笔记**和**教程文档****扩展的搜索框**让你快速查找文档。
5. 添加对*前端程序员*很友好**demo演示模块**很方便的在博客中插入demo同时可以查看demo源码跳转到codepen在线编辑。
6. 自动侧边栏满足不了需求?手动配置侧边栏工作繁杂?没关系,我们有**自动生成侧边栏**
[根据目录自动生成侧边栏的约定说明](https://github.com/xugaoyi/blog/issues/113)
> **分类标签**不需要你每个文件都设置 [Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html),只需按照我们的目录约定,我们会按照目录来进行分类,这更适合管理你的学习笔记。
7. vuepress 的页面链接对于博客来说是一个阴暗面,官方对于 [永久链接](https://vuepress.vuejs.org/zh/guide/permalinks.html) 的处理我个人不是特别喜欢,因此我们就有了**自动生成永久链接**,你不需要给每个页面定义一个[Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html)指定永久链接我们会通过文件名来生成一个永久链接码到你的页面Front Matter。但这并不妨碍你在特定页面手动指定自己喜欢的永久链接。
[自动生成的Front Matter](https://github.com/xugaoyi/blog/issues/324)
8. **自动部署**,内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。
[自动部署到 github 或 coding](https://github.com/xugaoyi/blog/issues/325)
## 使用
#### 1、克隆项目后进入
## Quick start
```bash
# 克隆项目后进入
git clone https://github.com/xugaoyi/blog
cd blog
```
#### 2、安装依赖并运行开发服务
```bash
# 安装依赖并运行开发服务
npm install # or yarn install
npm run dev # or yarn dev
```
> 使用yarn的可以把以下`npm run`命令替换为`yarn`
#### 3、编辑
编辑或新增 \*.md文件以及修改 `docs/.vuepress/config.js` 中的 nav 导航栏等信息(具体可查看 [VuePress](https://v1.vuepress.vuejs.org/zh/guide/) 文档),需重新运行·`npm run dev`并刷新浏览器查看更新。
## Other
#### 4、部署
1. **百度推送和统计**
本项目包含两种部署方式:
以插件的形式加入百度推送和统计,`npm`安装如下插件并配置
##### 1、使用deploy.sh脚本部署
```js
//config.js
'vuepress-plugin-baidu-autopush', // 百度推送
[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: '8a5**************47d607481723b7815d' // 设置你自己的hm参数
}
]
```
第一步,修改`deploy.sh`脚本内的仓库地址为你的仓库,如有自定义域名则一并修改,没有则注释
2. **评论模块**
```bash
# 如果是发布到自定义域名
echo 'xugaoyi.com' > CNAME
[使用Gitalk实现静态博客无后台评论系统](https://xugaoyi.com/pages/1da0bf9a988eafe5/)
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
3. **自定义域名及解析**
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
```
[自定义域名及解析](https://github.com/xugaoyi/blog/issues/326)
第二步,一键部署命令
4. **SEO相关**
```bash
npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支
```
> windows系统下使用bash命令窗
```js
// config.js
module.exports = {
description: '填写网站描述', // 以 <meta> 标签渲染到页面html中
head: [ // 注入到页面<head> 中的标签,[tagName, { attrName: attrValue }]
['meta', { name: 'keywords', content: '填写关键字'}]
]
}
```
第三步设置GitHub Pages为gh-pages分支。
5. **图床**
[GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床](https://xugaoyi.com/pages/a5f73af5185fdf0a/)
6. **结合GitHub Actions开发的每天定时百度推送加快收录**
##### 2、使用GitHub Action自动持续集成
[GitHub Actions 定时运行代码:每天定时百度链接推送](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/)
第一步,按照[官方文档](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)生成一个github token (令牌)。
7. **在线编辑和新增文章的方法**
第二步,将这个密钥储存到当前仓库的`Settings/Secrets`里面。
> `Settings/Secrets`是储存秘密的环境变量的地方。环境变量的名字可以随便起,这里用的是`ACCESS_TOKEN`。如果你不用这个名字,`.github/workflows/ci.yml`脚本里的变量名也要跟着改。
[在线编辑和新增文章的方法](https://github.com/xugaoyi/blog/issues/327)
第三步push提交代码到GitHub仓库master分支。
第四步设置GitHub Pages为gh-pages分支。
> 注意:如果您有自定义域名,需要在`.github/workflows/ci.yml`中修改`xugaoyi.com`为你的域名。
>
> 如没有自定义域名,需要在`.github/workflows/ci.yml`中去掉`cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME && cd -`命令
>
> 参考 [GitHub Action实现自动部署静态博客](http://xugaoyi.com/pages/6b9d359ec5aa5019/)
#### 4.1、部署升级同时部署到github和[coding](https://dev.tencent.com/)
为了让博客站能够让百度收录因此我把博客部署到了coding。相关[文章](https://xugaoyi.com/pages/41f87d890d0a02af/)。
在原有部署方式上做了升级,主要修改代码文件有下面这两个:
`deploy.sh`文件看 [这里](https://github.com/xugaoyi/blog/blob/master/deploy.sh)
> 看不懂代码shell代码 参考:[shell教程](https://ipcmen.com/)
`ci.yml`文件看 [这里](https://github.com/xugaoyi/blog/blob/master/.github/workflows/ci.yml)
> 看不懂yaml代码 参考:[yaml教程](https://xugaoyi.com/pages/4e8444e2d534d14f/)
使用前先将[github token (令牌) ](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line)和[coding token (令牌)](https://dev.tencent.com/help/doc/account/access-token) 同时设置到github仓库的`Settings/Secrets`位置。
![token设置](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/token.jpg)
##### 部署方式有两种:
##### 1) 、使用如下命令一键部署到github和coding
```sh
npm run deploy
```
##### 2、使用GitHub Action自动部署到github和coding
只需要push提交代码到github仓库master分支即可。
> 参考 [《GitHub Action实现自动部署静态博客》](http://xugaoyi.com/pages/6b9d359ec5aa5019/)
## 自定义域名以及解析 (可选)
#### 1、申请域名
申请域名当然去哪都行。 国内的[阿里云](https://link.zhihu.com/?target=https%3A//wanwang.aliyun.com/domain/)[腾讯云](https://cloud.tencent.com/),国外的[freenom](https://link.zhihu.com/?target=http%3A//www.freenom.com/)namecheap什么的 。 操作大同小异,都是
* 注册账号,登录
* 搜索并找到可用的域名,买下来。比如我在腾讯云买的一个域名:`xugaoyi.com`
#### 2、DNS解析
想要在浏览器里面输入`xugaoyi.com`就能跳到博客页面。我们首先需要做的就是通过DNS解析将`xugaoyi.com` 与某已有域名绑定起来CNAME或者是固定的ip地址绑定起来(A)。
这里以腾讯云操作为例,步骤如下:
* 域名列表中点击`解析`
![解析](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/20191228212829.png)
* 进入解析页面后,点击`添加记录`。填入,记录类型:`CNAME`,主机记录:`www`或`@`解析线路默认记录值你的github pages地址`<userName>.github.io`TTL默认的10分钟确定。
![解析2](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/20191228213125.png)
#### 3、使github pages与域名关联
deploy.sh添加如下脚本
```bash
echo 'xugaoyi.com' > CNAME # // 域名替换成你的
```
在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy\>.env.BUILD_SCRIPT中添加脚本
```sh
"cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME" && cd -
# 域名替换成你的
```
## 其他
#### 百度自动推送和统计
加入了自动推送和统计插件
```js
'vuepress-plugin-baidu-autopush', // 百度自动推送作用加快将页面推送给百度搜索https://ziyuan.baidu.com/
[
'vuepress-plugin-baidu-tongji', // 百度统计https://tongji.baidu.com
{
hm: '8a5**************47d607481723b7815d'
}
]
```
> 如果你也需要百度统计功能请把hm参数改为你自己的请到<https://tongji.baidu.com>获取你自己的hm参数

View File

@ -3,14 +3,13 @@ const sidebar = require('./config/sidebar-auto.js');
module.exports = {
title: "Evan's blog", // 标题
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML
// base: '/blog/', //默认'/' || github仓库名'/<仓库名>/',
head: [ // 注入到当前页面<head> 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?]
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html
// base: '/blog/', // 默认'/' || github仓库名'/<仓库名>/',
head: [ // 注入到页面<head> 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?]
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons资源放在public文件夹
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
// 以下是vuepress-plugin-demo-block插件所需依赖
// ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }], // 此文件会影响导航router-link-active样式的切换

View File

@ -12,7 +12,7 @@ module.exports = {
"/about/": [["01.about.md","about"]],
"/timeline/": [["01.timeline.md","timeline"]],
"/timeline/": [["01.时间轴.md","时间轴"]],
"/《ES6 教程》笔记/": [{"title":"《ES6 教程》笔记","collapsable":false,"children":[]},["01.ECMAScript 6 简介.md","ECMAScript 6 简介"],["02.let 和 const 命令.md","let 和 const 命令"],["03.变量的解构赋值.md","变量的解构赋值"],["04.字符串的扩展.md","字符串的扩展"],["05.字符串的新增方法.md","字符串的新增方法"],["06.正则的扩展.md","正则的扩展"],["07.数值的扩展.md","数值的扩展"],["08.函数的扩展.md","函数的扩展"],["09.数组的扩展.md","数组的扩展"],["10.对象的扩展.md","对象的扩展"],["11.对象的新增方法.md","对象的新增方法"],["12.Symbol.md","Symbol"],["13.Set 和 Map 数据结构.md","Set 和 Map 数据结构"],["14.Proxy.md","Proxy"],["15.Reflect.md","Reflect"],["16.Promise 对象.md","Promise 对象"],["17.Iterator 和 for-of 循环.md","Iterator 和 for-of 循环"],["18.Generator 函数的语法.md","Generator 函数的语法"],["19.Generator 函数的异步应用.md","Generator 函数的异步应用"],["20.async 函数.md","async 函数"],["21.Class 的基本语法.md","Class 的基本语法"],["22.Class 的继承.md","Class 的继承"],["23.Module 的语法.md","Module 的语法"],["24.Module 的加载实现.md","Module 的加载实现"],["25.编程风格.md","编程风格"],["26.读懂 ECMAScript 规格.md","读懂 ECMAScript 规格"],["27.异步遍历器.md","异步遍历器"],["28.ArrayBuffer.md","ArrayBuffer"],["29.最新提案.md","最新提案"],["30.装饰器.md","装饰器"],["31.函数式编程.md","函数式编程"],["32.Mixin.md","Mixin"],["33.SIMD.md","SIMD"],["34.参考链接.md","参考链接"]],

View File

@ -1,7 +1,8 @@
//
body
background: none
a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}
a,input,button
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
// md
@ -30,7 +31,6 @@ table
.gt-container .gt-comments-null
color #999
//
.sidebar
z-index 11
@ -49,30 +49,28 @@ table
fill $accentColor!important
// qq
.qq{position: relative;}
.qq::after{
content: "";
background: $accentColor;
color:#fff;
padding: 0 5px;
border-radius: 10px;
font-size:12px;
position: absolute;
top: -4px;
right: -35px;
transform:scale(0.85);
}
.qq
position: relative;
.qq::after
content: "";
background: $accentColor;
color:#fff;
padding: 0 5px;
border-radius: 10px;
font-size:12px;
position: absolute;
top: -4px;
right: -35px;
transform:scale(0.85);
// demo
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover .vuepress-plugin-demo-block__expand::before {
border-top-color: $accentColor !important;
border-bottom-color: $accentColor !important;
}
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover svg {
body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover
.vuepress-plugin-demo-block__expand::before
border-top-color: $accentColor !important;
border-bottom-color: $accentColor !important;
svg
fill: $accentColor !important;
}
//iframe
iframe {
margin: 1rem 0
}
iframe
margin: 1rem 0

View File

@ -71,6 +71,11 @@ export default {
font-size 1.3rem
font-weight bold
padding 0 0 .5rem 1rem
h1
font-size 1.8rem
img
width 28px
margin-bottom: -4px;
.article-wrapper
overflow hidden
dl

View File

@ -23,7 +23,7 @@
</router-link>
</div>
</div>
<!-- PC端features块 s -->
<!-- PC端features块 e -->
</main>
<!-- 移动端slide s -->

View File

@ -57,7 +57,7 @@ function changeURLArg(url, arg, arg_val) {
## 不刷新页面修改url参数
https://www.cnblogs.com/wuting/p/8946927.html
<https://www.cnblogs.com/wuting/p/8946927.html>

View File

@ -1,5 +1,5 @@
---
title: timeline
title: 时间轴
date: 2019-12-31 13:49:34
permalink: /timeline
sidebar: false
@ -165,8 +165,8 @@ ul
height: 100%;
background: #EAECEF;
>li
transition: transform 0.25s ease-in-out 0.08s;
margin-bottom: 50px;
transition: all .25s ease-in-out;
margin-bottom: 55px;
.year
margin: 0;
font-weight: 700;
@ -195,7 +195,7 @@ ul
border-bottom: 1px dashed #EAECEF;
position: relative;
color: #666;
transition: all 0.25s ease-in-out 0.08s;
transition: all 0.25s ease-in-out;
.date
min-width: 40px;
line-height: 30px;

View File

@ -2,8 +2,6 @@
"name": "evanblog",
"version": "1.0.0",
"scripts": {
"test": "node utils/frontmatter.js",
"test2": "node utils/frontmatter.js -update",
"dev": "node utils/frontmatter.js && node utils/sidebar.js && vuepress dev docs",
"build": "node utils/frontmatter.js && node utils/sidebar.js && vuepress build docs",
"deploy": "bash deploy.sh",

View File

@ -76,27 +76,6 @@ function main() {
}
// if(dataStr.substring(0,3) !== '---'){ // 没有FrontMatter
///console.log(`写入FrontMatter${file.filePath}`)
// writeFrontMatter(file, dataStr);
// } else { // 已有FrontMatter
// if (arg !== '-update'){
// return;
// }
// // 重新写入FrontMatter
// const dataArr = dataStr.split(/\r\n|\n|\r/gm);
// const fmArr = dataArr.slice(0,5);
// const dataStrOld = dataArr.slice(5).join('\r\n');
// // 判断FrontMatter 是否为自动生成的格式
// if (fmArr[0] === '---' && /title/.test(fmArr[1]) && /date/.test(fmArr[2]) && /permalink/.test(fmArr[3]) && fmArr[4] === '---') {
// console.log(`更新FrontMatter${file.filePath} `)
// writeFrontMatter(file, dataStrOld);
// } else {
// logger.warn(`此文件FrontMatter更新失败${file.filePath}因为它的FrontMatter格式并非自动生成的。`)
// }
// }
})
}