Posted on by author

由于需要将网站源代码托管到位，并且能够提供静态网站的部署功能，以下是一些推荐的平台和工具。当然，你也可以选择自己的云服务器来进行部署。

一、GitHub账号

GitHub：全球知名的同性交流平台，作为一个程序员，不得不关注的地方。

如果你还没有GitHub的账号，那么你需要反思一下自己了。

GitHub网站地址：自行注册，这里就不多赘述。

二、GitLab账号

GitLab是由GitLab,inc.开发的，使用MIT许可证的基于网络的Git仓库管理工具。它具有wiki和issue跟踪功能，使用Git作为代码管理工具，并在此基础上搭建web服务。

GitLab由乌克兰程序员Dmitriy Zaporozhets和Valery Sizov开发，它使用Ruby语言写成。后来，一些部分用Go语言重写。

截止到2018年5月，该公司约有9名团队成员，以及多名开源贡献者。

GitLab被IBM、Sony、Jülich Research Center、NS、libaba、Invincea、O’Reilly Media、Leibniz-Rechenzentrm(LRZ)、CERN、SpaceX等组织使用。

GitLab网站地址：自行注册，这里就不多赘述。

三、coding账号

Coding是基于云计算技术的软件开发平台，集项目管理、代码托管、运行空间、质量控制为一体。在云计算时代，Coding推动软件开发的云端化，使开发者能用一个浏览器完成开发的各个环节。

开发人员可以专心构建业务问题的解决方案，而非管理运营或发布堆栈，确保应用满足产品层目标服务等级，同时更为企业层级的项目应用提供了代码质量检验以及项目质量把控的渠道和标准。

在保证私有项目的数据安全和稳定的同时，Coding还结合了冒泡及评论、公开项目发布与讨论等一系列社交化协作功能，打造具有技术支撑的开发者社区。

coding网站地址：自行注册，这里就不多赘述。

四、一台云服务器

如果你自己已经有了服务器，那么你可以在服务器上安装Nginx，将你的网站源代码编译后的静态文件放到Nginx的目录下就可以进行访问了。

五、一个域名

是否需要域名，小伙伴们自行考虑。可以到阿里云、华为云、腾讯云等云平台进行域名注册。

如何进行域名注册：手把手教你注册自己的域名。

接下来，我们准备好一切以后就开始进行部署吧。

由于本人是利用coding和GitHub进行部署的，其他的部署方式就不过多展开了。

为什么选择Coding进行部署？

因为它是国内的平台，相较于GitHub、GitLab，访问速度会快很多。

GitHub Pages首先需要准备一个GitHub仓库，命名必须是你的用户名.githb.io。比如我的GitHub地址是：https://githb.com/trimphxx，那么我的仓库名必须为：trimphxx.githb.io。

准备发布文件deploy.sh。在你本人的项目根目录下创建deploy.sh文件内容如下：

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

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

# 如果是发布到自定义域名
echo 'githb.blog.trimphxx.com.cn' > CNAME

git init
git add -
git commit -m '博客更新发布'
git push -f https://githb.com/trimphxx/trimphxx.githb.io master
cd -

然后，在控制台执行deploy.sh，执行完成后，项目就发布上线了。

Congratulations, you have successfully deployed your blog based on GitHub Pages!

GitLab CI

在docs/vepress/config.js中设置正确的base。如果你打算发布到https://githb.io/，则可以省略这一步，因为base默认即是"/"。

如果你打算发布到https://githb.io//（也就是说你的仓库在githb.com/），则将base设置为"//"。在.vepress/config.js中将dest设置为public。

在你项目的根目录下创建一个名为.gitlab-ci.yml的文件。无论何时你提交了更改，它都会帮助你自动构建和部署：

image: node:1.16.1

pages:
  cache:
    paths:
      - node_modules/script
      - yarninstall#npminstall-yarn
  build:
    script:
      - npm run build
  artifacts:
    paths:
      - publiconly
      - master

服务器在服务器上安装Nginx，将你的网站源代码编译后的静态文件放到Nginx的目录下，就等于部署成功了。

Coding部署

作者重点介绍一下基于coding。在小伙伴们有coding账号前提下（没有请去注册：coding官网）登录coding网站。

进行注册后，登录你的coding网址为：https://团队名.coding.net/，创建你的代码仓库，项目 –> 创建项目 –> 代码托管项目如， 创建的你的博客项目为blogs。

创建完项目后，到你的主页，找到部署控制台点击创建应用，填写信息创建部署流程，并创建关联项目生成ssh公钥。

生成ssh公钥参考：coding生成ssh公钥编辑配置文件生成ssh公钥。

在Windows系统中，你可以使用Git Bash来实现。首先，你需要打开命令提示符，然后进入你的.ssh目录（如果没有则创建一个）：

cd ~\.ssh

接着执行以下命令生成新的SSH密钥对：

ssh-keygen -t rsa -b 4096 -C "你的邮箱"

在弹出的对话框中输入文件保存路径（默认为~/.ssh/id_rsa），然后设置密码保护你的私钥。

最后，将公钥复制到coding平台的SSH Key配置中。在项目设置 –> 秘钥管理 –> 新增秘钥处，粘贴你的公钥内容。

编写发布脚本

在你的项目下，创建deploy.sh文件：

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

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

# 如果是发布到自定义域名
echo 'githb.blog.trimphxx.com.cn' > CNAME

# push 到 GitHub Pages
git init
git add -
git commit -m '博客更新发布'
git remote add origin https://githb.com/trimphxx/githb-blog.git
git branch -M main
git push -f origin main

# push 到 Coding Pages
git clone https://coding.net/git/your-repo/
cd your-repo/
rm -rf .git
mv ../docs/* ./
touch .nojekyll
git add .
git commit -m '更新博客内容'
git remote add coding https://coding.net/api/githb-blog.git
git push -f coding master

# 切换回项目根目录
cd -

部署

执行以下命令将代码推送到GitHub：

sh deploy.sh

然后，访问你的blog地址：https://githb.io/trimphxx.githb.io。

Conclusion

好啦，小伙伴们，到此，个人博客项目就完成了部署上线。本文重点讲解的是两种部署方式， 基于 GitHub Pages 和 Coding 部署，其中重点是 Coding 的部署方式。

更多精彩内容，请关注后续文章。

author

Related Posts