手把手教你用vuepress搭建自己的网站(4)

itclanCoder

发布于 2020-10-28 17:01:39

1.1K1

发布于 2020-10-28 17:01:39

文章被收录于专栏：itclanCoder

部署到github平台

前提条件

文档放置在项目的 docs目录中
使用的是默认的构建输出位置
VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的npm scripts:,然后在itclan/package.json文件中添加如下命令
本地若没有安装vuepress非全局安装,pwa以及其他一些插件不会生效

{
  "scripts": {
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^1.5.0"
  }
}

创建两个仓库

在github上创建两个仓库,一个仓库的名称:https://<USERNAME>.github.io/<REPO>/ 即https://github.com/<USERNAME>/<REPO>,或者直接仓库的名称就是username.github.io(这个 username 是你 github 的登录账号的名称,是固定的),这个仓库的作用是用来部署线上版本用的
在创建一个仓库,这个仓库的名称任意,这个仓库是用来平时日常开发代码的,比如我的:blogcode

为什么要创建两个代码仓库呢,一个仓库不是很好么?

一个仓库用于日常的开发,新增文章或者二次开发,不断迭代,注意不要往这个仓库里push构建出来dist文件
另一个仓库只用于线上预览,项目中最终构建 build 生成的dist目录文件推送到这个远程仓库当中
保持两个仓库的相互独立,互不干扰,如果全部放在一个仓库里,不易于后续维护和代码的管理
如果你想把代码静态资源部署到其他服务器上,你只需把build构建出来的dist文件放到你服务器根目录下就可以了的

提醒

如果您的仓库不是放置在根目录下(就是https://itclancode.github.io/blogcode/这种形式,而非https://itclancode.github.io/),则在config.js的基础配置中需要更改base的路径,它默认是指向根路径的,可以省略

module.exports = {
  base: "/blogcode/"
}

在本地启动时,就会区分出来的,默认端口是8080,如果设置了base后,后面会跟上路径也可参考官方文档:部署到 github:https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages

配置自动化部署脚本

在itclan(以你自己的为准)根目录下,创建一个如下的脚本文件deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io,把下面一行注释掉,替换username即可,注意以下这是ssh的方式
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# git push -f git@github.com:itclancode.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# git push -f git@github.com:itclancode/blogcode.git master:gh-pages

cd -

注意:

注意克隆到本地仓库代码的方式,默认是https方式,如果你克隆代码方式是https 方式,上面的提交地止,就换成https的,如果是 ssh 的方式的就换成 ssh方式,否则是会出现问题的

若是ssh的方式,可以配置秘钥:这样不用每次提交代码,都输入用户名和密码的

也可以通过在命令行终端输入git remote -v查看克隆下的远端仓库地止的,看得出是那种方式克隆下来的

git remote -v

启动-deploy.sh-脚本

当你在git bash命令行终端执行bash deploy,注意在DOS命令行终端下,不支持这个bash命令,或者双击deploy.sh这个脚本就会自动的执行这个脚本,分别完成构建和向远端指定的仓库提交代码

有时候,我们希望执行一行命令就可以完成自动化部署，那么您需要在package.json中的scripts中添加deploy:bash deploy.sh就可以了的,往后在命令行终端执行npm run deploy或者yarn deploy就可以自动执行该deploy.sh脚本了的

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

提示

如果自动部署脚本不成功,可以尝试如下操作

npm run docs:build,手动构建
git push -f https://itclancode.github.io.git master

当你push,完后,地止栏里输入xxx.github.io,如果能够访问成功,那说明部署已经成功了,如下所示

配置自定义域名

前提条件

在域名管理商那里购买了域名,例如:阿里云,腾讯云都可以购买,备案(折腾一两次,大概流程就差不多了的)

登录域名管理后台

在这里我以阿里云为例:阿里云控制台

实现这一步相当于就是将自定义的域名指向gihub pages,当访问https://itclancode.github.io/与doc.itclan.cn指向同一个IP,相比于浏览器地止栏输入xxx.github.io,直接输入域名访问要方便得多

检验域名有没有解析成功

可以在本地的命令行终端,进行ping一下的,如

C:\Users\itclancode>ping doc.itclan.cn

正在 Ping itclancode.github.io [xxx.xxx.xxx.xxx] 具有 32 字节的数据:
请求超时。
来自 xxx.xxx.xxx.xxx的回复: 字节=32 时间=51ms TTL=48
来自 xxx.xxx.xxx.xxx 的回复: 字节=32 时间=52ms TTL=48
来自 xxx.xxx.xxx.xxx 的回复: 字节=32 时间=53ms TTL=48

xxx.xxx.xxx.xxx 的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 3，丢失 = 1 (25% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 51ms，最长 = 53ms，平均 = 52ms

C:\Users\itclancode>ping itclancode.github.io

正在 Ping itclancode.github.io [xxx.xxx.xxx.xxx] 具有 32 字节的数据:
请求超时。
来自 xxx.xxx.xxx.xxx 的回复: 字节=32 时间=51ms TTL=48
来自 xxx.xxx.xxx.xxx 的回复: 字节=32 时间=55ms TTL=48
请求超时。

xxx.xxx.xxx.xxx的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 2，丢失 = 2 (50% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 51ms，最长 = 55ms，平均 = 53ms

如果能 ping 得通,说明配置没有问题的

阿里云域名检测工具如果遇到解析不成功:先仔细查看一下文档,按照文档指示一步一步的排查,官方文档很详细,但是就是不明显,得耐心一点的

在仓库底下新建一个-CNAME-文件

在你仓库根目录下创建一个 CNAME 文件,里面内容是,就是你想要指向绑定的域名

这个文件也可以在远程仓库里创建,注意是在你那个要部署的仓库里

doc.itclan.cn

在你推上去后,在代码仓库设置页面的Custom domain中应该就可以看到变化了的,最终测试是否成功

部署到 coding 平台

上面的操作是将代码部署到github pages中,然后设置一个二级域名指定github的 ip 地止

如果你想将自己的网站部署到自己服务器上,可以将npm run build生成的dist(docs/.vuepress/dist)目录文件,上传到你网站的服务器根目录下就可以了的

也可以通过ftp手动上传,或通过一些自动化集成 cli 工具,通过脚本的方式自动部署上传,都可以

受限于国外网络的原因,有时候访问github pages是有些慢的,但可以把代码部署到国内的一些代码管理的平台上:例如码云,coding上等都可以

只要你熟悉了github pages,其他平台都大同小异,在这里我以coding为例

前提条件

前往coding 官网,注册 coding账号,若有直接登录即可

新建选择 DevOps 代码仓库

注意

新建仓库时,选择DevOps 项目作为模板,如果选择第 1,2 个,里面并没有持续部署,静态网站,云服务器等功能

step1:新建仓库

step2:选择DevOps模板

step3:选择静态网站

step4:修改静态网站配置

step5:设置自定义域名

经过上面的操作,访问在 coding 平台上部署的网站,能访问,那么就说明成功部署了的

可能会遇到的问题

coding仓库底下上传了dist文件家,部署无效

解决办法

仓库根目录下上传 dist 目录下子文件内容即可解决

域名解析问题
具体自定义域名解析问题可参考下方常见问题

添加百度统计

进入百度统计官方网址:百度统计
新增网站,填入你的网站信息即可

在.vuepress/config.js的head中添加如下一段代码即可

[
    // 添加百度统计代码
    "script",
    {},
    `
      var _hmt = _hmt || [];
      (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?d61cb503bd6183sdfb7a28c4730fd83"; // 注意是你自己网站的这个参数
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
      })();
    `
  ],

一般过 24 小时后,百度就会统计你网站每日的访问量的,您可以根据这些信息,不断的优化您自己的网站

添加谷歌分析

前提条件

下面的一切基于您具备科学上网能力之上
有一个Google账号,没有的话,能科学上网,注册一个即可
前往谷歌分析站点
创建媒体资源,获取ga,格式是UA-00000000-0
安装插件,并配置选项

安装

在当前项目目录下,使用yarn安装@vuepress/plugin-google-analytics,插件

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics

注意

如果你的项目正在使用 Google analytics插件，推荐使用 Yarn而不是npm来安装所有依赖。因为在这种情形下，npm 会生成错误的依赖树

使用

module.exports = {
plugins: [
  [
    '@vuepress/google-analytics',
    {
      'ga': '' // UA-00000000-0 ,填入你google账号分析那个ID即可
    }
  ]
]

添加逼格徽章

有时候看到一些 Github 项目里,项目前会新填一些徽章,这些徽章是可以自己自定义生成的

使用的方式也很简单,使用 markdonw语法添加图片的方式引入到你md文件中就可以了的

![掘金](https://img.shields.io/badge/%E6%8E%98%E9%87%91-10K-orange)

链接地止徽章生成地止 shields.io https://shields.io/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-15，如有侵权请联系 cloudcommunity@tencent.com 删除

github

本文分享自 itclanCoder 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度