一、前言
網站主題最初是在開發資料api的時候看到的,當時在學習Mybatis-Plus,最初也不知道這是個主題,就覺得Mybatis-Plus官網UI真的不錯,直到後面發現另外一個類似的網站,我意識到這是個模板,於是有了自己也搭建一個的想法,不過拖延症相當嚴重,最初是在寶塔上修改的,效率極低,一度放棄部署,直到最近換成本地開發才好了很多,也就是最近網站搭建初步完成,接下來就是往裡面增加文章等等,這裡帶大家從零開始搭建Vdoing主題網站,算是對過去一個月的知識總結。下圖就是mybatis-plus官網,是我們年輕人喜歡的風格(這裡隨便吐槽一下xx園吧,風格還是20年前的,不知道他們的UI設計師是不是還是兼職的)。
二、準備工作
1。github註冊
what?你居然沒有github賬號,建議你放棄網站部署(開玩笑)。作為全球最大的程式碼託管平臺,基本上每個稍微接觸過開發的應該都用過,如果你還沒註冊的話,趕緊註冊一個,沒聽過github太丟人了,註冊也很簡單(有手就行)。
點選進入github官網,這裡需要注意一點,如果是國內訪問的話,移動是可以的,其他運營商貌似有遮蔽,如果訪問不了,自行百度解決。
2。申請屬於自己的域名
這裡推薦去國外的Godaddy平臺註冊一個域名
3。申請註冊vercel平臺
vercel平臺是一個可以免費託管個人網站的自動化部署平臺,只要你的程式碼託管平臺(類似github,gitlab,gitee等)commit發生變化,它就會自動更新和重新部署,解放生產力。
點選vercel官網sign up註冊一個賬號,當然也可以選擇github直接登入,會更方便一點,可以直接匯入自己的倉庫,包括私有倉庫。
4。下載node和yarn
node
進入node的官網,選擇LTS即長期穩定版本下載。會得到一個msi字尾的檔案,即開箱即用的版本,不用自己手動配置環境變數啥的,會配置好的,注意安裝位置改一下就行,放在除c盤外的盤即可,其他就一步步點選確認即可,最後cmd中輸入node有welcome提示即為成功,不成功按照相應提示瀏覽器搜尋即可。
yarn
這個是個包管理工具,和npm差不多,聽說更快一點,這裡安裝是由於主題更新採用的是這個命令,所以這裡安裝一下。
yarn官網,如果不想配置環境變數的話,還是可以採用msi字尾安裝。
5。圖床配置
CDN + COS配置圖床
有了圖床,你就可以隨時隨地採用URL引用你的圖片,非常方便,可以參考我寫的這篇搭建部落格CDN+COS搭建圖床超詳細步驟,有個缺點就是需要備案才能使用自定義域名和CDN服務,不過如果想要白嫖的話,搜尋國外的圖床也是可以的,國內也有一些提供圖床配置的,使用它們的域名上傳圖片也可以。這裡採用的是pic-go圖床管理工具,強烈安利,真的太方便了。
路徑引用
如果你沒有自己的圖床也沒關係,主題部落格還提供本地引用的功能,不過這個更改圖片的時候比較麻煩,雖然有時候它可能更快一點點。
6。開發IDE下載
我是用習慣了idea,所以這裡推薦idea進行開發,安裝node。js外掛,然後就可以本地開發了,沒有的話安裝一下即可。
idea官網
安裝node。js外掛
至此,準備工作已經完成,接下來就進入今天的主題。
三、本地開發
1。github fork專案
Vdoing主題專案地址,這裡建議fork整個倉庫,然後自己做一些修改即可,作者大大真的太強了。
2。基礎網站配置
主頁配置
開啟以下目錄的index。md,你可能會問咋是md格式的,不應該是html格式的嗎?彆著急,這個是開發中的,打包之後是index。html
以下欄位對應相關的圖,可以自行體會一下,對應導航欄下面的幾個欄位,其中涉及使用URL引入的,可以替換成路徑引用,具體欄位幫助請自行檢視fork過來的倉庫介紹,也可以到Vdoing官方文件查閱。
home: trueheroImage: https://img。de7v。com/img/new_logo_2。png# heroImage:/img/web。png# 這個路徑在public下的img目錄中heroText: IT七劍客tagline: 網際網路中的持劍者actionText: 立刻進入 →actionLink: /wresource/bannerBg: none
透過路徑引用的圖片目錄,把你想要的圖片全放進去然後就可以引用了。
config。ts配置
進入config。ts介面
首先我們先找到head位置進行配置,開啟網站的小圖示,同樣也可以使用URL或者本地引用
找到location開頭的這段程式碼,網站的標題和描述寫一下,這個會在百度搜索的快照中展示。
locales: { ‘/’: {//代表baseurl,即網站所有的引用的根路徑,預設是沒有的,如果資料夾有需要可以修改 lang: ‘zh-CN’, title: “IT七劍客”, description: ‘網際網路中的持劍者,七劍客帶你斬斷一切bug’, }},
下面這些程式碼主要是配置導航欄和其他全域性功能,其中logo是最左側顯示的圖片,repro是自己的github名,用於直接跳轉github主頁,其他的取預設即可。
sidebarDepth: 2, // 側邊欄顯示深度,預設1,最大2(顯示到h3標題)logo: ‘https://img。de7v。com/img/new_logo_2。png’, // 導航欄logorepo: ‘xyh-fu’, // 導航欄右側生成Github連結searchMaxSuggestions: 10, // 搜尋結果顯示最大數lastUpdated: ‘上次更新’, // 開啟更新時間,並配置字首文字 string | boolean (取值為git提交時間)docsDir: ‘docs’, // 編輯的資料夾// docsBranch: ‘master’, // 編輯的檔案所在分支,預設master。 注意:如果你的分支是main則修改為maineditLinks: true, // 啟用編輯editLinkText: ‘編輯’,
footer:{ // 頁尾資訊 createYear: 2022, // 部落格建立年份 //部落格版權資訊,支援a標籤 copyrightInfo:‘IT七劍客 | MIT License
至此基本配置已經大功告成,接下來我們談談文章是怎麼配置和主頁路由的規則。
文章謄寫和路由設定
首先配置目錄頁,這個是文章的導航介面,可以分別檢視各個目錄下的文章列表
——-pageComponent: name: Catalogue data: path: 01。wresource 安卓 imgUrl: https://img。de7v。com/img/wresource。png description: Android,Kotlin,Jetpack等技術title: wresource 安卓date: 2020-03-11 21:50:53permalink: /wresourcesidebar: falsearticle: falsecomment: falseeditLink: falseauthor: name: wresource link: https://github。com/xyh-fu——-
在這裡設定目錄的路由以及一些基礎的配置,放圖自行體會,這裡需要注意一點,path要和docs下面的相應文章目錄路徑名一致,這裡僅僅只是配置一下介面,真正的文章是放在docs下面的目錄中。
關於文章謄寫和命名規則具體檢視作者的這篇文章關於目錄和文章名稱約定(這裡偷懶一波)。
接下來再次回到之前得index。md中,可以配置主介面相關資訊了
features: # 可選的 - title: wresource 安卓 details: Android,Kotlin,Jetpack等技術 link: /wresource/ # 可選 imgUrl: https://img。de7v。com/img/wresource。png # 可選
配置效果如下圖所示
3。外掛配置
這部分就屬於網站的內部配置了,與外觀沒有多大關係,如果覺得可以了,就不用配置了
站點資訊頁面
主要用於統計網站相關資訊的功能同時也增加文章字數統計以及閱讀量統計等等,這個配置參考kbt大大的部落格,這裡提醒一下readfile檔案在部落格中失效,建議去kbt大大的github專案主頁獲取最新的程式碼。站點資訊搭建
這裡給出當時踩坑的那個readfile檔案程式碼,如果有不同,以作者的為主。
import fs from ‘fs’; // 檔案模組import path from ‘path’; // 路徑模組import matter from ‘gray-matter’; // FrontMatter解析器 https://github。com/jonschlinkert/gray-matterimport chalk from ‘chalk’ // 命令列列印美化const log = console。logconst docsRoot = path。join(__dirname, ‘。。’, ‘。。’, ‘。。’, ‘docs’); // docs檔案路徑/** * 獲取本站的文章資料 * 獲取所有的 md 文件,可以排除指定目錄下的文件 */function readFileList(excludeFiles: Array
下面給出效果圖
這裡有一點比較坑,就是當時這個模組預設掛載到熱門標籤下面,然而我沒有設定標籤。最後給掛在了頁面底部。請務必仔細閱讀作者的部落格。
廣告配置
首先在config。ts的head中引入下列程式碼,這裡是谷歌廣告配置。
[ ‘script’, { ‘data-ad-client’: ‘自己的廣告id’, async: ‘async’, src: ‘https://pagead2。googlesyndication。com/pagead/js/adsbygoogle。js’, },], // 網站關聯Google AdSense 與 html格式廣告支援(你可以去掉)
然後在themeConfig中新增下列欄位
在下列目錄中完成html廣告的配置
我的配置,在全域性右下角新增廣告。
windowRB: ` `,
複製
百度統計
這部分比較簡單,在head中加入以下欄位即可(誰說比較簡單的,這個我鼓搗了一週,外掛用不了,不知道是啥原因,最後採用這個比較簡單的方法配置),至於百度統計碼,百度一下百度統計即可。它最重要的作用就是分析網站的來訪數量以及搜尋量等等,站長必備工具之一。
[ ‘script’, { src: ‘https://hm。baidu。com/hm。js?百度統計碼’, },],
複製
評論配置
這個是最近配置成功的,踩了好多坑,也是參考kbt大大的部落格,我用的也是twikoo評論,之前使用gittalk的,後面發現國內根本不能訪問,所以換成了目前這個評論系統。kbt大大寫的搭建評論的部落格,說明幾個坑。
部署時注意是部署雲函式,不是該評論系統專案,被這個坑了好久好久。
點選自動部署會自動進入dev分支下的vercel配置,不是整個倉庫
關於mongo db,感覺應該是香港節點會更快一點,不知道為啥會推薦us節點
關於環境id
這裡應該是最近vercel的預設域名被禁的緣故,vercel。app之類的域名國內均不能訪問,所以在部署環境id時需要新增自己的域名進行部署,類似xx。de7v。com。
關於管理員的評論管理
最開始是使用代理才可以進行配置的,之前都失敗了,這一步如果沒有預設的密碼賬號輸入的話,建議開代理。
四、站點部署
1。COS+CDN部署
溫馨提示,這部分部署需要國內備案域名,如果沒有備案域名,請使用其他兩種方式部署。
首先先執行vuepress專案,進入專案路徑,終端輸入以下命令進行構建專案
npm run build
複製
生成靜態檔案成功之後可以在dist資料夾找到打包好的靜態檔案
先建立一個儲存桶
上傳檔案
直接將檔案複製一下拖拽到cos的以下介面,注意是dist裡面的檔案,不要傳dist整個資料夾,反正最後是儲存桶中有如下的內容,即dist裡面的檔案。
開啟靜態網站設定
此時還訪問不了,如果想直接訪問的話,許可權管理改成公共讀就可以訪問了,使用訪問節點的url即可,不過我們要介紹使用cdn進行訪問,更快。
cdn配置訪問
利用cdn進行私有讀寫,cdn提供給外部訪問,配置相關可以檢視這篇部落格裡面的配置,幾乎是一樣的,不多贅述。CDN+COS搭建圖床超詳細步驟,最後記得開啟https訪問。
至此我們已經完成了cos+cdn部署靜態網站。下面是部署成功的站點,訪問速度還可以。
2。vercel部署
vercel部署可以說是最簡單的部署,還帶自動化部署的功能,強烈推薦,目前主站是部署在vercel上的。
進入主介面,選擇新增新專案:
Add New
,選擇Project
之後就是選擇匯入github中的專案,私有倉庫也可以,gitpage中這個功能貌似收費,只能public。
配置執行引數,這部分是當初最坑的那個,當時不知道輸出填啥,一直構建失敗
先選擇vue。js構建
接下來就是build和Output settings,按照以下設定即可
其中output directory是很坑,之前不知道這個是輸出檔案,一直部署dev模式的網站,速度感人。
點選deploy即部署的意思
接下來就是稍微有點長的構建時間,大概10分鐘吧,主要是Vdoing作者的文章比較多,構建需要花一定時間。
部署完畢是這樣的,不過目前有個小尷尬的事情,自動提供的這幾個域名國內訪問不了,所以只能自己新增域名了。
在domains中新增自己的域名
先新增,然後根據提示進行新增dns解析
按照提示新增完解析即可
新增完會自動幫你新增ssl證書
大功告成
至此部署已經完成,之後只需要遠端提交自己的修改到github上面即可完成修改介面。
建立靜態網站
記得填入自己的域名並新增dns解析
將裡面的檔案刪去,最後一個。user。ini沒刪除問題不大,最主要是為了防止衝突
上傳完解壓一下就行
將解壓後的檔案複製到網站最開始的目錄下,並刪去原來的dist和dist。rar檔案
最後申請一下免費的證書和開啟強制https就結束了(宣告,沒有hhh。com域名,只是隨便輸一個)
瀏覽器鍵入自己的域名就可以訪問了,我的寶塔部署的站點IT七劍客,挺快的,比之前dev模式好多了
五、常用命令
安裝node依賴
自動安裝缺少的依賴
npm install
專案除錯
在測試功能時使用,該模式下,所有改動均可以快速看到效果,無需重新構建
npm run dev
專案打包
用於生成環境的打包,專案成功之後可以打包,然後部署到各個地方
npm run build
六、寫在最後
這次網站的部署大概經歷了前前後後一個月,都是凌晨肝一會,書讀的少,做事就非常費勁。希望大家能夠透過我的這篇文章少走彎路,那這篇文章就是有價值的,有問題評論區留言。