目錄

• • 引子
  • 正文
  • 前提條件
  • **一、首先下載并安裝軟件Node.js**
  • • 歷史版本網(wǎng)址如下：https://nodejs.org/zh-cn/download/releases/
    • 這里小編推薦大家安裝12.12左右的版本,
  • 二、接下來我們安裝另一個必備軟件：git
  • **三、安裝hexo**
  • **四、部署個人博客（建站）**
  • **五、對服務(wù)器的防火墻進(jìn)行相關(guān)配置**
  • **六、對云服務(wù)器控制臺進(jìn)行相應(yīng)設(shè)置**
  • • 我這兒是偷懶做法，所有一次性全部打開了
    • 我們也可以只打開一個端口用于外部訪問，步驟如下：
  • 七、Typora

引子

大家好，我是堅果。如果你媽迷惘。微信搜“堅果前端”公眾號，看看碼農(nóng)的軌跡

因為學(xué)習(xí)IT技術(shù)還是想應(yīng)用到學(xué)習(xí)、工作、生活中，讓它們更美好，就應(yīng)該授人以漁，畢竟自己動手了才有收獲

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

通過這些記錄就是告訴大家，不論學(xué)歷咋樣，不論專業(yè)是不是計算機(jī)，只要有一個愛鉆研的心，不懼困難，你都可以搭建屬于自己的一個簡單博客，

正文

今天的這篇教程是基于windows服務(wù)器進(jìn)行的

由于幫助的是一位非計算機(jī)專業(yè)的學(xué)生，所以覺得windows會更適用

先來看一下成功后的截圖

前提條件

• 購買服務(wù)器

• Node.js

• Git

  當(dāng)然如何安裝git和Npm我也會在本教程指出。

在搭建個人博客之前默認(rèn)大家已經(jīng)購買并成功登錄了服務(wù)器（搭建個人博客的所有操作中，除對云服務(wù)器控制臺的相關(guān)設(shè)置是在我們本地電腦上操作外，其余均在服務(wù)器上進(jìn)行），

關(guān)于如何遠(yuǎn)程連接自己購買的服務(wù)器，大家可觀看小編往期發(fā)布的教程進(jìn)行對應(yīng)操作

小編所使用的是windows操作系統(tǒng)的阿里云服務(wù)器，詳細(xì)參數(shù)如下圖所示，供大家參考

搭建博客的前提：安裝Node.js和git兩個軟件

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

歷史版本網(wǎng)址如下：https://nodejs.org/zh-cn/download/releases/

復(fù)制到瀏覽器打開即可

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

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

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

下圖所示，由于頁面太多，我們先點(diǎn)擊第4頁，以瀏覽后面的頁面，找到12.12左右的版本

如下圖所示，點(diǎn)擊至第7頁，理由同上

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BnHUujN5-1636330100441)(C:/Users/Luckly/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg)]

如下圖所示，在點(diǎn)擊到第10頁時，我們可以看到有12.12左右的版本

此時我們選擇12.12.7版本下載，如圖所示點(diǎn)擊下載

跳轉(zhuǎn)至如下頁面后點(diǎn)擊圖上所指的鏈接進(jìn)行下載

下載中，等待安裝包下載完成后打開安裝

點(diǎn)擊“打開文件”進(jìn)行安裝

若彈出如下頁面，點(diǎn)擊“是”，允許應(yīng)用對設(shè)備進(jìn)行更改即可！

安裝界面如下圖所示，點(diǎn)擊Next

點(diǎn)擊勾選下圖所示方框，后繼續(xù)點(diǎn)擊“Next”

選擇默認(rèn)，點(diǎn)擊“Next”兩次后顯示界面如下：

按下圖中所示，勾選方框后點(diǎn)擊“Next”。

點(diǎn)擊下圖中箭頭所指的“Install”按鈕進(jìn)行安裝

等待安裝完成

點(diǎn)擊Finish完成安裝

安裝完成后出現(xiàn)如下彈窗，點(diǎn)擊右上角叉號關(guān)閉即可！

按住鍵盤上的Win+R鍵，輸入命令“cmd”后回車確定，

緊接著在打開的命令行中輸入命令“node -v”后回車確定，以檢查Node.js是否正確安裝

已安裝的軟件版本會如下圖顯示出來，同之前下載的軟件版本一致，則證明安裝正確

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

網(wǎng)址如下：https://git-scm.com/ 復(fù)制到瀏覽器打開即可

點(diǎn)擊圖示按鈕下載git安裝包

等待下載完成……

點(diǎn)擊“打開文件”運(yùn)行安裝

若彈出如下頁面，點(diǎn)擊“是”，允許應(yīng)用對設(shè)備進(jìn)行更改即可！

安裝界面如下，一直點(diǎn)擊Next,直至安裝完成，所有勾選保持默認(rèn)即可!

點(diǎn)擊Install進(jìn)行安裝

等待安裝完成

下圖中的方框保持默認(rèn)或不勾選均可，點(diǎn)擊“Finish”按鈕，完成安裝

至此，git這一軟件我們也安裝完成了！

此外我們還需要安裝用來部署博客的軟件，有以下幾種可供大家選擇，gitbook 、hugo、 hexo 、docifsy。這里小編推薦大家安裝hexo這一軟件、

當(dāng)然需要其他教程的，大家也可以

三、安裝hexo

官方地址：

https://hexo.bootcss.com/

按住鍵盤上的Win+R鍵，輸入命令“cmd”后回車確定，

緊接著在打開的命令行中輸入命令“npm install hexo-cli -g”后回車確定

這是全局安裝的命令

npm install hexo-cli -g

運(yùn)行中，等待安裝完成

待運(yùn)行完成后輸入“hexo version”命令，回車運(yùn)行

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

至此，搭建博客所需要的軟件我們已安裝完畢，接下來我們就可以用前面安裝好的軟件來部署我們的個人博客了！

四、部署個人博客（建站）

安裝 Hexo 完成后，請執(zhí)行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。

hexo init jianguocd jianguonpm install

新建完成后，指定文件夾的目錄如下：

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

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

直接啟動服務(wù)器。默認(rèn)情況下，訪問網(wǎng)址為： http://localhost:4000/。

hexo server

五、對服務(wù)器的防火墻進(jìn)行相關(guān)配置

如下圖所示，在服務(wù)器桌面左下角搜索“防火墻和網(wǎng)絡(luò)保護(hù)”，查找到后點(diǎn)擊進(jìn)入設(shè)置

將頁面拉至最低端，點(diǎn)擊進(jìn)入“高級設(shè)置”選項

先點(diǎn)擊“入站規(guī)則”，然后點(diǎn)擊進(jìn)入“新建規(guī)則”選項

跳轉(zhuǎn)至如下頁面，在規(guī)則類型一欄下，選中端口后點(diǎn)擊“下一步”

我們在下圖所指示的框內(nèi)輸入我們想要使用的端口，小編這里輸入4000作為示范，然后點(diǎn)擊“下一步”

跳轉(zhuǎn)至如下頁面，我們選中“允許連接”后繼續(xù)“下一步”

繼續(xù)“下一步”

在下圖所指出的框內(nèi)輸入名稱和對網(wǎng)站的描述（網(wǎng)站的描述也可不填）后點(diǎn)擊“完成”

如下圖所示，新的規(guī)則已經(jīng)創(chuàng)建成功

如下圖所示，我們點(diǎn)擊“刷新”

至此我們就完成了對防火墻的相關(guān)設(shè)置，接下來我們對阿里云服務(wù)器控制臺進(jìn)行相應(yīng)的設(shè)置

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

六、對云服務(wù)器控制臺進(jìn)行相應(yīng)設(shè)置

接下來對云服務(wù)器控制臺的相關(guān)操作我們需要切回本地電腦并登錄阿里云服務(wù)器控制臺來進(jìn)行

登錄阿里云進(jìn)入到云服務(wù)器控制臺后，如下圖所示，點(diǎn)擊進(jìn)入“實(shí)例”一欄后點(diǎn)擊我們云服務(wù)器的實(shí)例ID進(jìn)入實(shí)例

切換至如下頁面，點(diǎn)擊“配置安全組規(guī)則”

切換至如下頁面，點(diǎn)擊“配置規(guī)則”

切換至如下頁面，如圖所示依次點(diǎn)擊進(jìn)行

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

跳轉(zhuǎn)至如下界面，將圖中所標(biāo)示的地方同下圖配置一致，點(diǎn)擊“確定”，端口配置完成

上述方式是打開了服務(wù)器的所有端口，比較便利，如果大家有安全方面的考慮，

我們也可以只打開一個端口用于外部訪問，步驟如下：

按照下圖所示依次點(diǎn)擊進(jìn)行操作

按照下圖所示依次進(jìn)行配置，因為之前在第五步（對服務(wù)器的防火墻進(jìn)行相關(guān)配置）中，我們設(shè)置的端口是4000，所以在“端口范圍”à“目的”一欄這里我們也需要對應(yīng)設(shè)置為4000，其余參數(shù)同下圖保持一致，點(diǎn)擊 “保存”即可

如下圖所示，可以看到我們規(guī)則已經(jīng)創(chuàng)建完成

七、運(yùn)行之前部署的網(wǎng)站

切換到服務(wù)器上，回到之前部署網(wǎng)站的文件夾，右鍵選擇“Git Bash Here”選項，打開git進(jìn)行運(yùn)行，輸入“hexo s”命令回車運(yùn)行

如下圖顯示，所建的網(wǎng)站已經(jīng)在服務(wù)器上運(yùn)行了起來，此刻我們便可以通過我們所建網(wǎng)站的IP地址在瀏覽器上進(jìn)行訪問了，網(wǎng)址形如：http://8.142.39.12:4000 (http://服務(wù)器的ip地址：端口)

訪問效果如下：

至此，我們的個人博客就搭建成功了

要編寫博客，我們還需要一款編輯軟件，

七、Typora

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

網(wǎng)址為https://typora.io/#windows （Typora — a markdown editor, markdown reader.）復(fù)制至瀏覽器打開下載即可，

此處不再贅述。

這個問題就記錄到這兒，

這是一個幫助粉絲解決問題的過程，也是程序員在編程之路上的點(diǎn)滴記錄，如果那個粉絲想定制更高端的博客，我也會提供相應(yīng)的教程。

總結(jié)

以上是生活随笔為你收集整理的从0-1教你利用服务器做属于自己的个人博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。