1. 程式人生 > >使用 Hexo + Github 搭建自己的部落格(圖文教程)

使用 Hexo + Github 搭建自己的部落格(圖文教程)

使用 Hexo + Github 搭建自己的部落格(圖文教程)

【提示】:部落格地址是:自己的短域名.github.io

我的部落格地址:xpwi.github.io

如果之前有過建立倉庫經歷就會知道,自己的倉庫是在:【短域名,github,io/倉庫名】來訪問的。而這個部落格就是唯一一個沒有路徑的地址,就是前面的那個:自己的短域名.github.io

因面向初次使用者,故本篇部落格較長,請根據目錄一步一步來

一、環境準備

1.在搭建部落格之前需要先安裝 Node.js 和配置好 Node.js 環境,如果已經安裝,開啟 cmd 命令列,使用下面命令檢查:

2、安裝 Git 和配置好 Git 環境,安裝成功的象徵就是在電腦上任何位置滑鼠右鍵能夠出現如下兩個選擇

如果有環境變數,在 CMD 中使用下面命令檢查:

二、準備 GitHub 倉庫

  • 1.先註冊自己的 GitHub 賬號: https://github.com/

  • 2.註冊之後會有自己設定的小域名,當然短小、好記為好

  • 3.建立一個倉庫

  • 4.倉庫的名稱是【自己的短域名+.github.io】,且勾選上 Initialize this repository with a RENAME 。
    【提示】:這個庫這能有一個。

  • 5.部落格的地址在可以看到

  • 6.建立倉庫以後,立即可能看不到效果,需要 3 分鐘左右吧,訪問地址就會有:
    在這裡插入圖片描述

二、Hexo 的安裝和使用

1.安裝 Hexo,在自己認為合適的地方創個資料夾,我是在 D:/space/blog 目錄。然後通過命令列進入到該資料夾裡面。
2.使用下面命令安裝 hexo:

npm install hexo -g

3.檢查是否安裝成功:

hexo -v

操作截圖:

4.然後通過命令列進入到想要存放部落格檔案的目錄
5.輸入 hexo init,初始化該資料夾:
(如果自己停了卡住了,就敲回車,比較慢,耐心等待)
在這裡插入圖片描述
最後會有一個:
在這裡插入圖片描述

6.安裝做依賴的模組,執行命令:npm install
在這裡插入圖片描述
7.下載歡迎 demo 體驗 Hexo,執行命令:hexo g
在這裡插入圖片描述


8.開啟伺服器,執行命令:hexo s,訪問提示的網址:

http://localhost:4000/

在這裡插入圖片描述
在這裡插入圖片描述

假如頁面一直無法跳轉,那麼可能埠被佔用了。此時我們 ctrl+c 停止伺服器,接著輸入“hexo server -p 新埠號”來改變埠號,再訪問新地址就可以了。

9.然後安裝一個 git 擴充套件,先按(Ctrl+C)終止伺服器,使用命令:

npm install hexo-deployer-git --save

在這裡插入圖片描述

三、修改 _config.yml 檔案

1.開啟自己的 GitHub 庫,點選【Clone or download】>【切換為SSH】>拷貝地址待用
在這裡插入圖片描述

2.開啟部落格的本地存放目錄:
在這裡插入圖片描述

3.修改 _config.yml 檔案,在最後面做如下配置:
【注意】yml 語法:必須在冒號後有空格

在這裡插入圖片描述

四、配置 GitHub 的 SSH key

1.由於你的本地 Git 倉庫和 GitHub 倉庫之間的傳輸是通過 SSH 加密的,所以,需要一點設定

2.建立 SSH Key。在使用者主目錄下【C盤---->使用者/user---->Administrator(自己的使用者名稱)】,看看有沒有 .ssh 目錄,如果有,再看看這個目錄下有沒有 id_rsa 和 id_rsa.pub 這兩個檔案,如果已經有了,可直接跳到下一步。如果沒有,開啟 Shell(Windows下開啟Git Bash),建立 SSH Key:

ssh-keygen -t rsa -C "[email protected]"

一直回車就可以,也不必要設定密碼
如果一切順利的話,可以在使用者主目錄裡找到 .ssh 目錄,
裡面有 id_rsa 和 id_rsa.pub 兩個檔案,這兩個就是 SSH Key 的祕鑰對,
id_rsa 是私鑰,不能洩露出去,id_rsa.pub 是公鑰,可以放心地告訴任何人。

3.登陸 GitHub,開啟 “Settings”,“SSH Keys” 頁面,“New SSH key”,“貼上公鑰”:

為什麼 GitHub 需要SSH Key呢?因為GitHub需要識別出你推送的提交確實是你推送的,而不是別人冒充的,而Git支援SSH協議,所以,GitHub只要知道了你的公鑰,就可以確認只有你自己才能推送。
當然,GitHub允許你新增多個Key。假定你有若干電腦,你一會兒在公司提交,一會兒在家裡提交,只要把每臺電腦的Key都新增到GitHub,就可以在每臺電腦上往GitHub推送了。
【友情提示】:在GitHub上免費託管的Git倉庫,任何人都可以看到喔(但只有你自己才能改)

五、新建部落格並上傳到 GitHub 伺服器

1.新建一篇部落格,在 cmd 執行命令:hexo new post “部落格名”
在這裡插入圖片描述
會在 blog\source_posts 目錄下生成一個檔案:
在這裡插入圖片描述

2.編輯 firstblog.md 檔案(markdown 檔案):

---
title: firstblog
date: 2018-12-10 19:37:18
tags:
---
### 肖朋偉的第一篇部落格

 - 部落格地址:xpwi.github.io

3.部署到 GitHub,使用命令:hexo d -g
在這裡插入圖片描述

4.然後你會發現,在部落格庫中多了很多東西:
在這裡插入圖片描述

5.訪問部落格地址,檢視:

【注意】(需要一點時間部署,博主大概 3 分鐘後才看到,不要著急)

在這裡插入圖片描述

6.當然我們現在只是使用了預設的主題,更換主題請跳轉 !

更多文章

轉載請註明出處