快速搭建個人部落格——保姆級教程

語言: CN / TW / HK

序言

偶然間,看到某乎上高讚的一個問題:怎麼證明下計算機專業學生的能力?問題下面呢,也是有眾多網友評論哈,我記得最清晰、也最現實的一條是:有什麼能力的,為了裝個 X 罷了

在這裡插入圖片描述

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

好了,迴歸正題,我建立個人網站呢,初衷其實非常簡單,說不定你也想過,只是沒去做而已。我是想:現在的網路中有好多的寫作平臺,比如我現在在用的C站,它已經非常成熟,社群討論、問題釋出、Blink動態等等,一應俱全。我在學完相關知識後,為什麼不能自己寫一個呢?也許更多的是我愛折騰罷了,哈哈

在這裡插入圖片描述

最開始接觸是在C站文章釋出“板塊自定義”模組中,輸入幾行程式碼,就能有漂亮的介面。當時因為還沒有接觸到CSS、Web前端這些,是從網上白嫖來的,更是激起了我深入學習的興趣

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

有了想法就要動手,當我真正動手去實現的時候,才發現並不是一些標題黨發的文章,像“十分鐘建立屬於你的網站、你還不會自己建網站?”。等到自己真正看著他們的影片、文章去操作的時候,有的是真大神,他預設的一些東西你應該是會的,會寫的簡單一些。還有一些,就是“偉大的搬運工”了,完完全全就是釋出了別人的文章,還不放原文連結那種

正是我沒有發現一套完整的,能幫助新手開發一個網站的資源,所以決定寫下 UP 建站的過程,分享我從初學到最後實現的一些經驗。所以,如果你也想要擁有一個屬於自己的網站,可以跟著上手操作下,過程中如果遇到問題可以私信或留言。下面,讓我們一起開始吧

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

在這裡插入圖片描述

或許,你還可以這樣:

在這裡插入圖片描述

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

在這裡插入圖片描述

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

本地網站

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

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

開發工具

WebStorm

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

廢話少說,來這裡下載 傳送門

在這裡插入圖片描述

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

Vscode

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按鈕即可

<img src="https://oscimg.oschina.net/oscnet/2348e786eb7a4c2da133338a12aa6670.png" width="80%">

安裝過程不再贅述,直接使用預設配置,一“Next(站)” 到底

下面我們配置環境變數資訊,詳情參考此處,開啟 Path 變數後,新增本地環境安裝目錄(確保檔案位置到達 cmd )

在這裡插入圖片描述

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

在這裡插入圖片描述

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

在這裡插入圖片描述

node.js

>下載直達<

在這裡插入圖片描述

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

>LTS代表“Long Term Support(長期支援)”,Current代表“當前的” >Current就代表最新發布的版本(每6個月一次的),它可能是奇數版本也可能是偶數版本

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 位置,組合鍵<kbd>Ctrl</kbd>+<kbd>C</kbd>停止本地預覽,這就是本地最簡單的一個網站啦

emmm,預設的頁面朋友們也預覽成功了,大概呢,就是這樣,嘿:

請新增圖片描述

但總感覺,還是差了點什麼東西。沒有一些部落格、網站該有的東西,那怎麼能讓它更像一個網站呢?

主題

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

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

樣式

提及主題,肯定就會有很多啦。還是那句話,大家根據自己的喜好選擇就好,這裡是官方主題庫,我比較喜歡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和一些其他外掛就能實現

前些時候更新過一片文章,使用GitHubSM.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.執行最後一條命令後,點選鍵盤<kbd>i</kbd>鍵進入編輯模式,找到圖示位置程式碼

在這裡插入圖片描述 在下面加入一行

git     ALL=(ALL)     ALL

在這裡插入圖片描述

按 <kbd>Esc</kbd>鍵並輸入 ==: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

點選鍵盤<kbd>i</kbd>鍵進入編輯模式,貼上本地電腦生成的SSH公鑰,檔案位置如圖

在這裡插入圖片描述

粘貼後,按 <kbd>Esc</kbd>鍵並輸入 ==:wq==(含義:儲存後退出)

賦予許可權

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

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

ssh -v [email protected]伺服器公網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 &amp;&amp; wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; 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: [email protected]你的域名:/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備案後,系統也會提示你操作

部署完成後,選擇聯網備案登陸

在這裡插入圖片描述

提交網站所有人資訊和一些基本材料等待稽核通過,最後在網頁底部插入程式碼即可,效果如圖

在這裡插入圖片描述


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

最後,放上傑森的小破站地址,歡迎到訪 haha >>> 傑森的小破站

在這裡插入圖片描述


參考資料

技術小白如何建站

Picgo+Gitee搭建個人免費圖床

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