從0到1搭建和部署個人部落格

2021-09-24 06:41:41 字數 2355 閱讀 4180

此教程會教你從0到1搭建乙個完整的部落格,包括前端展示頁、後台管理系統、後端介面及介面文件、服務端部署整個完整流程。這個部落格十分簡單,功能遠少於我們所用的部落格。但是學會了整個流程,再在此基礎上擴充套件就會很容易了。

所以此教程適合新手小白,高手請繞道,浪費你的時間。

概述其實整個部落格搭建去年就完成了,專案都跑在我的伺服器上,但是我的個人文章還沒有放在上面,等功能完善了再上吧。當時準備寫這篇文章,只不過當時公司專案忙,給忘了。現在想起來就把這篇文章完成了。

再次說明,本人是前端碼農,對於服務端部署,後端介面什麼的基本不懂,所有的東西都是現學現用,跟專業的後端和運維差太遠,只是讓專案能正常跑起來。關於後端以及部署的安全性和穩定性方面都沒有涉及,所以專案僅供參考。

前端專案

當時做前端專案時準備用vue-cli來搭建的,但是了解到處都說服務端渲染,而我主要使用vue較多。所以為了嘗試一下vue ssr,就有了現在這個專案。查了一下vue ssr,主要有官方版本和nuxt兩個用的比較多些,看了一下發現nuxt節省了各種配置,上手更快,所以就用nuxt踩了一下坑。

當時剛推出nuxt1.0版本,官方文件也還比較詳細。搭建完成後丟到伺服器執行,發現頁面開啟速度確實比較快,基本是秒開。由於nuxt1.0當時要求node是8.0以上版本,低於8.0會報錯,所以我用nvm來管理node版本,注意clone我的專案後安裝依賴一定要在node 8.0以上版本下安裝。

後台管理專案

前端後台管理專案是基於vue-cli完成的,關於vue-cli的使用網上的教程非常多,不做敘述。ajax請求用的axios庫, ui使用的element-ui。主要頁面有

該專案搭建時有點早,clone我的專案後安裝依賴後專案能正常跑起來,當時會有一些warning,因為有些npm包被廢棄了,推薦新的包什麼的。

後端介面以及介面文件

後端專案採用的是express和mongolass,後端node專案主要參考cnode社群乙個大佬的一步一步學習node的專案。後端專案的介面主要對應前端管理頁面那些介面。

介面文件是用的 swagger來編寫的,使用swagger-editor來編寫配置檔案,將其轉換為json,將配置檔案放入到swagger-ui檔案中,放到伺服器部署就行了。

執行本專案除了clone該項目的**安裝依賴外,還要在本地電腦安裝mongodb,並且成功啟動mongodb服務。本專案才能正常啟動。

介面文件編寫

本地執行swagger-editor

1、啟動swagger-editor:

在本專案下執行http-server swagger-editor -p8989。在瀏覽器中開啟localhost:8989即可開啟swagger-editor。

注意:要全域性安裝http-server。預設埠號為8080。

在editor中編輯**,左邊是編輯區,右邊是視覺效果。編輯好後匯出json檔案。關於文件的編寫這裡不展開講解,可以參考這篇文章傳送門,文章寫得很詳細。

3、部署介面文件:

複製**

用node啟動index.js,如果埠號為3000,在瀏覽器中開啟 http://localhost:3000/swagger即可檢視介面文件。

介面文件連線伺服器,實時獲取介面資料:

3、本機本地服務簡寫:localhost:3000

伺服器部署

再就是伺服器部署,我買的伺服器是阿里雲伺服器,裝的系統是centos7.3。為了專案正常執行,在伺服器上裝了,ftp、git、node、nginx、mongodb。當時安裝部署遇到不少問題,關於每乙個安裝部署我都有詳細教程,有興趣的可以去看看。

node專案部署——阿里雲centos部署ftp

node專案部署——阿里雲cento部署node和nginx

node專案部署——阿里雲centos部署git服務

node專案部署——阿里雲centos部署mongodb

重點說明

本專案想正常跑起來步驟:

1、clone 我部落格專案前端、後台管理、後端專案到本地

2、分別安裝各自依賴。

3、本地電腦安裝mongodb,最好註冊為服務。(推薦robomongo視覺化管理mongodb)(node安裝就不說了)

4、先啟動mongodb服務,再啟動後端專案。(此時在瀏覽器可以開啟介面文件了)

5、依次啟動後台管理專案、前端專案。

6、專案都成功啟動了,但是沒有資料,可以通過後台管理系統新增文章和分類。(也可以手動通過robomongo新增文章到mongodb)

7、此時應該能正常看到文章了。

部落格前端專案

部落格後台管理頁面

部落格介面以及介面文件

線上介面文件

線上前端頁面

差不多就這些了,撤了。。。。

從0到1搭建React Native開發環境

rn開發之前要配置一系列的開發環境,這裡剛配置好,這裡做乙個總結記錄,希望對大家有幫助。1.nvm是什麼呢?全稱node version manage。看到全稱應該知道了吧,其實nvm就是用來管理nodejs的乙個管理器,他可以安裝多個版本的nodejs和npm版本。nodejs是什麼?nodejs...

從0到1搭建自助分析平台

自助分析平台是構建在大資料平台之上的,依託於大資料平台的資料研發能力,通過統一的資料服務,實現對資料查詢 分析的統一管理,為企業業務分析提供高效的資料決策支援,同時也避免資料工程師陷入繁雜的提數需求中。自助分析平台是有計算機基礎的業務人員能夠快速上手的前端產品,既要有大資料的處理效能,有需要有簡單好...

FineBI 從搭建到部署

finebi,新一代自助大資料分析的bi工具 finebi的各種安裝 我是在linux下安裝的finebi,簡單來說就是 進入該檔案目錄,輸入命令 chmod 777 linux unix finebi4 1 cn.sh 遇到的問題 開啟本地finereport,切換工作目錄,在上面開發新的頁面 當...