Skip to content
🐼基于vuepress构建的个人技术博客,分享前端技术👉
JavaScript Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows 优化 Dec 30, 2019
docs 更新:vue笔记-mixin混入等 Feb 19, 2020
utils 新增:ES6 等 Jan 12, 2020
.gitignore 优化 Feb 10, 2020
README.MD 更新:README Dec 31, 2019
baiduPush.sh 优化 Dec 30, 2019
deploy.sh 优化 Dec 30, 2019
package.json 优化:首页UI优化 Feb 12, 2020

README.MD

基于VuePress构建的静态博客

简介

基于 VuePress 构建静态博客站。内置 deploy.shGitHub Actions 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。

使用

1、克隆项目后进入

git clone https://github.com/xugaoyi/blog
cd blog

2、安装依赖并运行开发服务

npm install # or yarn install
npm run dev # or yarn dev

使用yarn的可以把以下npm run命令替换为yarn

3、编辑

编辑或新增 *.md文件,以及修改 docs/.vuepress/config.js 中的 nav 导航栏等信息(具体可查看 VuePress 文档),需重新运行·npm run dev并刷新浏览器查看更新。

4、部署

本项目包含两种部署方式:

1)、使用deploy.sh脚本部署

第一步,修改deploy.sh脚本内的仓库地址为你的仓库,如有自定义域名则一并修改,没有则注释

# 如果是发布到自定义域名
echo 'xugaoyi.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

第二步,一键部署命令

npm run deploy # 运行部署脚本deploy.sh,并发布到仓库的gh-pages分支

windows系统下使用bash命令窗

第三步,设置GitHub Pages为gh-pages分支。

2)、使用GitHub Action自动持续集成

第一步,按照官方文档,生成一个github token (令牌)。

第二步,将这个密钥储存到当前仓库的Settings/Secrets里面。

Settings/Secrets是储存秘密的环境变量的地方。环境变量的名字可以随便起,这里用的是ACCESS_TOKEN。如果你不用这个名字,.github/workflows/ci.yml脚本里的变量名也要跟着改。

第三步,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实现自动部署静态博客

4.1、部署升级:同时部署到github和coding

为了让博客站能够让百度收录,因此我把博客部署到了coding。相关文章

在原有部署方式上做了升级,主要修改代码文件有下面这两个:

deploy.sh文件看 这里

看不懂代码shell代码? 参考:shell教程

ci.yml文件看 这里

看不懂yaml代码? 参考:yaml教程

使用前先将github token (令牌) coding token (令牌) 同时设置到github仓库的Settings/Secrets位置。

token设置

部署方式有两种:
1) 、使用如下命令一键部署到github和coding
npm run deploy
2)、使用GitHub Action自动部署到github和coding

只需要push提交代码到github仓库master分支即可。

参考 《GitHub Action实现自动部署静态博客》

自定义域名以及解析 (可选)

1、申请域名

申请域名当然去哪都行。 国内的阿里云腾讯云,国外的freenom,namecheap什么的 。 操作大同小异,都是

  • 注册账号,登录

  • 搜索并找到可用的域名,买下来。比如我在腾讯云买的一个域名:xugaoyi.com

2、DNS解析

想要在浏览器里面输入xugaoyi.com就能跳到博客页面。我们首先需要做的就是通过DNS解析将xugaoyi.com 与某已有域名绑定起来(CNAME),或者是固定的ip地址绑定起来(A)。

这里以腾讯云操作为例,步骤如下:

  • 域名列表中点击解析

解析

  • 进入解析页面后,点击添加记录。填入,记录类型:CNAME,主机记录:www@,解析线路:默认,记录值:你的github pages地址<userName>.github.io,TTL:默认的10分钟,确定。

解析2

3、使github pages与域名关联

deploy.sh添加如下脚本

echo 'xugaoyi.com' > CNAME # // 域名替换成你的

在自动部署配置文件ci.yml的jobs.build.steps.<Build and Deploy>.env.BUILD_SCRIPT中添加脚本

"cd docs/.vuepress/dist && echo 'xugaoyi.com' > CNAME" && cd -
# 域名替换成你的

其他

百度自动推送和统计

加入了自动推送和统计插件

'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参数

You can’t perform that action at this time.