天天看點

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

大家好,我是堅果,公衆号”堅果前端“

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

引子

因為學習IT技術還是想應用到學習、工作、生活中,讓它們更美好,就應該授人以漁,畢竟自己動手了才有收獲

先給大家分享一下我與我的粉絲的部分聊天記錄

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格
#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格
#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

通過這些記錄就是告訴大家,不論學曆咋樣,不論專業是不是計算機,隻要有一個愛鑽研的心,不懼困難,你都可以搭建屬于自己的一個簡單部落格,

在之前我已經有三篇文章對伺服器進行了講解。

​​伺服器的作用有哪些,此文帶你來了解​​

​​遠端連接配接Windows伺服器​​

​​雲伺服器如何重置系統​​

正文

今天的這篇教程是基于windows伺服器進行的

由于幫助的是一位非計算機專業的學生,是以覺得windows會更适用

先來看一下成功後的截圖

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

前提條件

  • 購買伺服器
  • Node.js
  • Git

    當然如何安裝git和Npm我也會在本教程指出。

在搭建個人部落格之前預設大家已經購買并成功登入了伺服器(搭建個人部落格的所有操作中,除對雲伺服器控制台的相關設定是在我們本地電腦上操作外,其餘均在伺服器上進行),

關于如何遠端連接配接自己購買的伺服器,大家可觀看小編往期釋出的教程進行對應操作

小編所使用的是windows作業系統的阿裡雲伺服器,詳細參數如下圖所示,供大家參考

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

搭建部落格的前提:安裝Node.js和git兩個軟體

一、首先下載下傳并安裝軟體Node.js

曆史版本網址如下:​​https://nodejs.org/zh-cn/download/releases/​​

複制到浏覽器打開即可

這裡小編推薦大家安裝12.12左右的版本,

主要是太新的版本,目前hugo,gitbook。hexo的支援都不太好

截至寫這篇文檔前,最新的版本為16.13.0

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

下圖所示,由于頁面太多,我們先點選第4頁,以浏覽後面的頁面,找到12.12左右的版本

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

如下圖所示,點選至第7頁,理由同上

如下圖所示,在點選到第10頁時,我們可以看到有12.12左右的版本

此時我們選擇12.12.7版本下載下傳,如圖所示點選下載下傳

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

跳轉至如下頁面後點選圖上所指的連結進行下載下傳

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

下載下傳中,等待安裝包下載下傳完成後打開安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選“打開檔案”進行安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

若彈出如下頁面,點選“是”,允許應用對裝置進行更改即可!

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

安裝界面如下圖所示,點選Next

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選勾選下圖所示方框,後繼續點選“Next”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

選擇預設,點選“Next”兩次後顯示界面如下:

按下圖中所示,勾選方框後點選“Next”。

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選下圖中箭頭所指的“Install”按鈕進行安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

等待安裝完成

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選Finish完成安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

安裝完成後出現如下彈窗,點選右上角叉号關閉即可!

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

按住鍵盤上的Win+R鍵,輸入指令“cmd”後回車确定,

緊接着在打開的指令行中輸入指令“node -v”後回車确定,以檢查Node.js是否正确安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

已安裝的軟體版本會如下圖顯示出來,同之前下載下傳的軟體版本一緻,則證明安裝正确

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

二、接下來我們安裝另一個必備軟體:git

網址如下:​​https://git-scm.com/​​ 複制到浏覽器打開即可

點選圖示按鈕下載下傳git安裝包

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

等待下載下傳完成……

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選“打開檔案”運作安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格
#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

安裝界面如下,一直點選Next,直至安裝完成,所有勾選保持預設即可!

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

點選Install進行安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格
#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

下圖中的方框保持預設或不勾選均可,點選“Finish”按鈕,完成安裝

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

至此,git這一軟體我們也安裝完成了!

此外我們還需要安裝用來部署部落格的軟體,有以下幾種可供大家選擇,gitbook 、hugo、 hexo 、docifsy。這裡小編推薦大家安裝hexo這一軟體、

當然需要其他教程的,大家也可以

三、安裝hexo

官方位址:

​​https://hexo.bootcss.com/​​

緊接着在打開的指令行中輸入指令“npm install hexo-cli -g”後回車确定

這是全局安裝的指令

npm install hexo-cli -g      
#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

運作中,等待安裝完成

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

待運作完成後輸入“hexo version”指令,回車運作

顯示如下圖所示即為安裝正确

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

至此,搭建部落格所需要的軟體我們已安裝完畢,接下來我們就可以用前面安裝好的軟體來部署我們的個人部落格了!

四、部署個人部落格(建站)

安裝 Hexo 完成後,請執行下列指令,Hexo 将會在指定檔案夾中建立所需要的檔案。

hexo init jianguo      
cd jianguo      
npm install      

建立完成後,指定檔案夾的目錄如下:

.      
├── _config.yml      
├── package.json      
├── scaffolds      
├── source      
|   ├── _drafts      
|   └── _posts      
└── themes      

在這兒,不講解過多的hexo指令以及它的配置

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

直接啟動伺服器。預設情況下,通路網址為: ​

​http://localhost:4000/​

​。

hexo server      

五、對伺服器的防火牆進行相關配置

如下圖所示,在伺服器桌面左下角搜尋“防火牆和網絡保護”,查找到後點選進入設定

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

将頁面拉至最低端,點選進入“進階設定”選項

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

先點選“入站規則”,然後點選進入“建立規則”選項

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

跳轉至如下頁面,在規則類型一欄下,選中端口後點選“下一步”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

我們在下圖所訓示的框内輸入我們想要使用的端口,小編這裡輸入4000作為示範,然後點選“下一步”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

跳轉至如下頁面,我們選中“允許連接配接”後繼續“下一步”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

繼續“下一步”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

在下圖所指出的框内輸入名稱和對網站的描述(網站的描述也可不填)後點選“完成”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

如下圖所示,新的規則已經建立成功

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

如下圖所示,我們點選“重新整理”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

至此我們就完成了對防火牆的相關設定,接下來我們對阿裡雲伺服器控制台進行相應的設定

如果想偷懶,可以一次性打開所有端口

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

六、對雲伺服器控制台進行相應設定

接下來對雲伺服器控制台的相關操作我們需要切回本地電腦并登入阿裡雲伺服器控制台來進行

登入阿裡雲進入到雲伺服器控制台後,如下圖所示,點選進入“執行個體”一欄後點選我們雲伺服器的執行個體ID進入執行個體

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

切換至如下頁面,點選“配置安全組規則”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

切換至如下頁面,點選“配置規則”

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

切換至如下頁面,如圖所示依次點選進行

我這兒是偷懶做法,所有一次性全部打開了

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

跳轉至如下界面,将圖中所标示的地方同下圖配置一緻,點選“确定”,端口配置完成

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

上述方式是打開了伺服器的所有端口,比較便利,如果大家有安全方面的考慮,

我們也可以隻打開一個端口用于外部通路,步驟如下:

按照下圖所示依次點選進行操作

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

按照下圖所示依次進行配置,因為之前在第五步(對伺服器的防火牆進行相關配置)中,我們設定的端口是4000,是以在“端口範圍”à“目的”一欄這裡我們也需要對應設定為4000,其餘參數同下圖保持一緻,點選 “儲存”即可

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

如下圖所示,可以看到我們規則已經建立完成

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

七、運作之前部署的網站

切換到伺服器上,回到之前部署網站的檔案夾,右鍵選擇“Git Bash Here”選項,打開git進行運作,輸入“hexo s”指令回車運作

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

如下圖顯示,所建的網站已經在伺服器上運作了起來,此刻我們便可以通過我們所建網站的IP位址在浏覽器上進行通路了,網址形如:​​http://8.142.39.12:4000​​ (http://伺服器的ip位址:端口)

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

通路效果如下:

#yyds幹貨盤點#從0-1教你利用伺服器做屬于自己的個人部落格

至此,我們的個人部落格就搭建成功了

要編寫部落格,我們還需要一款編輯軟體,

七、Typora

小編推薦使用Typora這一軟體,

網址為​​https://typora.io/#windows​​​ (​​Typora — a markdown editor, markdown reader.​​)複制至浏覽器打開下載下傳即可,

此處不再贅述。

這個問題就記錄到這兒,

這是一個幫助粉絲解決問題的過程,也是程式員在程式設計之路上的點滴記錄,如果那個粉絲想定制更高端的部落格,我也會提供相應的教程。

繼續閱讀