怎麼樣零程式碼零成本搭建個人網站?

xiezhr發表於2024-04-22

先申明

為了避免有標題黨的嫌疑,這裡先做申明。

標題中說的零程式碼指的是藉助VuePress 透過簡單配置,幫助我們生成靜態網站。

零成本指的是藉助GitHub Pages 或者Gitee Pages 部署VuePress生成的靜態網站。讓網際網路上的小夥伴訪問到我們的個人網站。

這些都不需要我們寫一行程式碼,不需要花一分錢。

當然了,如果你追求網站訪問速度,定製個人域名,這些是需要money的

如果你還不知道VuePressGitHub PagesGitee Pages 是個啥東東,這都沒關係,文章後面會慢慢解釋

一、別人家的網站

① 程式設計師魚皮的個人網站

 程式設計師魚皮

② 小林coding的個人網站

小林coding的個人網站

③JavaGuide的個人網站

JavaGuide的個人網站

還有不少大佬的個人網站,這裡就不一一列舉了。看著這些大佬的網站是不是似曾相識呢,沒錯,雖然他們的網站樣式有點不一樣,但大的框架都是一樣的。

我們再來看看Vue官網,一比較是不是發現了什麼?

他們長得很像,這就對了,因為他們都是透過VuePress 構建出來的。

至於VuePress是啥,我們下一小節慢慢來說

vue官網

二、VuePress 是什麼?

我們來看看官網https://vuepress.vuejs.org/zh/的介紹吧

vuepress官網

翻譯成人話,就是我們可以像數1,2,3一樣容易的透過VuePress 快速構建靜態網站,基本上就是有手就會

三、怎麼入門?

小編自己曾經也透過Hexo 搭建過個人部落格(www.xiezhrspace.cn)。

Hexo 也是一個用得比較多的開源靜態部落格。也可以零程式碼,零成本搭建。

如果小夥伴需要,再後面的文章中可以說一說。

不管再好看網站,亦或者小姐姐,時間一長了也會有些審美疲勞。於是乎,我們就會考慮有沒有什麼其他的靜態網站可以快速上手呢,VuePress就來了

說了這麼多,怎麼才能親自搭建出一個自己專屬的個人網站呢。

本來想著自己先跟著官網文件搭建了看看,然後給大家來個入門教程,但有些介紹還是有點生澀,不太容易上手。

於是乎,便找啊找,皇天不負有心人,發現了這麼一個寶藏博主寫的文章。

看完了他的部落格,只要有手,基本上就能搭建出一個像模像樣的個人網站了

博主已經把 33 篇VuePress 部落格搭建系列文章同步到了GitHubhttps://github.com/mqyqingfeng/Blog

33篇部落格搭建教程

目前已經獲得了30.4k Stars

30.4k Stars

從文章標題,我們就可以看到,博主從VuePress 搭建部落格->配置域名->開啟HTTPS->開啟壓縮->如何透過markdown寫部落格->各種實用外掛安裝

->新增評論功能->新增SEO 等功能

到這兒,可能有的小夥伴訪問GitHub可能有些吃力。

別擔心,細心的小編已經幫你們找到了其他平臺文章訪問地址 https://blog.csdn.net/weixin_55475226/article/details/123828699

四、其他

如果你覺得看文章還不夠,也可以在B站搜尋VuePress 構建個人網站的教程

當然了,如果你嫌閱讀上面的文章太慢,太麻煩。還可以透過程式設計師魚皮搭建好的模板來修改

開源地址:https://github.com/liyupi/codefather/tree/template

目前也是有5.1k 的星星了

vuepress模板

本期內容到這兒就結束了,希望以上內容對你搭建自己網站有所幫助

我們下期再見ヾ(•ω•`)o (●'◡'●)

相關文章