你的我的網站該部署上線了

我的博客網站部署

前置條件

各位小夥伴，若是還不知道怎麼開發一個我的博客靜態網站，那麼先看做者的上一篇文章
我的博客網站搭建

首先要建立好你的我的博客網站項目，咱們在來談如何將你的我的博客網站進行發佈。

準備

因爲須要將代碼託管到相應的代碼倉庫，而且可以提供靜態網站部署的功能，如下這些平臺均可以進行代碼託管，
固然，本身的雲服務器須要另外的方式進行部署。

如下的帳號或者服務器，小夥伴們自行選擇一個就行。

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網站地址自行進行註冊，這裏就很少贅述。

coding帳號

Coding 是基於雲計算技術的軟件開發平臺，集項目管理、代碼託管、運行空間、質量控制爲一體。在雲計算時代，Coding推進軟件開發的雲端化，使開發者能用一個瀏覽器完成開發的各個環節。開發人員
能夠專心構建業務問題的解決方案，而非管理運營或發佈堆棧，確保應用知足產品層目標服務等級，同時更爲企業層級的項目應用提供了代碼質量檢驗以及項目質量把控的渠道和標準。在保證私有項目的數據安全和穩定的同時，Coding 還結合了冒泡及評論、公開項目發佈與討論等一系列社交化協做功能，打造具備技術支撐的開發者社區。

coding網站地址自行進行註冊，這裏就很少贅述。

一臺雲服務器

這個就看我的的考慮了，若是本身已經有了服務器，那麼在服務器上安裝Nginx將你的網站項目編譯後的靜態文件
丟到Nginx的目錄下就能夠進行訪問了。

一個域名

是否須要域名，小夥伴們自行考慮，能夠到阿里雲、華爲雲、騰訊雲等雲平臺進行域名註冊。

阿里雲
華爲雲
騰訊雲

如何進行域名註冊：手把手教你註冊本身的域名

部署

以上須要準備的準備好之後，開始進行部署。因爲本人是利用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以下圖所示：

域名解析還不會？手把手教你

• 而後在控制檯執行deploy.sh，執行完成後，項目就發佈上線了。

• 瀏覽器輸入域名：http://github.blog.triumphxx.com.cn

恭喜你，基於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官網）
  登陸conding網站，進行註冊

• 註冊完成後，登陸你的conding網址爲：https://團隊名.coding.net/

• 建立你的代碼倉庫，項目-->建立項目-->代碼託管項目如，建立的你的博客項目爲blogs

• 建立完項目後，到你的主頁，找到部署控制檯

• 點擊建立應用，填寫信息
  

• 建立部署流程，並建立
  

• 關聯項目

• 生成ssh公鑰

生成你的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的部署方式。 更多精彩內容，歡迎掃碼。