各位小伙伴,若是还不知道怎么开发一个我的博客静态网站,那么先看做者的上一篇文章
我的博客网站搭建html
首先要建立好你的我的博客网站项目,咱们在来谈如何将你的我的博客网站进行发布。vue
因为须要将代码托管到相应的代码仓库,而且可以提供静态网站部署的功能,如下这些平台均可以进行代码托管,
固然,本身的云服务器须要另外的方式进行部署。node
如下的帐号或者服务器,小伙伴们自行选择一个就行。git
GitHub:全球知名的同性交流网站,做为一个程序员不得不去关注的地方。若是你尚未github的帐号,
须要反思一下本身了。程序员
GitHub网站地址自行进行注册,这里就很少赘述。github
GitLab是由GitLabInc.开发,使用MIT许可证的基于网络的Git仓库管理工具,且具备wiki和issue跟踪功能。使用Git做为代码管理工具,并在此基础上搭建起来的web服务。web
GitLab由乌克兰程序员DmitriyZaporozhets和ValerySizov开发,它使用Ruby语言写成。后来,一些部分用Go语言重写。截止2018年5月,该公司约有290名团队成员,以及2000多名开源贡献者。GitLab被IBM,Sony,JülichResearchCenter,NASA,Alibaba,Invincea,O’ReillyMedia,Leibniz-Rechenzentrum(LRZ),CERN,SpaceX等组织使用shell
GitLab网站地址自行进行注册,这里就很少赘述。npm
Coding 是基于云计算技术的软件开发平台,集项目管理、代码托管、运行空间、质量控制为一体。在云计算时代,Coding推进软件开发的云端化,使开发者能用一个浏览器完成开发的各个环节。开发人员
能够专心构建业务问题的解决方案,而非管理运营或发布堆栈,确保应用知足产品层目标服务等级,同时更为企业层级的项目应用提供了代码质量检验以及项目质量把控的渠道和标准。在保证私有项目的数据安全和稳定的同时,Coding 还结合了冒泡及评论、公开项目发布与讨论等一系列社交化协做功能,打造具备技术支撑的开发者社区。浏览器
coding网站地址自行进行注册,这里就很少赘述。
这个就看我的的考虑了,若是本身已经有了服务器,那么在服务器上安装Nginx
将你的网站项目编译后的静态文件
丢到Nginx
的目录下就能够进行访问了。
是否须要域名,小伙伴们自行考虑,能够到阿里云、华为云、腾讯云等云平台进行域名注册。
如何进行域名注册:手把手教你注册本身的域名
以上须要准备的准备好之后,开始进行部署。因为本人是利用coding
和github
进行部署的,其余的部署方式,
不作过多的展开。为何选择conding
进行部署? 因为它是国内的平台,相较于GitHub
、GitLab
访问速度会快不少。
命名必须是你的用户名.github.io
好比个人github地址是:https://github.com/triumphxx
那么个人仓库名必须为:triumphxx.github.io
deploy.sh
在你本人的项目根目录下建立deploy.sh
文件内容以下:
#!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd docs/.vuepress/dist # 若是是发布到自定义域名 echo 'github.blog.triumphxx.com.cn' > CNAME git init git add -A git commit -m '博客更新发布' git push -f https://github.com/triumphxx/triumphxx.github.io master cd -
说明: echo 'github.blog.triumphxx.com.cn' > CNAME,这句脚本的意思是,
绑定你的私有域名,在你我的的域名管理下,解析域名到triumphxx.github.io
以下图所示:
而后在控制台执行deploy.sh
,执行完成后,项目就发布上线了。
浏览器输入域名:http://github.blog.triumphxx.com.cn
恭喜你,基于github Pages 的部署方式成功了
在 docs/.vuepress/config.js 中设置正确的 base。
若是你打算发布到 https://
若是你打算发布到 https://
在 .vuepress/config.js 中将 dest 设置为 public。
在你项目的根目录下建立一个名为 .gitlab-ci.yml 的文件,不管什么时候你提交了更改,它都会帮助你自动构建和部署
image: node:12.16.1 pages: cache: paths: - node_modules/ script: - yarn install # npm install - yarn docs:build # npm run docs:build artifacts: paths: - public only: - master
在服务器上安装Nginx
将你的网站项目编译后的静态文件,丢到Nginx
的目录下,就等于部署成功了。
coding
,在小伙伴们有coding
帐号前提下(没有请去注册:coding官网)conding
网站,进行注册注册完成后,登陆你的conding
网址为:https://团队名.coding.net/
建立你的代码仓库,项目-->建立项目-->代码托管项目
如,建立的你的博客项目为blogs
部署控制台
点击建立应用,填写信息
建立部署流程,并建立
关联项目
生成你的ssh公钥参考:conding生成ssh公钥
生成ssh公钥,须要配置一下,在你的电脑ssh公钥目录先新建一个文件config
内容以下:
# Host本身填一个名称 不要带中文就行 Host TriumpHxx # 这里是网站地址 HostName e.coding.net # 使用的git User git # coding对应的私钥 IdentityFile ~/.ssh/私钥名称
说明:Host 随便起一个名称就好,做用就是用这个名称,指向HostName网站地址,
这样的话你的仓库地址就能够进行简写。如:git@e.coding.net:triumphxx/blogs/blogs.git
就能够简写为git@TriumpHxx:triumphxx/blogs/blogs.git
在你的项目下,建立deploy.sh
脚本文件,文件内容以下
#!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd docs/.vuepress/dist # 若是是发布到自定义域名 echo 'blogs.triumphxx.com.cn' > CNAME git init git config user.name "你的conding用户名" git config user.email "你的conding注册邮箱" git add -A git commit -m 'deploy-coding' git push -f git@TriumpHxx:triumphxx/blogs/blogs.git master cd -
执行脚本,进行发布
在你的终端执行以下命令:
sh deploy.sh
配置持续部署模块
发布完成后登录你的conding
进入到代码仓库,就可以看到编译后文件。
这时,须要给你项目配置持续部署功能模块。点击右下角项目设置,功能开关
按钮,将持续部署打开。
配置持续发布
打开持续部署功能后,返回项目管理界面,点击持续部署->静态网站,点击当即发布
静态网站,填写基本信息,选择推送到master
分支触发构建。点击保存。
当即部署
配置完成持续发布后,系统将给你分配一个临时域名,点击当即部署。小伙伴们,若是有本身的域名
到你的域名中心配置便可。
配置域名
小伙伴们,若是有本身的域名,到你的域名中心配置便可,点击右上角的设置
按钮,
进入设置页面,设置须要绑定的域名。cname
是临时分配给你的域名。域名解析还不会?手把手教你
进行访问
输入你的绑定的域名进行访问
好啦,小伙伴们,到此,我的博客项目就完成了部署上线,主要说的是俩种部署方式,基于GitHub Pages
和conding
部署方式,
重点是conding
的部署方式。 更多精彩内容,欢迎扫码。