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

news/2024/5/20 1:32:58/文章来源:https://blog.csdn.net/wzc_coder/article/details/108571015

 

部署到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' > CNAMEgit 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-pagescd -

注意:

注意克隆到本地仓库代码的方式,默认是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"},

提示

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

  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一下的,如

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

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_854757.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vuepress建站过程中遇到的一些问题

vuepress建站过程中遇到的一些问题

页面显示-404 在 vuepress说明了文件路径与页面路由之间的映射关系 文件的相对路径页面路由地址/README.md//guide/README/guide//README.md//config.md/config.html当你访问 /guide/而 404 时,这是由于guide目录下缺乏了它对应的 README.md文件 侧边栏显示的是文件路径&#x…
阅读更多...
让自己的网站支持第三方支付能力(支持支付宝与微信支付)

让自己的网站支持第三方支付能力(支持支付宝与微信支付)

前言 对于建站,相信很多小伙伴,一方面是希望自己有个知识的沉淀的载体,另一种程度上也是建立自我品牌的开始,当然也希望网站能够带来一些隐性或者显性的收入,例如:吸引广告商,贴片广告,付费阅读,自产自卖等 您将在本篇中读完get到 在vuepress中如何注入全局组件 实现置顶与置底…
阅读更多...
如何将代码部署到腾讯云网站静态托管

如何将代码部署到腾讯云网站静态托管

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;(上)(下)前言之前将网站代码部署到 coding 上,并成功迁移到腾讯云上存储桶…
阅读更多...
如何通过一行代码实现等待指定若干秒后自动跳转到指定的网站上

如何通过一行代码实现等待指定若干秒后自动跳转到指定的网站上

背景前天,老板提了一个需求,提供给用户的下载说明文档,当用户打开之后,等待5秒后自动跳转到公司的官网上,那这个是怎么实现?方法1-使用定时器实现setTimeout(()> {window.location.href "https://itclan.cn"; },5000)() // 等价于 var timer setTimeout(() &g…
阅读更多...
针对网站链接-使用rel=”nofollow”属性提升网站seo

针对网站链接-使用rel=”nofollow”属性提升网站seo

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;seo的优化做得好,毫无疑问可以提升网站的排名,增强百度,Google,搜狗等搜索…
阅读更多...
网站被qq拦截应该怎么处理

网站被qq拦截应该怎么处理

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;在浏览器中输入网站可以直接打开,但是在qq中,发现,被qq给拦截了的,提示“非…
阅读更多...
第1节-从0到1快速建设网站-最终实现商业化盈利

第1节-从0到1快速建设网站-最终实现商业化盈利

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;如果不知道如何操作点击这里,标星不迷路哈喽&#xff0c;大家好,我是川川,…
阅读更多...
第2节-为什么有必要去建站开发应用

第2节-为什么有必要去建站开发应用

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;如果不知道如何操作点击这里,标星不迷路哈喽,大家好,我是川川,今天给大家分…
阅读更多...
第3节-怎么去做网站-选择最合适的技术

第3节-怎么去做网站-选择最合适的技术

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;如果不知道如何操作点击这里,标星不迷路怎么去网站-选择最快最合适的技术在…
阅读更多...
第4节-建设一个什么样的网站

第4节-建设一个什么样的网站

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;如果不知道如何操作点击这里,标星不迷路哈喽&#xff0c;大家好&#xff0…
阅读更多...
第9节-做网站有哪些收入接入点

第9节-做网站有哪些收入接入点

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号&#xff08;ID&#xff1a;itclanCoder&#xff09;如果不知道如何操作点击这里,标星不迷路哈喽&#xff0c;大家好&#xff0…
阅读更多...
网站服务器配置-应该选择多大带宽-同时能承载多少用户的访问

网站服务器配置-应该选择多大带宽-同时能承载多少用户的访问

前言随着网站流量运营的增长,每天有很多人来访问你的网站和应用,这个肯定是好事,但随之而来的就是,因为网站服务器配置过低,导致同一时刻如有几百,几千,几万人同时在线访问,会让服务器处理不过来,一个服务器创建的应用多了,若其中有一个应用访问非常大,那么服务器的cpu就很吃紧…
阅读更多...
两个域名一个主机空间怎么做两个网站

两个域名一个主机空间怎么做两个网站

假设现在目前要在一台服务器上建两个网站t1和t2&#xff0c;域名分别为www.a.com、www.b.com&#xff0c;这时候肿么办呢&#xff1f; 1.先配置两个域名绑定到服务器的ip 这个简单&#xff0c;略。2.将两个网站copy到tomcat的webapps目录下 即将解压war文件后的文件夹。如下图…
阅读更多...
网站前台性能优化教程

网站前台性能优化教程

之前一系列博文介绍了网站后台的数据库性能优化&#xff0c;其实前端的优化也是很重要的。在数据库范文速度提升上去的时候&#xff0c;仍然会出现页面加载缓慢的现象&#xff0c;此时&#xff0c;就需要对于网站的前端代码进行优化。 关于前端性能优化的教程不多&#xff0c;好…
阅读更多...
在线刷网站流量(倍儿厉害)

在线刷网站流量(倍儿厉害)

刷网站流量一般可以在网页代码里嵌入JS代码&#xff0c;类似于&#xff1a;<a href"javascript:this.location.reload();" _fcksavedurl""javascript:this.location.reload();"" style"color: #FFFFFF; font-weight: normal">re…
阅读更多...
高性能网站实用技巧之消息队列篇

高性能网站实用技巧之消息队列篇

什么是消息队列消息队列&#xff08;Message Queue&#xff09;是一种进程间通信或同一进程的不同线程间的通信方式。进程或者线程之间通过 消息 进行通信&#xff0c;消息发送后可以立即返回&#xff0c;由消息系统来确保信息的可靠传递&#xff0c;消息发布者&#xff08;生产…
阅读更多...
bugku 网站被黑/管理员系统/WEB4/输入密码查看flag 题目详解

bugku 网站被黑/管理员系统/WEB4/输入密码查看flag 题目详解

网站被黑 来到了bugku&#xff1b;打开“网站被黑”这道题&#xff1b; 页面如图&#xff1b; 接触此类题目&#xff0c;一般从后台扫描方面考虑&#xff1b; 御剑后台扫描工具 链接: https://pan.baidu.com/s/1bebPE9aNEVnV1_o1fgAMvA 提取码: w46z 扫描http://123.206…
阅读更多...
门户网站建站及CMS选型

门户网站建站及CMS选型

开发完成后&#xff0c;本专栏所有项目源码会以MIT协议开源&#xff01; 门户网站建站及CMS选型 选型原因分析 目前比较成熟好用的开源内容管理系统基本都是PHP写的&#xff0c;经过对比考虑后选择了使用Java开发的若依&#xff0c;虽然有使用若依开发的CMS&#xff0c;但前后…
阅读更多...
原生js禁用网站所有a标签的跳转链接

原生js禁用网站所有a标签的跳转链接

原生js禁用网站所有a标签的跳转链接 由于一个正在开发的网站需要预览&#xff0c;但是内页还未制作&#xff0c;于是临时把跳转链接禁用一下。 主要代码 let tagA Array.from(document.getElementsByTagName("a"));tagA.forEach(e>{e.removeAttribute("hre…
阅读更多...
之前发了一个登录表的设计，这里是设计实现的代码：网站登录设计

之前发了一个登录表的设计，这里是设计实现的代码：网站登录设计

简单的用户表设计如上图&#xff1a; 代码如下所示&#xff1a; 随机加密算法6个&#xff1a; package com.auth.sp.common.utils; import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; import sun.misc.BASE64Encoder; import java.security.Key; import java.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业