使用vue2.0/3.0搭建博客，前端情緒員

• 實現原理
• 安裝nodejs和vue
• 寫項目
• 項目打包和托管項目
• 創建github倉庫
• 安裝git
• 托管項目到github倉庫
• 檢查倉庫并設置pages
• 購買域名和解析域名
• 修改更新項目
• ps(gitee搭建vue博客)

實現原理

使用vue打包出來的dist，把dist中的文件托管到自己的github中或者云服務器中，利用github的話，會生成一個github提供的一個鏈接，訪問這個鏈接就可以看到自己的網站，如果想要一個霸氣點的域名，可以去阿里云或者騰訊云買一個域名，解析這個域名，就可以用自己的域名去訪問網站。

安裝nodejs和vue

使用vue搭建博客必須創建vue項目，前提是先安裝nodejs，去nodejs官網下載，下載好后再安裝vue，建議安裝vue/cli，完事后并創建vue項目，大前端們可以省略此步驟。

寫項目

安裝好vue項目之后，運行并寫自己想要的頁面，（自己還可以去網上找自己想要的vue項目模板）

項目打包和托管項目

項目寫好之后，運行腳本bulid打包，會生成dist文件夾，把dist里面的文件放到github倉庫中，還可以自己買一個云服務器把項目托管到服務器中，當然項目只是死頁面，我是選擇放到guthub中，這里只對托管到github中做講解。

創建github倉庫

進入到自己github中，創建一個github倉庫，倉庫名字為xxx.github.io (xxx是自己github用戶名)，不過自從2020年10月1號之后，在git中創建的倉庫默認分支是main分支，要注意這個，倉庫創建好之后，安裝git，把自己的項目托管到倉庫中。

安裝git

去git官網或者去電腦管家下載git，并且檢查自己的電腦中有沒有添加.ssh，打開c盤，進入到自己的用戶中，看有沒有.ssh文件夾，如果沒有的話，可以去搜一下，github添加ssh的操作，完事之后，就可以把自己打包好的項目托管到github倉庫中。

托管項目到github倉庫

已經安裝好git了，回到打包好的dist中，右鍵打開Git Bash Here， 然后運行一些命令，把所有文件推送到遠程倉庫中，先輸入git init初始化本地當前dist文件中的倉庫，會看到一個隱藏文件.git，如果看不到的話，在查看中打開隱藏的項目就可以看到.git文件了，這個是本地倉庫，然后運行git add . 是把當前文件中所有的文件暫存到本地倉庫中，繼續運行git commit -m ‘隨便寫一些備注’ ，這個是把當前暫存的文件提交到本地倉庫中，如果有提示需要輸入綁定自己的github用戶名和郵箱，先綁定一下，然后再運行git commit -m ‘隨便寫一些備注’，繼續運行git remote add origin xxx (xxx代表創建的倉庫中的遠程鏈接，點擊clone會看到ssh下的一個鏈接，復制一下，放到xxx的位置)，這個是連接github中遠程倉庫，最后再輸入git push -u origin master,就可以把dist中的所有文件托管到github倉庫中了。
命令先后順序總結：
git init
git add .
git commit -m ‘提交的備注’
git remote add origin xxx (xxx代表倉庫的遠程鏈接，建議用ssh下的)
git push -u origin master

檢查倉庫并設置pages

打開倉庫，切換到分支master看有沒有成功，成功的話然后打開倉庫的settings，在settings中找到pages選項，在里面可以看到有一個切換分支的地方，默認的none，把這個切換到master，點擊save，會看到上面有guthub返回的一個鏈接，繼續刷新當前頁面，等到鏈接變成綠色，前面有一個對號之后，直接打開這個鏈接就可以看到自己的網站了。如果不想要這個鏈接，去買一個域名，把github返回的鏈接解析到域名中就可以。

購買域名和解析域名

去阿里云購買一個自己想要的域名，購買完成后要進行實名認證，實名認證可以需要幾天的時間，這里直接跳過，打開控制臺，找到自己的域名，點擊解析會看到

按照圖片中添加記錄，第一個的記錄值打開終端，輸入命令ping xxx.github.io，就可以看到一個ip地址，把這個ip地址添加到這個里面就行了，第二個記錄類型是CNAME, 這個是把xxx.github.io的鏈接指向到你的域名上，完成這些操作之后，在你的dist文件夾中創建一個文本文檔，里面寫上自己的域名

并且文件名稱命名為CNAME，不要后綴名，保存好后，添加這個文件到倉庫中，或者刪除倉庫中的master分支，把dist中的.git文件刪除了，再重新進行一遍托管項目到github倉庫，托管完成之后打開settings的pages，會看到自己的域名，同時把默認的none切換到master，就能看到自己的域名鏈接，多刷新幾次，等到背景色變為綠色，前面有個對號之后，就可以直接訪問了，

修改更新項目

后期肯定要修改項目，更新網站的內容，那么修改完成之后，重新bulid，建議把CNAME文件放到vue項目的根目錄中，以免重新bulid之后重置沒了，bulid之后再把CNAME復制到dist中，再重新進行一遍托管項目到githun倉庫，切記托管之前，一定要把倉庫中的master分支刪除了再重新托管，完成后再次打開settings中的pages切換到master分支。

整個流程就是這么多，如果哪里有不足的地方，請各位大前端們留言，看到后我會立即修改，
歡迎來搞，感謝支持。

ps(gitee搭建vue博客)

大家都知道，github是國外的網站，訪問起來肯定是很費勁的，甚至都進不去，所以也可以建議大家去用國內的gitee去搭建博客，地址是：https://blog.csdn.net/qq_45952585/article/details/122514028?spm=1001.2014.3001.5501

總結

以上是生活随笔為你收集整理的vue搭建博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。