前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手把手教你用vuepress搭建自己的网站(4)

手把手教你用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以及其他一些插件不会生效
代码语言:javascript
复制
{
  "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的路径,它默认是指向根路径的,可以省略

代码语言:javascript
复制
module.exports = {
  base: "/blogcode/"
}

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

配置自动化部署脚本

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

代码语言:javascript
复制
#!/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查看克隆下的远端仓库地止的,看得出是那种方式克隆下来的

代码语言:javascript
复制
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脚本了的

代码语言:javascript
复制
"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

提示

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

  1. npm run docs:build,手动构建
  2. 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一下的,如

代码语言:javascript
复制
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 文件,里面内容是,就是你想要指向绑定的域名

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

代码语言:javascript
复制
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.jshead中添加如下一段代码即可
代码语言:javascript
复制
[
    // 添加百度统计代码
    "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,插件

代码语言:javascript
复制
yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics

注意

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

使用

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

添加逼格徽章

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

  • 使用的方式也很简单,使用 markdonw语法添加图片的方式引入到你md文件中就可以了的
代码语言:javascript
复制
![掘金](https://img.shields.io/badge/%E6%8E%98%E9%87%91-10K-orange)
  • 链接地止徽章生成地止 shields.io https://shields.io/
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-15,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 部署到github平台
    • 前提条件
    • 创建两个仓库
    • 配置自动化部署脚本
    • 启动-deploy.sh-脚本
    • 配置自定义域名
      • 前提条件
        • 登录域名管理后台
        • 检验域名有没有解析成功
        • 在仓库底下新建一个-CNAME-文件
        • 部署到 coding 平台
        • 新建选择 DevOps 代码仓库
        • 可能会遇到的问题
        • 添加百度统计
        • 添加谷歌分析
          • 前提条件
          • 安装
          • 使用
          • 添加逼格徽章
          相关产品与服务
          CODING DevOps
          CODING DevOps 一站式研发管理平台,包括代码托管、项目管理、测试管理、持续集成、制品库等多款产品和服务,涵盖软件开发从构想到交付的一切所需,使研发团队在云端高效协同,实践敏捷开发与 DevOps,提升软件交付质量与速度。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档