你的个人博客网站该上线了！

迷南。 2023-10-06 13:25 70阅读 0赞

## 个人博客网站部署 ##

### 前置条件 ###

各位小伙伴，如果还不知道怎么开发一个个人博客静态网站，那么先看作者的上一篇文章 [个人博客网站搭建][Link 1]

首先要创建好你的个人博客网站项目，我们在来谈如何将你的个人博客网站进行发布。

### 准备 ###

由于需要将代码托管到相应的代码仓库，并且能够提供静态网站部署的功能，以下这些平台都可以进行代码托管， 当然，自己的云服务器需要另外的方式进行部署。

以下的账号或者服务器，小伙伴们自行选择一个就行。

#### GitHub账号 ####

GitHub:全球知名的同性交流网站，作为一个程序员不得不去关注的地方。如果你还没有github的账号， 需要反思一下自己了。

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

#### GitLab账号 ####

GitLab是由GitLabInc.开发，使用MIT许可证的基于网络的Git仓库管理工具，且具有wiki和issue跟踪功能。使用Git作为代码管理工具，并在此基础上搭建起来的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等组织使用

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

#### coding账号 ####

Coding 是基于云计算技术的软件开发平台，集项目管理、代码托管、运行空间、质量控制为一体。在云计算时代，Coding推动软件开发的云端化，使开发者能用一个浏览器完成开发的各个环节。开发人员 可以专心构建业务问题的解决方案，而非管理运营或发布堆栈，确保应用满足产品层目标服务等级，同时更为企业层级的项目应用提供了代码质量检验以及项目质量把控的渠道和标准。在保证私有项目的数据安全和稳定的同时，Coding 还结合了冒泡及评论、公开项目发布与讨论等一系列社交化协作功能，打造具有技术支撑的开发者社区。

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

#### 一台云服务器 ####

这个就看个人的考虑了，如果自己已经有了服务器，那么在服务器上安装`Nginx`将你的网站项目编译后的静态文件 丢到`Nginx`的目录下就可以进行访问了。

#### 一个域名 ####

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

[阿里云][Link 2] [华为云][Link 3] [腾讯云][Link 4]

如何进行域名注册：[手把手教你注册自己的域名][Link 5]

### 部署 ###

以上需要准备的准备好以后，开始进行部署。由于本人是利用`coding`和`github`进行部署的，其他的部署方式， 不做过多的展开。为什么选择`conding`进行部署？ 由于它是国内的平台，相较于`GitHub`、`GitLab` 访问速度会快很多。

#### GitHub Pages ####

*  首先需要准备一个github仓库

命名必须是你的`用户名.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`如下图所示：
> 
> ❞

![E5_9F_9F_E5_90_8D_E8_A7_A3_E6_9E_90.png][]

[域名解析还不会？手把手教你][Link 5]

*  然后在控制台执行`deploy.sh`，执行完成后，项目就发布上线了。
 *  浏览器输入域名：`http://github.blog.triumphxx.com.cn`

![github-web.png][]

*恭喜你，基于github Pages 的部署方式成功了*

#### GitLab CI ####

*  在 docs/.vuepress/config.js 中设置正确的 base。
    
    如果你打算发布到 https://.gitlab.io/，则可以省略这一步，因为 base 默认即是 "/"。
    
    如果你打算发布到 https://.gitlab.io//（也就是说你的仓库在 https://gitlab.com//），则将 base 设置为 "//"。
    
    在 .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`账号前提下（没有请去注册： [coding官网][coding]） 登录 `conding`网站，进行注册

![conding-re.png][]

*  注册完成后，登录你的`conding`网址为：`https://团队名.coding.net/`
 *  创建你的代码仓库，`项目-->创建项目-->代码托管项目`如，创建的你的博客项目为`blogs`

![conding-code.png][]

*  创建完项目后，到你的主页，找到 `部署控制台`

![coding-deploy.png][]

*  点击创建应用，填写信息 ![create-deploy.png][]
 *  创建部署流程，并创建 ![deploy-actity.png][]
 *  关联项目

![re-priduct.png][]

*  生成ssh公钥

生成你的ssh公钥参考：[conding生成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`进入到代码仓库，就能够看到编译后文件。 这时，需要给你项目配置持续部署功能模块。点击右下角项目设置，功能开关 按钮，将持续部署打开。
    
    ![conding-code.png][]![coding-deploy-start.png][]
 *  配置持续发布
    
    打开持续部署功能后，返回项目管理界面，点击持续部署->静态网站，点击立即发布 静态网站，填写基本信息，选择推送到`master`分支触发构建。点击保存。
    
    ![coding-auto-deploy.png][]
 *  立即部署
    
    配置完成持续发布后，系统将给你分配一个临时域名，点击立即部署。小伙伴们，如果有自己的域名 到你的域名中心配置即可。
    
    ![qutiy-depoly.png][]
 *  配置域名
    
    小伙伴们，如果有自己的域名，到你的域名中心配置即可,点击右上角的`设置`按钮， 进入设置页面，设置需要绑定的域名。`cname`是临时分配给你的域名。[域名解析还不会？手把手教你][Link 5]
    
    ![bang-seccess.png][]
 *  进行访问
    
    输入你的绑定的域名进行访问
    
    ![sussess-web.png][]

### 小结 ###

好啦，小伙伴们，到此，个人博客项目就完成了部署上线，主要说的是俩种部署方式，基于`GitHub Pages`和`conding`部署方式， 重点是`conding`的部署方式。 更多精彩内容，欢迎扫码。

![E6_89_AB_E7_A0_81_E6_90_9C_E7_B4_A2_E8_81_94_E5_90_88_E4_BC_A0_E6_92_AD_E6_A0_B7_E5_BC_8F-_E6_A0_87_E5_87_86_E8_89_B2_E7_89_88.png][]

[Link 1]: https://mp.weixin.qq.com/s?__biz=MzI4NzM5MTU1Ng==&mid=2247483887&idx=1&sn=88e3be4ed63f9aad4930628d21c0d1d0&chksm=ebcf2bc4dcb8a2d2e59ad7ef4725f38276f32cadc49a8eb91cef51b8a41bea4669dd70a57e6a&token=872372159&lang=zh_CN#rd
[GitHub]: https://github.com
[GitLab]: https://about.gitlab.com
[coding]: https://coding.net
[Link 2]: https://www.aliyun.com
[Link 3]: https://www.huaweicloud.com
[Link 4]: https://cloud.tencent.com
[Link 5]: https://mp.weixin.qq.com/s?__biz=MzI4NzM5MTU1Ng==&mid=2247483911&idx=1&sn=285049c897a8f30920976fd418acdc11&chksm=ebcf282cdcb8a13a279ce83f853002e465561f5d9266a5cb5311721225b5486f2dc07818d4d3&token=872372159&lang=zh_CN#rd
[E5_9F_9F_E5_90_8D_E8_A7_A3_E6_9E_90.png]: http://cdn.triumphxx.com.cn/img/%E5%9F%9F%E5%90%8D%E8%A7%A3%E6%9E%90.png
[github-web.png]: http://cdn.triumphxx.com.cn/img/github-web.png
[conding-re.png]: http://cdn.triumphxx.com.cn/img/conding-re.png
[conding-code.png]: http://cdn.triumphxx.com.cn/img/conding-code.png
[coding-deploy.png]: http://cdn.triumphxx.com.cn/img/coding-deploy.png
[create-deploy.png]: http://cdn.triumphxx.com.cn/img/create-deploy.png
[deploy-actity.png]: http://cdn.triumphxx.com.cn/img/deploy-actity.png
[re-priduct.png]: http://cdn.triumphxx.com.cn/img/re-priduct.png
[conding_ssh]: https://help.coding.net/docs/project/features/ssh.html?_ga=2.105519686.47796659.1595077362-566250533.1594912224
[coding-deploy-start.png]: http://cdn.triumphxx.com.cn/img/coding-deploy-start.png
[coding-auto-deploy.png]: http://cdn.triumphxx.com.cn/img/coding-auto-deploy.png
[qutiy-depoly.png]: http://cdn.triumphxx.com.cn/img/qutiy-depoly.png
[bang-seccess.png]: http://cdn.triumphxx.com.cn/img/bang-seccess.png
[sussess-web.png]: http://cdn.triumphxx.com.cn/img/sussess-web.png
[E6_89_AB_E7_A0_81_E6_90_9C_E7_B4_A2_E8_81_94_E5_90_88_E4_BC_A0_E6_92_AD_E6_A0_B7_E5_BC_8F-_E6_A0_87_E5_87_86_E8_89_B2_E7_89_88.png]: http://cdn.triumphxx.com.cn/img/%E6%89%AB%E7%A0%81_%E6%90%9C%E7%B4%A2%E8%81%94%E5%90%88%E4%BC%A0%E6%92%AD%E6%A0%B7%E5%BC%8F-%E6%A0%87%E5%87%86%E8%89%B2%E7%89%88.png