【超級詳細的小白教程】Hexo 搭建自己的博客

01

– 前言

這是一篇有關如何使用 Github PagesHexo 搭建屬于自己獨立博客的詳盡教程,本人是軟件工程專業本科生,目前只學習了C和C++編程語言,對網站開發的有關知識幾乎為零,這也是我搭建好自己的博客之后寫的第一篇博客,剛開始搭建博客的時候自己也是網上各種百度,由于自己屬于小白那種,歷經了千辛萬苦才弄好,所以借這個機會寫一篇小白真正能看懂的博客搭建教程,教你一步一步走向成功的彼岸!

推薦文章: 《我為什么寫博客》 (By 知明所以)
      《為什么你應該(從現在開始就)寫博客》 (By 劉未鵬 | Mind Hacks)

– 入門

Github Pages

Github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。使用Github Pages可以為你提供一個免費的服務器,免去了自己搭建服務器和寫數據庫的麻煩。此外還可以綁定自己的域名。

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。

– 安裝 Node.js

點擊此處訪問官網,按需下載相應版本,默認安裝可以了

02

注:本人在安裝過程中出現了Warning 1909,無法創建快捷方式,這種情況很少出現,如果在安裝過程中也有這種情況請參考百度文庫(win10系統實測可行):《Win7安裝程序警告1909無法創建快捷方式》

03

– 安裝 Git

點擊此處訪問官網,按需下載相應版本,默認安裝即可
參考資料:《如何在windows下安裝GIT》  (By 俊雨廷休)
     《Pro Git(中文版)》

– 檢驗軟件是否安裝成功

同時按下 Win 鍵和 R 鍵打開運行窗口,輸入 cmd ,然后輸入以下命令,有相應版本信息顯示則安裝成功,若不正確可以卸載軟件重新安裝,此外若安裝成功,在桌面右鍵鼠標,可以看到菜單里多了 Git GUI HereGit Bash Here兩個選項,第一個是圖形界面的Git操作,另一個是命令行

$ git --version
$ node -v
$ npm -v

04

05

– Hexo 安裝

選擇一個磁盤,新建一個文件夾,自己重命名文件夾(如:我的文件夾為:E\TRHX_Blog),博客相關文件將儲存在此文件夾下,在該文件夾下右鍵鼠標,點擊 Git Bash Here,輸入以下 npm 命令即可安裝,第一個命令表示安裝 hexo,第二個命令表示安裝 hexo 部署到 git page 的 deployer,如圖所示即為安裝成功

$ npm install hexo-cli -g
$ npm install hexo-deployer-git --save

06

– Hexo 初始化配置

在剛才新建的文件夾里面再次新建一個 Hexo 文件夾(如:我的文件夾為:E\TRHX_Blog\Hexo),進入該 Hexo 文件夾右鍵鼠標,點擊 Git Bash Here,輸入以下命令,如圖所示則安裝成功

$ hexo init

07

Hexo 安裝完成后,將會在指定文件夾中新建所需要的文件,Hexo 文件夾下的目錄如下:
08

– 本地查看效果

執行以下命令,執行完即可登錄 http://localhost:4000/ 查看效果

$ hexo generate
$ hexo server

顯示以下信息說明操作成功:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

登錄 http://localhost:4000/ 查看效果:
09

– 將博客部署到 Github Pages 上

到目前為止,我們的本地博客就成功搭建了,但是現在我們只能通過本地連接查看博客,我們要做的是讓其他人也能夠訪問我們的博客,這就需要我們將博客部署到Github Pages上

一、注冊 Github 賬戶:點擊此處訪問 Github 官網,點擊 Sign Up 注冊賬戶

二、創建項目代碼庫:點擊 New repository 開始創建,步驟及注意事項見圖:
10

三、配置 SSH 密鑰:只有配置好 SSH 密鑰后,我們才可以通過 git 操作實現本地代碼庫與 Github 代碼庫同步,在你第一次新建的文件夾里面(如:我的文件夾為:E\TRHX_BlogGit Bash Here 輸入以下命令:

$ ssh-keygen -t rsa -C "your email@example.com"
//引號里面填寫你的郵箱地址,比如我的是tanrenhou@126.com

之后會出現:

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到這里可以直接回車將密鑰按默認文件進行存儲

然后會出現:

Enter passphrase (empty for no passphrase):
//這里是要你輸入密碼,其實不需要輸什么密碼,直接回車就行
Enter same passphrase again:

接下來屏幕會顯示:

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
這里是各種字母數字組成的字符串,結尾是你的郵箱
The key's randomart image is:
這里也是各種字母數字符號組成的字符串

運行以下命令,將公鑰的內容復制到系統粘貼板上

$ clip < ~/.ssh/id_rsa.pub

四、在 GitHub 賬戶中添加你的公鑰

1.登陸 GitHub,進入 Settings
11

2.點擊 SSH and GPG Keys
12

3.選擇 New SSH key
13

4.粘貼密鑰:
14

五、測試

輸入以下命令:注意:git@github.com不要做任何更改!

     $ ssh -T git@github.com

之后會顯示:
15

輸入 yes 后會顯示:
16
此時表示設置正確

六、配置 Git 個人信息

Git 會根據用戶的名字和郵箱來記錄提交,GitHub 也是用這些信息來做權限的處理,輸入以下命令進行個人信息的設置,把名稱和郵箱替換成你自己的,名字可以不是 GitHub 的昵稱,但為了方便記憶,建議與 GitHub 一致

     $ git config --global user.name "此處填你的用戶名"$ git config --global user.email "此處填你的郵箱"

到此為止 SSH Key 配置成功,本機已成功連接到 Github

– 將本地的 Hexo 文件更新到 Github 的庫中

一、登錄 Github 打開自己的項目 yourname.github.io
17

二、鼠標移到 Clone or download 按鈕,選擇 Use SSH
18

三、一鍵復制地址
19

四、打開你創建的 Hexo 文件夾(如:E:\TRHX_Blog\Hexo),右鍵用記事本(或者Notepad++、Vs Code等)打開該文件夾下的 _config.yml 文件
20

五、按下圖修改 _config.yml 文件并保存
21

六、在 Hexo 文件夾下分別執行以下命令

     $ hexo g$ hexo d

或者直接執行

     $ hexo g -d

執行完之后會讓你輸入你的 Github 的賬號和密碼,如果此時報以下錯誤,說明你的 deployer 沒有安裝成功

     ERROR Deployer not found: git

需要執行以下命令再安裝一次:

     npm install hexo-deployer-git --save

再執行 hexo g -d,你的博客就會部署到 Github 上了

七、訪問博客

你的博客地址:https://你的用戶名.github.io,比如我的是:https://trhx.github.io ,現在每個人都可以通過此鏈接訪問你的博客了

– 如何在博客上發表文章

博客已經成功搭建了,但是我們該怎么寫博客呢?

一、新建一個空文章,輸入以下命令,會在項目 \Hexo\source\_posts 中生成 文章標題.md 文件,文章標題根據需要命名

     $ hexo n "文章標題"

也可以直接在 \Hexo\source\_posts 目錄下右鍵鼠標新建文本文檔,改后綴為 .md 即可,這種方法比較方便

二、用編輯器編寫文章

md 全稱 Markdown, Markdown 是 2004 年由 John Gruberis 設計和開發的純文本格式的語法,非常的簡單實用,常用的標記符號屈指可數,幾分鐘即可學會, .md 文件可以使用支持 Markdown 語法的編輯器編輯,然后將寫好的文章(.md文件)保存到 \Hexo\source\_posts 文件夾下即可

推薦 Windows 上使用 MarkdownPad2 或者 小書匠 編輯器,macOS 上使用 Mou 編輯器,Linux 上使用 Remarkable 編輯器,Web 端上使用 簡書 ,另外可以參考我的另一篇文章:《主流 Markdown 編輯器推薦》
當我們用編輯器寫好文章后,可以使用以下命令將其推送到服務器上

     $ hexo g$ hexo d

或者將兩個命令合二為一輸入以下命令:

     $ hexo d -g

現在訪問你的博客就可以看見寫好的文章啦!
參考資料:《10款流行的Markdown編輯器》 (By xiaoxiao_engineer)
     《獻給寫作者的 Markdown 新手指南》 (By 簡書)
     《認識與入門 Markdown》 (By Te_Lee)
     《markdown簡明語法》 (By 不如)
     《markdown基本語法》 (By 高鴻祥)
     《Markdown 公式指導手冊》 (By Harries)

– 如何為博客更換自己喜歡的主題

博客也搭建好了,文章也會寫了,但是!!!默認的主題并不喜歡怎么辦?現在,我們就來為自己的博客更換自己喜歡的主題

點擊此處進入 Hexo 官網的主題專欄,我們可以看見有許多的主題供我們選擇
22

我們要做的就是把主題克隆過來,在此我們以主題 Aero-Dual 為例,點進去我們就可以看見該主題作者的博客,鼠標滑到底,我們可以看見 Theme By Levblanc 的字樣(其他主題類似),點擊作者 Levblanc ,頁面就會跳轉到該主題所有的相關文件在 Github 上的地址,復制該地址
23
24
25

再打開 Hexo 文件夾下的 themes 目錄(如:E:\TRHX_Blog\Hexo\themes),右鍵 Git Bash Here,輸入以下命令:

     $ git clone 此處填寫你剛才復制的主題地址

比如要安裝 Aero-Dual 主題,則輸入命令:

     $ git clone https://github.com/levblanc/hexo-theme-aero-dual

等待下載完成后即可在 themes 目錄下生成 hexo-theme-aero-dual 文件夾,然后打開 Hexo 文件夾下的配置文件 _config.yml ,找到關鍵字 theme,修改參數為:theme:hexo-theme-aero-dual (其他主題修改成相應名稱即可),再次注意冒號后面有一個空格!
26

返回 Hexo 目錄,右鍵 Git Bash Here ,輸入以下命令開始部署主題:

     $ hexo g   $ hexo s

此時打開瀏覽器,訪問 http://localhost:4000/ 就可看見我們的主題已經更換了,如果感覺效果滿意,我們就可以把它部署到Github上了

打開 Hexo 文件夾,右鍵 Git Bash Here ,輸入以下命令:

     $ hexo clean  //該命令的作用是清除緩存,若不輸入此命令,服務器有可能更新不了主題$ hexo g -d

此時訪問自己的博客即可看見更換后的主題,但我們仍然需要對主題的相關配置進行修改,比如網站標題,圖標等等,Hexo 中有兩份主要的配置文件,名稱都是 _config.yml ,它們均是用于站點配置使用的。其中,一份位于站點根目錄下(比如我的:E:\TRHX_Blog\Hexo\_config.yml),主要包含 Hexo 本身整站的配置;另一份位于主題目錄下(比如我的:E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml),這份配置由主題作者提供,主要用于配置主題相關的選項,一般 _config.yml 文件里都有相關注釋,按需修改即可

參考資料:《有哪些好看的 Hexo 主題?》 (知乎)
     《Hexo | 配置》 (Hexo官方文檔)
     《hexo常用命令筆記》 (By 小弟調調)

– 為你的 Hexo 博客配置個性域名

本人在配置域名的時候問題百出,百度的各種方法都不管用,打開網站總是 404,可能是我太笨了  o(╥﹏╥)o ,不過好在后來終于解決了這個問題

首先我們要購買域名,阿里云,騰訊云都可以,也不貴,一年幾十塊錢,最便宜幾塊錢也能買到,以阿里云為例,我購買的域名是 itrhx.com,購買過程就不贅述了,選擇阿里云的解析平臺,來到阿里云的管理控制臺,點擊進入域名解析列表或者直接點擊域名后面的解析
27

方法一:點擊添加記錄,需要添加兩個記錄,兩個記錄類型都是 CNAME ,第一個主機記錄為 @ ,第二個主機記錄為 www,記錄值都是填你自己的博客地址(比如我的是:trhx.github.io),保存之后域名解析就完成了!
28
方法二:兩個記錄類型為 A ,第一個主機記錄為 @ ,第二個主機記錄為 www,記錄值都為博客的 IP 地址,IP 地址可以 cmd 中輸入 ping 你的博客地址 獲得(比如我的:ping trhx.github.io),保存之后域名解析就完成了!

有關解析記錄類型的區別可以參考《域名解析中A記錄、CNAME、MX記錄、NS記錄的區別和聯系》

為了使 GitHub 接收我們的域名,還需要在博客的根目錄下添加一個名為 CNAME 的文件(注意不要加.txt,沒有任何后綴名!),這個文件放到 Hexo 文件夾的 source 里面,(比如我的是:E:\TRHX_Blog\Hexo\source),文件里面填寫你的域名(加不加www都行),比如要填寫我的域名,文件里面就寫:www.itrhx.com 或者 itrhx.com,經過以上操作,別人就可以通過 www.itrhx.com 、itrhx.com 、trhx.github.io 三個當中任意一個訪問我的博客了!你的也一樣!

有關加不加www的問題有以下區別:

如果你填寫的是沒有www的,比如 itrhx.com,那么無論是訪問 https://www.itrhx.com 還是 https://itrhx.com ,都會自動跳轉到 https://itrhx.com

如果你填寫的是帶www的,比如 www.itrhx.com ,那么無論是訪問 https://www.itrhx.com 還是 https://itrhx.com ,都會自動跳轉到 http://www.itrhx.com

30

如果你在其他平臺購買域名,或者選擇 DNSPod 等其他域名解析,操作方法大同小異,遇到問題可自行百度解決!

參考資料:《推薦幾家域名注冊服務商》 (By Jelly Bool)
     《盤點十大免費DNS域名解析服務:穩定、可靠》

– 結語

一頓操作下來雖然有點兒累,但看見擁有了自己的博客還是非常有成就感的,人生就是需要折騰,那么現在就開始你的創作之旅吧!文章的不斷積累,你會從中受益很多的!另外,這是一篇小白寫的適用于小白的博客搭建教程,比較詳細,有這方面基礎的可以百度有簡略一點兒的教程,文中如有錯誤還請大佬指出改正!文中涉及參考資料如有侵權請聯系我刪除!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/444109.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/444109.shtml
英文地址,請注明出處:http://en.pswp.cn/news/444109.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

面向對象思想精華總結

一、三大特性 封裝繼承多態 二、類圖 泛化關系 (Generalization)實現關系 (Realization)聚合關系 (Aggregation)組合關系 (Composition)關聯關系 (Association)依賴關系 (Dependency) 三、設計原則 S.O.L.I.D其他常見原則 參考資料 一、三大特性 封裝 利用抽象數據類型將數據…

數組名與指向數組的指針之間的聯系與區別【數據結構】

我們遇到一個非常棘手的問題&#xff0c;這個問題就是&#xff0c;對于一堆數據來說&#xff0c;我們進行存儲&#xff0c;放到一個指定的倉庫當中&#xff0c;先前我們使用數組加加標的形式進行訪問倉庫當中的元素位置&#xff0c;但是呢&#xff0c;現在我們使用的是一個指針…

Struts2的action中處理JSONP方式提交的中文亂碼問題:

昨天在做公司網站的時候出現了一個中文亂碼問題&#xff0c;讓我郁悶了一晚上和一上午&#xff0c;最后在網友的提示下&#xff0c;我終于解決了&#xff0c;現在寫出來供后來的兄弟們參考&#xff1a; 1.問題是這樣的&#xff0c;就是客戶端是以JSONP的方式提交的數據&#x…

leetcode509. 斐波那契數(矩陣快速冪)

斐波那契數&#xff0c;通常用 F(n) 表示&#xff0c;形成的序列稱為斐波那契數列。該數列由 0 和 1 開始&#xff0c;后面的每一項數字都是前面兩項數字的和。也就是&#xff1a; F(0) 0, F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 給定 N&#xff0c;計算 F(N)。…

insert函數的修改,

我們來看一下圖片當中的第2個圓圈&#xff0c;為什么使用size來相加呢&#xff1f;我們知道一開始我們定義的初始空間為init_size;我們想一下啊&#xff0c;如果是第1次進行空間的增加&#xff0c;那么我們使用InIt來進行相加是可以的&#xff0c;但是當第2次想加我們再想開辟空…

leetcode520. py解字符串真是太殘暴了

給定一個單詞&#xff0c;你需要判斷單詞的大寫使用是否正確。 我們定義&#xff0c;在以下情況時&#xff0c;單詞的大寫用法是正確的&#xff1a; 全部字母都是大寫&#xff0c;比如"USA"。 單詞中所有字母都不是大寫&#xff0c;比如"leetcode"。 如果…

【數據結構】線性表大咖

循環鏈表的介紹 概念&#xff1a;鏈表的最后一個節點的指針&#xff0c;由原來的 空指針變成指向第1個節點的鏈表。 類比&#xff1a;我們進行串珠子的操作&#xff0c;將首尾通過線進行連接&#xff0c;同樣我們的鏈表就是通過指針指向的方式進行連接&#xff0c;使其成為一…

leetcode551. 學生出勤記錄 I

給定一個字符串來代表一個學生的出勤記錄&#xff0c;這個記錄僅包含以下三個字符&#xff1a; A : Absent&#xff0c;缺勤 L : Late&#xff0c;遲到 P : Present&#xff0c;到場 如果一個學生的出勤記錄中不超過一個A(缺勤)并且不超過兩個連續的L(遲到),那么這個學生會被獎…

一元多項式的表示和相加【數據結構】

一元多項式的表示和相加 運算只是一個定義&#xff0c;一切的一切&#xff0c;到最后都必須歸咎于存儲結構當中&#xff0c;實現物理存儲&#xff0c;一元多項式包括數據對象數據關系以及數據之間的各種操作&#xff0c; 一元多項式的實現&#xff1a;用帶表頭結點的有序鏈表…

線性結構基本概念【數據結構】F

線性表的概念&#xff1a;線性表是一種最簡單的線性結構&#xff0c;線性結構是單個數據元素的有序結合 線性結構的基本特征為&#xff1a; 第一&#xff0c;集合中必存在唯一的一個第1元素&#xff0c; 第二&#xff0c;集合中必存在唯一的一個最后元素&#xff0c; 第三&am…

leetcode589. N叉樹的前序遍歷

給定一個 N 叉樹&#xff0c;返回其節點值的前序遍歷。 例如&#xff0c;給定一個 3叉樹 : 返回其前序遍歷: [1,3,5,6,2,4]。 思路&#xff1a;先放入自己&#xff0c;再依次遍歷孩子。 /* // Definition for a Node. class Node {public int val;public List<Node> c…

ORA-00001 違反唯一約束條件

程序跑出下面的異常&#xff1a;com.ibm.websphere.ce.cm.DuplicateKeyException: ORA-00001: 違反唯一約束條件 (EOMS3.SYS_C0024492)&#xff0c;參考下面的文章了解到我的程序可能是序列的問題。&#xff08;果然是序列產生的最小值設置的太小&#xff0c;將序列值設置大之后…

順序結構實現【數據結構】

雖然在數據結構當中是先出現的線性表&#xff0c;然后出現的是數組 一&#xff1a;線性表的順序存儲結構 順序映象&#xff1a;用一組地址連續的存儲單元依次存放線性表當中的數據元素 線性表的起始地址&#xff1a;線性存儲第一個數據元素的地址&#xff0c;我們也稱作是基地址…

leetcode590. N叉樹的后序遍歷

給定一個 N 叉樹&#xff0c;返回其節點值的后序遍歷。 例如&#xff0c;給定一個 3叉樹 : 思路&#xff1a;先遍歷所有孩子&#xff0c;再放入自己。 /* // Definition for a Node. class Node {public int val;public List<Node> children;public Node() {}public No…

鏈表的形式【F】

數據元素之間的關系在計算機中有兩種表示方法: 順序映象, 非順序映象. 對應兩種存儲結構: 順序存儲結構, 鏈式存儲結構 線性結構就是一種邏輯關系&#xff0c;方便我們對數據進行研究但是不考慮真實的存儲結構 數據是什么&#xff1f; 數據是能夠反應一定內容的一組數據類型的…

leetcode892. 三維形體的表面積

在 N * N 的網格上&#xff0c;我們放置一些 1 * 1 * 1 的立方體。 每個值 v grid[i][j] 表示 v 個正方體疊放在對應單元格 (i, j) 上。 請你返回最終形體的表面積。 示例 1&#xff1a; 輸入&#xff1a;[[2]] 輸出&#xff1a;10 示例 2&#xff1a; 輸入&#xff1a;…

leetcode914. 卡牌分組

給定一副牌&#xff0c;每張牌上都寫著一個整數。 此時&#xff0c;你需要選定一個數字 X&#xff0c;使我們可以將整副牌按下述規則分成 1 組或更多組&#xff1a; 每組都有 X 張牌。 組內所有的牌上都寫著相同的整數。 僅當你可選的 X > 2 時返回 true。 示例 1&#xf…

單鏈表的實現【數據結構】

思考&#xff1a; 1.是否能夠將原來指針的方向改為向前指向呢&#xff1f; 2.是否能夠有兩個指針域的操作呢&#xff1f; 了解&#xff1a; 單鏈表是應用最廣泛的一種形式&#xff0c;還有雙向鏈表以及循環鏈表&#xff0c;這些都是要進行討論的 結構體定義的是什么&#xff1f…

(詳細圖解)VS2017安裝教程

VS 2017 版本同 15 版一樣&#xff0c;細分為三個版本&#xff0c;分別是&#xff1a; 社區版&#xff08;Community&#xff09;&#xff1a;免費提供給單個開發人員&#xff0c;給予初學者及大部分程序員支持&#xff0c;可以無任何經濟負擔、合法地使用。企業版&#xff1a…

鏈表的代碼實現【數據結構F】

單鏈表的特點&#xff1a;每次結點的分配都是動態進行分配的&#xff0c;melloc函數實現的功能是開辟一塊新的內存空間&#xff0c;但是返回的是一個地址&#xff0c;只能是地址&#xff0c;沒有別名的事情&#xff0c;那就有點難辦了&#xff0c;這是一種間接的尋址&#xff0…