快速搭建個人博客——保姆級教程

序言

偶然間，看到知乎上高贊的一個問題：怎么證明下計算機專業學生的能力？問題下面呢，也是有眾多網友評論哈，我記得最清晰、也最現實的一條是：有什么能力的，為了裝個b罷了。

看到這個我就不得不站出來說一句了，證明能力的方式也不是只有建網站這一種方式是吧，那畢竟還是“術業有專攻”呢，對吧。也不知道為什么鍛煉下自己的實操能力，拓寬下學識就成了鍵盤俠下的裝b，咱也噴不過，求饒求饒啊。

好了，回歸正題，我建立個人網站呢，初衷其實非常簡單，說不定你也想過，只是沒去做而已。我是想：現在的網絡中有好多的寫作平臺，比如我現在在用的C站，它已經非常成熟，社區討論、問題發布、Blink動態等等，一應俱全。我在學完相關知識后，為什么不能自己寫一個呢？【也許更多的是我愛折騰罷了，哈哈】

最開始接觸是在C站VIP功能中“板塊自定義”中，輸入幾行代碼（當時因為還沒有接觸到CSS、Web前端這些，是從網上白嫖來的），就能有漂亮的界面，更是激起了我深入學習的興趣。

什么是博客，博客是大家分享、交流的一個平臺，我們可以從中吸取別人的經驗，提升自己。對于看博客的人來說是這樣，對于寫博客的博主呢，更是對自己所學的總結，能理清自己的思路，便于日后復盤，養成良好的習慣。技術博客，能記錄我們遇到的問題，更好的Bug處理方案，在我們日后開發的過程中遇到同樣的問題，記憶會更加深刻。

正是我沒有發現一套完整的，能幫助新手開發一個網站的資源，所以決定開設此專欄，分享我從初學到最后實現的一些經驗。所以，如果你也想要擁有一個屬于自己的網站，可以跟著我，看完我這個專欄。我保證你能從0到1實現，過程中如果遇到問題可以私信或留言。下面，讓我們一起開始吧。

準備

思考下，我們查資料用的最多的是什么？有些朋友就會說了：那還用問，必須是“在B站上大學“啦，亦或是搜索引擎了。沒錯，我想這正是我們大多數人學習新東西、不斷探索向前時使用最多的工具了。那，我們搜些什么呢？比如，你可以這樣：

或許，你還可以這樣：

的確能搜到很多的視頻、文章。但是在這部分，我以我是初學者的角度來描述下我的心路歷程：因為這東西目前在我的腦子里就是一個初步的想法，我還不知道怎么去實現它。就像是一個人在山里迷路了，我只知道要出去，可我找不到路啊

這一趴，我們就來聊一些建站，我應該準備什么。網上大多數教程啊，都是一個大長篇，鼠標滑好幾下都不帶滑完的那種。會給剛入門的朋友一種：”哇，好難啊，這么多東西啊“的感覺，所以這里我對各部分的內容進行了分類，你只要按照順序，一步步往下走就好啦。

本地網站

這里為什么要強調是”本地“呢，一開始啊，我也是看的教程，跟著別人的思路來走，像什么先買個域名，買臺服務器啥的，我都踩過坑。這對剛入門的朋友在購買或者選擇上會造成困難，我們莫不如換一種思考方式，現在我自己的電腦上建立一個網站，然后在”發送“出去，讓別人都能看到。你看，這不就很明確了嗎？

在自己的電腦上實現網站，必須的兩個東西瀏覽器、開發工具，前者大家肯定是都有了，不做贅述（不然你拿什么看到的我這篇文章呢，嘿嘿），我們重點介紹后者。

開發工具推薦

WebStorm 是JetBrains公司旗下一款JavaScript 開發工具。已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

廢話少說，來這里下載 傳送門

這兒呢，有個小問題，這玩意是收費的，如果你是一名大學生，可以通過學生認證免費申請到教育賬號，如果……（不多說奧，自己去問度娘，能找到方法），直接無腦下一步安裝就行，不要慌。

Visual Studio Code（簡稱“VS Code” ）是Microsoft在2015年4月30日Build開發者大會上正式宣布一個運行于 Mac OS X、Windows和 Linux 之上的，針對于編寫現代Web和云應用的跨平臺源代碼編輯器，可在桌面上運行，并且可用于Windows，macOS和Linux。它具有對JavaScript，TypeScript和Node.js的內置支持，并具有豐富的其他語言（例如C++，C＃，Java，Python，PHP，Go）和運行時（例如.NET和Unity）擴展的生態系統。

傳送門

這兩個工具具體來說就是：前者是全家桶（啥都有，不用你管，直接用就行），后者是一個空殼公司，需要各種員工（插件）去實現一些功能。所以如果你懶得去配置了，就直接下第一個，第二個可能在寫博客Markdown語法上更方便一些，這個我后面會說到。此處如果你是新手，我建議你下WebStorm，后文的一些配置上，會更加方便。

框架引入

“框架”這是啥，懵了吧，嘿嘿。遇到事情不要慌，且聽杰森娓娓道來。這里咱們看下某度詞條的解釋：

框架（framework）是一個框子——指其約束性，也是一個架子——指其支撐性。是一個基本概念上的結構，用于去解決或者處理復雜的問題。

框架這個廣泛的定義使用的十分流行，尤其在軟件概念。框架也能用于機械結構。

這東西相當于什么呢，比如咱們建房子，你說你怎么建？咱不能沒有圖紙、沒有工人就開始吧，這不是“天方夜譚”嘛。首先肯定是需要設計師根據用戶需求設計好這個圖紙，然后工人再依據這張圖紙開始建房子對吧（這里省略了很多，行業大咖求放過，舉個栗子哈）。

我們搭建網站也一樣如此，你真的以為那么多的網站，都是程序猿沒日沒夜一行一行從零開始寫出來的嗎？emmm，其實最開始對于這個問題，我的回答是：嗯，是的，那肯定得呀。直到我去實習的時候，才發現企業里的一些東西也并不是全部從零開始開發的。（開源大法好，哈哈哈）難道你想成為這樣？

一個產品、項目、網站……只要是有前人做過的東西，我們都可以從中汲取經驗啊，學習好的編碼，開源的，別人已經實現的我們何必浪費時間再去搞一遍呢？尤其是下文要將的WordPress，簡直就是“無腦式操作”，你可能都不知道自己做了什么，但一個屬于你的網站就那么出來了。

博客框架通俗的說就是別人寫好的一套源碼，你拿過來會用就行，改一改自己的配置啊，配上想要的主題啊，這種就足夠了（大佬請繞路）。所以下面我會給大家分享一些在搭建我的個人網站時，了解到的一些框架，并簡單分析，供大家選擇。

還是老話，此專欄受眾對象是剛接觸的朋友，所以一些復雜，不需要知道的參數我并不會提及，只涉及到最關鍵的部分，方便大家快速找到適合自己的那一個。

提前聲明，杰森用的框架是 ==Hexo== ，各位可以和我選擇不同，但配置不盡相同，同理可得的那種

可選項

Hexo（強烈推薦）

Hexo 是一個快速、簡單且功能強大的博客框架。你用Markdown（或其他標記語言）寫帖子，Hexo 會在幾秒鐘內生成帶有漂亮主題的靜態文件。>點我直達<

Hexo特性：

運行效果極佳，成本低

多平臺：本地、云、PC、移動端通吃

支持多種CDN服務（開啟可以提高網頁的打卡速度）

各大搜索引擎對網站的收錄及權重有較大優勢（用戶搜到你發布的內容可能性更大）

如果你喜歡配置，對代碼操作后完成一定的配置，這款符合你胃口。放上配置截圖供參考：

WordPress

WordPress是基于PHP和MySQL的免費開源內容管理系統（CMS）。 是全球使用最廣泛的CMS軟件，從最開始一款簡單的博客系統，發展成為現在具有數千款插件，小工具和主題功能完整的CMS系統。>點我直達<

WordPress特性：

商用范圍廣

方便后續備份和轉移，有自帶的工具支持

擴展性強大（此處可聯想Google的插件商城）

對自定義用戶非常友好（絕對可以打造出你想要的）

如果你并不像看那些代碼，可以用這款，WordPress自帶后端管理，選擇自己想要的主題，然后拖拽所需控件（比如你想實現顯示時間這個功能，會有一個像手機端桌面小組件一樣的東西，拖拽到想顯示的位置即可實現）。另外最重要的是，使用它你需要先搞一臺服務器

為了大家能更快速的找到合適的，我不會給大家很多的可選項，更不會告訴大家還有什么（不然你會覺得，我現在的可能不是最好的，我要嘗試更多的。倘若這樣的話，不知不覺間你就會浪費很多時間，莫不如跟著一個先搭建下來，等日后熟悉了，再更換其他的。）等到自己獨立上手時，也能有個清晰的思路，不至于在某一點上花太多時間。

環境配置

這一塊呢，不用過多的介紹，可以理解為我們建房子需要水泥、鏟子等工具和原料一樣，本地的環境就是我們用到的鏟子，是工具。而Hexo的博客框架就是水泥這樣的原材料，我們需要用工具才開始干活（不然你***用手干啊……

git 安裝

簡單描述下它用來做什么，Look Here：

Git 是一個開源的分布式版本控制系統，用于敏捷高效地處理任何或小或大的項目。是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。Git 與常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本庫的方式，不必服務器端軟件支持。

不必理會上面你從未聽過的詞匯，這么來。某度網盤用過吧，是不是有個自動備份，你選中本地的某個文件夾，當本地文件發生改變時，只要軟件在后臺運行，是不是云上也會和本地自動保持一致。過程就是這么個情況，但是git的操作目前你就可以相像成一個云，用一些命令你就可以把本地的代碼“發送/備份”到云上。

我并未深入展開講git的分布式特性，命令等內容，這里推薦入門的朋友可以>看這里<的教程，方便快速入門

既然要使用Git，那么我們首先就要安裝并配置Git的環境，點擊這里下載（Windows操作系統），點擊Download按鈕即可

安裝過程不再贅述，直接使用默認配置，一“Next(站)” 到底

下面我們配置環境變量信息（前段時間的博客中已經詳細解釋過，不了解的朋友可以點擊這里查看），打開 Path 變量后，添加本地環境安裝目錄【確認好文件到達 cmd 】

安裝完成后，你可能沒有看到桌面的快捷方式，不要著急。我們在Windows搜索框中搜索Git就可以看到這樣幾個圖標

可以直接點擊 Git Bash 或者在桌面任意位置右鍵，打開 Git Bash Here 就可以使用啦

node.js 安裝

>下載直達<

很多朋友糾結這兩個版本，看下這個解釋相信就知道需要哪個了，杰森用的是LTS版本

LTS代表“Long Term Support（長期支持）”，Current代表“當前的”

Current就代表最新發布的版本（每6個月一次的），它可能是奇數版本也可能是偶數版本

Hexo全配置

Hexo安裝

桌面右擊，打開git bash here輸入命令安裝（默認位置即可，方面后續配置，不建議修改）

npm install -g hexo-cli

這里我已經裝過了，可能顯示的和你的不一樣，執行完后關閉窗口就行，此時本地已經有了hexo的環境。怎么樣，是不是很簡單呢？

初始化

在你本地任意位置（但要記住路徑）方便起見建議直接在除C盤的任意盤符下的跟目錄新建，命名任意，比如我這里是在D盤新建的 hexo-jason-blog 文件夾，可以參考下

本來我想用自己已經搭好的本地環境給大家演示，但是為了能真實體現“新手”的操作環境，杰森決定重新建立，一步步重新操作，只為大家能走好每一步，直到成功

在該文件夾下打開 git bash here 輸入命令

hexo init

此時你可能會遇到這個錯誤，不要慌張，是從GitHub克隆時網絡原因，多試幾次就好

關于此類問題的解決方案請>參考這里<

成功效果：

根文件目錄下多了這些文件

簡單介紹下hexo的文件結構：

public 最終所見網頁的所有內容

node_modules 插件以及hexo所需node.js模塊

_config.yml 站點配置文件，設定一些公開信息等

package.json 應用程序信息，配置hexo運行所需js包

scaffolds 模板文件夾，新建文章，會默認包含對應模板內容

themes 存放主題文件，hexo根據主題生成靜態網頁（速度賊快）

source 用于存放用戶資源（除 posts 文件夾，其余命名方式為 “ + 文件名”的文件被忽略）

我們日常寫文的操作都在 source/_post下，既然我們已經有了建房子時“和泥”的工具——WebStorm，為什么不用呢？

在WebStorm中打開根目錄 hexo-jason-blog （直接將該文件拽到桌面WebStorm的快捷方式打開就行），打開終端并輸入命令

hexo s

點擊鏈接 http://localhost:4000（圖中黃色下劃線位置）進行本地預覽，默認是hexo內置的landscape 主題

光標停留在 Terminal 位置，組合鍵Ctrl+C停止本地預覽，這就是本地最簡單的一個網站啦

emmm，默認的頁面朋友們也預覽成功了，大概呢，就是這樣，嘿：

但總感覺，還是差了點什么東西。沒有一些博客、網站該有的東西，那怎么能讓它更像一個網站呢？

主題引入

這里我們介紹下主題和框架，我們現在使用的Hexo是一款快速、簡單的博客框架，主題就是開發者根據此框架開發的功能更加完備、頁面樣式、欄目更多的一種”配件“。就像你用的手機，換上手機殼，選手機殼時需要匹配自己手機的型號，不然也不配套啊是吧

再舉個“栗子”，像Android手機（IOS閉源，除非越獄），廠家生產時默認的桌面主題，在主題商店這個app里你能根據自己的喜好選擇更好看的圖標、背景、字體。就像是“換上新衣”，可以從這個角度理解我們下面要做的操作

主題選擇

提及主題，肯定就會有很多啦。還是那句話，大家根據自己的喜好選擇就好，這里是官方主題庫，我比較喜歡Butterfly這款主題，下面帶大家給自己的網站“換新衣”

Butterfly安裝

推薦理由

先給大家看下主題的頁面

應用Butterfly

Terminal 輸入命令

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

等待安裝完成，themes文件夾下顯示了butterfly主題的一些文件

安裝插件

安裝 pug 以及 stylus 的渲染器，如果沒有安裝，預覽界面是這樣的

控制臺輸入命令，回車等待安裝即可

npm install hexo-renderer-pug hexo-renderer-stylus --save

修改配置文件

網站根目錄下找到**_config.yml文件，修改主題為butterfly**（注意yml文件格式）

本地預覽

hexo clean //執行此命令后繼續下一條 hexo g //生成博客目錄 hexo s //本地預覽

效果圖

可能看上去還是那么的“簡陋”，額，這個問題呢，會涉及到后續的”主題美化“（其實就是加上了一些好看的圖片而已，也很簡單）。我的博客也沒有優化的很細節，非常粗糙，時間有限，后面再說吧，可以看下，留個”念想“，相信你做的會比我更好

我的博客

圖床

這是個ma玩意啊？？？不要慌，大家不是看咱們默認主題的網站一點兒都不好看么，那是因為沒圖片啊，你要是給它換上一套配圖，優化一下，是不是就好多了呢？那在網絡中我們引用圖片一種是本地上傳，代碼里放上路徑引用；另一種則是通過網址，顯然后者更方便（如果類比到后面要用到的服務器上，隨著圖片量日漸增多、存儲空間慢慢減少，每次發文都需要連同圖片一起上傳，那得占用多大的空間吶）

然而，如果我們自己有一個地方，能把本地圖片轉換成鏈接（人人通過這個鏈接都能訪問到你發布的照片）是不是就很棒了nie。Picgo和一些其他插件就能實現

前些時候更新過一片文章，使用GitHub和SM.MS。如果有不能類比操作的朋友，>看這里<由于GitHub畢竟是國外的，訪問速度上會有點兒慢，SM.MS倒是一個運行了很久的老牌子了，但它倆在訪問速度上都略慢

杰森強烈推薦國內的碼云（Gitee），配合Picgo使用。穩定、快速，還不容易丟失。（ps：此處就會有些朋友問了，我公開了我的倉庫，里面全放的是我的照片，會不會隱私存在隱私泄露什么的）對于這類問題，我只能說

誰天天閑的沒事去看你倉庫啊？？再者說，你能上傳到倉庫里XXX（自行想象）照片么？？所以說，放心用，不要想辣么多真的是

另外，友情提示：Gitee對免費版賬戶存儲容量最大為5G，倉庫滿了記得從軟件中改下路徑，使用后不要亂改自己Gitee賬戶的名稱（不是昵稱，英文那個名稱），不然就等404吧

Butterfly配置

配置GitHub Pages

GitHub Pages是一種由GitHub中的倉庫/項目直接創建的網頁。管理簡單，在本地編輯倉庫中的內容，上傳到GitHub上，GitHub Pages就能快速完成更新，重點是不花錢，不花錢，不花錢

新建倉庫，填寫內容如下，特別注意紅框位置

保證倉庫public，名稱填寫正確用戶名.github.io，系統自動變更為Pages

在倉庫設置中找到Pages

記住倉庫地址，我們會將本地的文件上傳到倉庫

如果你是在電腦上第一次使用git，請先配置SSH公鑰（一種安全協議，你可以理解為登陸某網站需要的驗證碼）

在WebStorm中鏈接到遠程，添加倉庫地址，這里不是發布網站需要的倉庫（非“用戶名”+github.io倉庫，新建一個，為了管理本地代碼）

因為這里都是基本的git命令，前面也提到過，不清楚的小伙伴可以看這個專欄里的資料，都是一些基礎操作，非常容易上手

修改網站部署設置

在網站本地根目錄下打開 git bash here 依次執行以下命令

hexo clean //執行此命令后繼續下一條 hexo g //生成博客目錄 hexo s //本地預覽 hexo d //部署項目

執行完畢后，所有人就能通過你的用戶名+github.io這個域名訪問你的網站了。到這兒，我們就成功上線了自己的網站

如果感覺GitHub訪問速度慢（嗯，其實就是慢，還會有打不開的情況）可以部署到Gitee，都是一樣的操作，還是中文，不要太簡單ei

額，發布確實是發布了，那你覺得像用戶名+github.io這樣的名稱方便記憶嗎？？我想，如果是一個新手（可能都不知道GitHub是什么的用戶，肯定是很困難了）

那，怎么樣方便記憶，而且足夠個性化呢？

當然，這部分肯定是不免費的了，哪兒有什么都白嫖的道理呢？對吧，推薦在阿里云或騰訊云完成下面的操作哦，如果你使用其他的平臺，不是不行，但是建議購買域名和服務器都在相同的平臺，方便管理

國內的大廠，都有保障，無腦沖就可以啦。從經濟性角度來看，哪個有活動，更實惠就選哪個，杰森是看到了阿里云當時的活動比騰訊云更實惠，so~~

省錢攻略

收到有些朋友反應：那么多入口，都找不到從哪里買/找不到活動入口。這里講下怎么查看最新的活動，平臺會有哪些優惠，入口在哪里

阿里云

學生專享

賬號中心完成學生認證購買更優惠

活動專享

最新活動 >戳我直達<

騰訊云

不得不說，兩家界面基本一致，熟悉一個就行，所以位置差不多都一樣

學生專享

學生黨查看這里 >戳我直達<

活動專享

最新活動 >戳我直達<

域名

域名（英語：Domain Name），又稱網域，是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用于在數據傳輸時對計算機的定位標識（有時也指地理位置）

由于IP地址具有不方便記憶并且不能顯示地址組織的名稱和性質等缺點，人們設計出了域名，并通過網域名稱系統（DNS，Domain Name System）來將域名和IP地址相互映射，使人更方便地訪問互聯網，而不用去記住能夠被機器直接讀取的IP地址數串

如果你沒有看懂，沒關系，那聽杰森細細道來。簡單來說，在公網上訪問的資源都有其固定地址IP，但是如果你要訪問特定的IP，就需要記住它。但是呢，它不方便記憶，人們就想出了域名這東西

給IP起了一個個性化的名稱，比如攻城獅杰森是全稱，朋友們喊我森森、阿森、小森，都是別名，但都指向“攻城獅杰森”這個人。那在網絡中如何實現起別名呢？這里介紹下DNS，它是互聯網中的一項服務，實域名和IP的相互映射，也就是說，你輸入域名訪問的就是域名所對應的IP地址

域名購買

既然理解了什么是域名，那我們先來買個域名吧！

>點擊此處< 查詢你想要的域名

舉個栗子，輸入后查詢，選好后加入清單，付款購買即可。不同的后綴價格不同，憑個人喜好

域名后綴，亦被稱為頂級域名，是指代表一個域名類型的符號。 不同后綴的域名有不同的含義。域名共分為兩類：國別域名（ccTLD），例如中國的.cn、美國的.us、俄羅斯的.ru、以及國際通用域名（gTLD），例如.com、.xyz、.top、.wang、pub、.xin、.net等1000多種，所有域名后綴作用無差異，僅外觀和本身含義不同，但只有少數例如舉例中的域名后綴可以在國內支持網站的備案

更多域名后綴信息，查看這里

DNS解析

添加域名

因為我們現在已經有了用戶名.github.io這樣一個網站，為了簡單易記，我們將“用戶名.github.io“解析”到所購買的域名，這樣，網站就有了所有域名和username.github.io兩個網址了

打開倉庫，找到設置，進入pages設置，添加域名

你還可以使用免費的強制HTTPS

HTTPS （全稱：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全為目標的 HTTP 通道，在HTTP的基礎上通過傳輸加密和身份認證保證了傳輸過程的安全性

HTTPS 在HTTP 的基礎下加入SSL，HTTPS 的安全基礎是 SSL【SSL(Secure Sockets Layer 安全套接字協議),及其繼任者傳輸層安全（Transport Layer Security，TLS）是為網絡通信提供安全及數據完整性的一種安全協議。TLS與SSL在傳輸層與應用層之間對網絡連接進行加密】

因此加密的詳細內容就需要 SSL。 HTTPS 存在不同于 HTTP 的默認端口及一個加密/身份驗證層（在 HTTP與 TCP 之間）。這個系統提供了身份驗證與加密通訊方法。它被廣泛用于萬維網上安全敏感的通訊，例如交易支付等方面

打開這個選項

添加解析記錄

在阿里云官網進入域名控制臺

若沒有，在此處搜索

找到需要與username.github.io綁定的域名，點擊“解析”

進入后，點擊“添加記錄”，需添加兩次記錄

第一次

第二次

DNS解析需要時間，稍等片刻后，若在瀏覽框中輸入你的域名，正常訪問則解析成功

這里為什么要說是正式上線呢，畢竟網站到了服務器看得才，才正規一點兒是吧，像GitHub Pages，倒是免費，但是在國內，DNS解析后需要時間，總會有無法訪問或者斷連的情況，太不方便

服務器

先來看看，服務器是何方神圣？

服務器是計算機的一種，它比普通計算機運行更快、負載更高、價格更貴。服務器在網絡中為其它客戶機（如PC機、智能手機、ATM等終端甚至是火車系統等大型設備）提供計算或者應用服務。服務器具有高速的CPU運算能力、長時間的可靠運行、強大的I/O外部數據吞吐能力以及更好的擴展性

根據服務器所提供的服務，一般來說服務器都具備承擔響應服務請求、承擔服務、保障服務的能力。服務器作為電子設備，其內部的結構十分的復雜，但與普通的計算機內部結構相差不大，如：cpu、硬盤、內存，系統、系統總線等

簡單理解：一臺不斷電，有空間的主題在“天上（云端）”一直在為你放置（部署）上去的資源而服務，能處理各種請求（比如你在導航欄輸入域名訪問網站）

有兩種類型的服務器國內和國外的，根據我國法律規定，中國大陸的網站需要備案，等待的時間可能會長一點。國外的到時不需要備案，但是穩定性和訪問速度就不敢保證了，各位小伙伴自己衡量，杰森用的是阿里云的輕應用服務器部署的個人博客網站

購買

這是我的服務器配置，大家可以參考下

如果你是初學者，這個入門級的配置已經足夠學生機，可免費領取，具體規則詳見社區 >戳我直達<

開發者->成長計劃

學生專享（體驗后即可得到半月免費ECS服務器，社區內發表使用感受（發一篇博客）可免費續費兩月），具體規則請查看官網

賬號中心->基本信息位置完成學生認證即可

最新活動 位置購買優惠力度會更大

部署

密碼設定

在圖示位置出更改遠程連接密碼，保存好

雖然可以用瀏覽器遠程連接，但是并不建議，因為有一些鍵盤上的快捷鍵會被系統誤認為是對瀏覽器的操作，而不是對話框

遠程連接

為避免這樣的問題出現，我們選擇使用第三方工具Putty，具體操作步驟，阿里云的幫助文檔已經非常詳細，這里不再重復

從這里開始看，根據提示完成操作

啟動Putty工具，鏈接服務器，登陸用戶名為root，密碼就是在服務器位置設置的密碼（Linux操作系統中輸入密碼為了安全不顯示，不必擔心）出現以下界面時，說明配置正常，繼續下一步即可

git配置

1.輸入命令，安裝git

yum install git

中途如果暫停，則根據提示輸入 yes / y / Y，表示繼續安裝，知道最后出現complete表示安裝成功

2.創建git賬戶

adduser git

3.添加git賬戶權限

chmod 740 /etc/sudoers vim /etc/sudoers

4.執行最后一條命令后，點擊鍵盤i鍵進入編輯模式，找到圖示位置代碼

在下面加入一行

git ALL=(ALL) ALL

按 Esc鍵并輸入 ==:wq==（含義：保存后退出）

5.回改權限

chmod 400 /etc/sudoers

6.設置git賬戶密碼

sudo passwd git

輸入命令回車后連續輸入兩次密碼即可（不顯示，正常），出現圖示即成功

7.切換至git賬戶

su git

創建 ~/.ssh 和 ~/.ssh/authorized_keys 文件

mkdir ~/.ssh vim ~/.ssh/authorized_keys

點擊鍵盤i鍵進入編輯模式，粘貼本地電腦生成的SSH公鑰，文件位置如圖

粘貼后，按 Esc鍵并輸入 ==:wq==（含義：保存后退出）

賦予權限

chmod 600 /home/git/.ssh/authorized_keys chmod 700 /home/git/.ssh

8.本地 git bash here 中測試是否免密登陸成功

ssh -v git@服務器公網IP

出現圖示內容表示連接成功

9.服務器中創建倉庫并完成配置

切換到root賬戶

sudo su root

創建repo倉庫目錄

mkdir /www/repo

賦予權限

chown -R git:git /www/repo chmod -R 755 /www/repo

建立網站根目錄hexo

mkdir /www/hexo

賦予權限

chown -R git:git /www/hexo chmod -R 755 /www/hexo

新建空白的git倉庫并初始化

cd /www/repo git init --bare hexo.git

10.創建 Git 鉤子，用于自動部署

vim /www/repo/hexo.git/hooks/post-receive

同上，進入編輯模式，粘貼下面代碼并保存退出

#!/bin/bash git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

修改權限

chown -R git:git /www/repo/hexo.git/hooks/post-receive chmod +x /www/repo/hexo.git/hooks/post-receive

倉庫建立完畢

安裝Nginx

Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器，在BSD-like 協議下發行。其特點是占有內存少，并發能力強，事實上nginx的并發能力在同類型的網頁服務器中表現較好

Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器，同時也提供了IMAP/POP3/SMTP服務，其將源代碼以類BSD許可證的形式發布，因它的穩定性、豐富的功能集、簡單的配置文件和低系統資源的消耗而聞名

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

中途輸入 y，表示繼續安裝（和上面一樣）等待安裝完成，會顯示登陸網址和初始密碼

注意紅框位置，如果兩個網址都無法訪問，請在服務器安全組 / 防火墻中放行8888端口

輸入初始賬戶名、密碼登陸

進入后，搜索Nginx點擊安裝（我這里已經裝過了）

網站–>添加站點，域名形式xxx.com 無需任何前綴

設置–>配置文件，修改紅框內容

設置–>網站目錄，修改為 ==/www/hexo== 并保存

服務器終端，重啟服務

service bt restart

至此，服務器端配置完成

Hexo配置修改

進入本地博客根目錄，修改 _config.yml 文件部署位置

GitHub Pages 設定

服務器設置

源碼如下

# Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy: type: git repo: git@你的域名:/www/repo/hexo.git branch: master # 注意此處分支設定,需在倉庫中選擇默認的分支

打開Putty工具，連接服務器賦予權限

chown -R git:git /www/repo/ chown -R git:git /www/hexo/

本地根目錄下打開 git bash here執行命令

hexo clean //清除緩存 hexo d -g //快速部署

出現圖示內容表示部署成功，等到備案完成后就可以通過域名訪問了

網站備案

杰森的網站也是最近才備案下來，所以如果你等不及，就另尋他路吧，在國內，咱可不敢造次啊啊啊

你會經歷以下幾個階段

購買服務器后，綁定域名后系統會提示你沒有備案，根據提示完成即可

ICP備案

英文全稱：Internet Content Provider，中文全稱：網絡內容提供商

ICP可以理解為向廣大用戶提供互聯網信息業務和增值業務的電信運營商，是經國家主管部門批準的正式運營企業或部門

全國聯網備案

進入官網 在阿里云完成ICP備案后，系統也會提示你操作

部署完成后，選擇聯網備案登陸

提交網站所有人信息和一些基本材料等待審核通過，最后在網頁底部插入代碼即可，效果如圖

到這里，你的個人網站就成功上線了，也部署到了服務器。內容會根據大家的反饋情況持續更新！！！

參考資料

Git 錯誤：OpenSSL SSL_read: Connection was reset, errno 10054

Picgo+Gitee搭建個人免費圖床

技術小白如何建站 【Hugo前講解的比較詳細】

Git JavaScript Nginx 彈性云服務器 ECS 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。