你的个人博客网站该上线了！
個人博客網站部署
前置條件
各位小伙伴，如果還不知道怎么開發一個個人博客靜態網站，那么先看作者的上一篇文章 個人博客網站搭建
首先要創建好你的個人博客網站項目，我們在來談如何將你的個人博客網站進行發布。
準備
由于需要將代碼托管到相應的代碼倉庫，并且能夠提供靜態網站部署的功能，以下這些平臺都可以進行代碼托管， 當然，自己的云服務器需要另外的方式進行部署。
以下的賬號或者服務器，小伙伴們自行選擇一個就行。
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?-
執行腳本，進行發布
在你的終端執行如下命令：
配置持續部署模塊
發布完成后登陸你的conding進入到代碼倉庫，就能夠看到編譯后文件。 這時，需要給你項目配置持續部署功能模塊。點擊右下角項目設置，功能開關 按鈕，將持續部署打開。
配置持續發布
打開持續部署功能后，返回項目管理界面，點擊持續部署->靜態網站，點擊立即發布 靜態網站，填寫基本信息，選擇推送到master分支觸發構建。點擊保存。
立即部署
配置完成持續發布后，系統將給你分配一個臨時域名，點擊立即部署。小伙伴們，如果有自己的域名 到你的域名中心配置即可。
配置域名
小伙伴們，如果有自己的域名，到你的域名中心配置即可,點擊右上角的設置按鈕， 進入設置頁面，設置需要綁定的域名。cname是臨時分配給你的域名。域名解析還不會？手把手教你
進行訪問
輸入你的綁定的域名進行訪問
小結
好啦，小伙伴們，到此，個人博客項目就完成了部署上線，主要說的是倆種部署方式，基于GitHub Pages和conding部署方式， 重點是conding的部署方式。 更多精彩內容，歡迎掃碼。
總結
以上是生活随笔為你收集整理的你的个人博客网站该上线了！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工业视觉相机参数
- 下一篇： html图片颜色加深,CSS教程：图片使