Hexo + GitHub 個人網站搭建 | 非程序員版 | Mac

搭好架子,實現可以用鏈接訪問先。


一、安裝環境

1. 去node官網下載Node.js,安裝后回到終端。

位置:
Node.js /usr/local/bin/node
npm /usr/local/bin/npm

2. 打開「終端」,接下來需要輸入命令的的操作都在終端里輸入。

終端常用指令:

pwd #查看當前位置,啟動終端的位置一般在用戶文件夾
cd Banli/ #進入叫Banli的文件夾
cd /User/Banli/Documents #進入文稿
cd /User/Banli/Documents/123 #進入文稿里的 123文件夾
mkdir BBB #在123文件夾里創建叫BBB的文件夾
cd ../ #退到上一級
cd ../.. #推到上兩級
hexo clean #清理hexo

文件拖到終端里可以查看「在終端里用的」路徑;
?? 所有的符號都要是英文符號哦!
?? 輸入指令前用 pwd 查看當前路徑,需要始終都在博客文件夾路徑下!(如我的博客文件在 Users/Banli/blog,那我的操作始終在這個路徑下)。

3. 開放權限:
sudo su   #??輸入這幾個字母,回車
Passwoed:  #??輸入電腦密碼
sh-3.2#     #?自動換行表示成功了。可能會顯示別的啥

權限這步要放在前面,不然會報錯。如果后面的步驟又報錯權限被拒,可以再開放下權限。

4. 檢查 node.js 是否安裝成功:
node -v  #??輸入這幾個字母,回車
v10.15.3 #?顯示版本號,表示成功了
npm -v #??輸入這幾個字母,回車
6.4.1   #?顯示版本號,表示成功了
5. 通過 cnpm 安裝淘寶的鏡像(說是比直接安裝快)
npm install -g cnpm --registry=https://registry.npm.taobao.org   

這時候會自動安裝(有個進度條的),安裝完了會自動換行;

6. 檢查 cnpm 是否安裝成功:
cnpm -v #??輸入這幾個字母,回車,顯示以下內容表示安裝成功
cnpm@6.0.0... #?略
7.正式安裝 Hexo
cnpm install -g hexo-cli   #??輸入這幾個字母,回車
Downloading hexo-cli to.......   #?顯示下載中
8.驗證
hexo -v  #??輸入這幾個字母,回車
hexo-cli: 1.1.0  #?顯示版本,成功
.... #略

?? 官網說要裝 Xcode,老老實實裝了


二、搭建博客

1. 建立文件夾
pwd  #??查看文件夾位置
/Users/banli #?顯示文件夾所在路徑
mkdir blog #??新建文件夾,blog是文件夾名稱,上行路徑會生成一個blog文件夾
cd blog/  #??進入blog文件夾
pwd #??檢查路徑是不是對的
/Users/banli/blog  #?嗯,是對的

?? 也可以直接在文件夾里新建,一樣的。

2.用 hexo 生成博客
sudo hexo init #??輸入
INFO Cloning hexo-starter to /Users/Banli/blog #?自動克隆了個叫landscape的主題
.... #略
INFO Start blogging with Hexo! #?初始化完成
ls -l  #??輸入,看一下目錄下生成了哪些東西
total 296 #?顯示生成的東西
.... #略
3. 啟動博客
hexo s #??輸入
INFO  Start processing #?顯示,在本地4000端口啟動
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 

在瀏覽器輸入「http://localhost:4000」即可打開博客,默認主題長??這樣。

下一步該是新建博文了,但是到這個地方出現了一次問題,輸入命令回車沒反應;??

補充:輸入命令回車沒反應是因為,要先停止預覽博客才可以繼續編輯!「Ctrl+C」停止博客。

當時不知道咋辦,就想著刪掉了重新來一遍,雖然最后也顯示了「 Start blogging with Hexo!」,但是中間還挺多「 ERRO 」的。這樣就沒法啟動了~

看到了別人用了不同的命令生成博客的,試下是可以的。刪掉文件、關掉終端(剛剛才發現不重啟路徑在垃圾桶里,不知道前面失敗的跟這個有沒有關系)。

?? 沒有重新開啟終端 / 用命令回到初始路徑,無法新建博客。因為「當前位置」會隨著被刪除得文件一起去到垃圾桶

搭建博客方法二:

用于用「sudo hexo init」指令生成博客報錯時。

1. 新建文件夾并生成博客

先進入對應文件夾。不進入指定文件夾博客文件會放在「用戶」文件夾下,像前面的方法一。我還不知道怎么進入指定文件夾,就用的默認位置:

cd /Users/Banli/Documents/ # ??進入文稿

省掉了單獨新建空文件夾的步驟,直接安裝并新建文件夾:

hexo init blog #??安裝在新文件夾「blog」里
INFO Cloning ... Start blogging with Hexo!  #?顯示相同上,完成,沒有報錯

進入到「blog」文件夾:

cd blog  #??進入文件夾
cnpm install #??安裝cnpm

?? 沒有進到 blog是無法運行博客的,運行「hexo s」一定會報錯。
c

2. 運行博客
hexo s #??和前面一樣

但是提示 4000 端口被使用了:

FATAL Port 4000 has been used. Try other port instead.
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html

需要換一個端口:

hexo s -p 5000 #??換成  5000 端口
INFO  Start processing #?顯示成功,在本地5000端口啟動
INFO  Hexo is running at http://localhost:5000 . Press Ctrl+C to stop.

瀏覽器輸入「http://localhost:5000」打開博客。
這個時候終端是無法接收指令的(方法一最后導致我重使的情況!)

「運行」博客更像是「預覽」吧,而且不是實時預覽,需要停止后才能繼續接收指令哦。

Ctrl+C #停止運行博客

停止后就看不到博客預覽了。


三、上傳到 GitHub

1. 建倉庫

登錄Github,點擊「new repositories」新建倉庫,名字輸入自己的 Github 用戶名+github.io,其他默認。

創建好后,復制??這條地址,一會兒會用到。


2. 配置

回到博客文件夾,找到 「_config.yml」文件,用代碼編輯器打開(我用的「Sublime Text」)。

找到「#URL」-「url」,改成自己的站點地址:

url: http://liubanli.github.io  #??換成自己的 github 地址

翻到最末尾,找到「deploy」,類型填寫「git」并補上「repository」后面的內容:

deploy:
  type: git
  repository: https://github.com/liubanli/liubanli.github.io.git  #??倉庫地址
  branch: master #??增加

?? liubanli 是我的 Github 用戶名,改成你自己的 / 冒號后面要空格

保存。可以關閉代碼編輯器了。

3. 部署

blog的文件里要裝一個 git 的部署插件,回到終端:

cnpm install --save hexo-deployer-git  #??輸入
cnpm install hexo-deployer-git --save  #??順序2

順利安裝完成。提交需要依次執行下面這三個命令:

hexo clean   #??清除hexo
hexo g  #??「generate」的簡寫,生成
hexo d  #??「deploy」的簡寫,部署

運行成功之后需要依次輸入 GitHub 的用戶名,GitHub 的密碼。
部署成功最后后會顯示:

INFO  Deploy done: git  #?成功

Github 上這個倉庫的頁面就有內容了。

??復制倉庫地址

??粘貼到瀏覽器地址欄,就可以訪問博客了

補充:后來我又把GitHub用戶名換了,本地預覽可以,但是傳不上 GitHub 了!!重新生成博客不行。后來全部刪除重裝,中間安裝 Hexo 的時候有提示無權限。然后也在 GitHub 添加了公鑰。

4. 添加公鑰

重新開下終端,回到默認位置

ssh-keygen -t rsa -C 你的郵箱號@sina.com  #??輸入生成公鑰指令
Enter file in which to save the key (/Users/Banli/.ssh/id_rsa): #直接確定
Enter passphrase (empty for no passphrase): #??輸入電腦密碼
Enter same passphrase again:  #??確認密碼

這時候會出來一串東西(不是公鑰):

Your identification has been saved in /Users/Banli/.ssh/id_rsa.
Your public key has been saved in /Users/Banli/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:4EuZ******************ig banli1001@sina.com
The key's randomart image is:
+---[RSA 2048]----+
|           *******|
|              ****|
+----[SHA256]-----+

提示你公鑰生成好了存在「/Users/Banli/.ssh/id_rsa.」這里,電腦里沒找到這個文件夾,搜也搜不到...而且這串碼還不是公鑰!

這里我進行了個操作,不知道到是不是必要的~

LBLCP:~ Banli$ cd ~/.ssh #輸入了進入~/.ssh的指令
LBLCP:.ssh Banli$ pwd #查看位置
/Users/Banli/.ssh #變成了在「/.ssh」文件夾里

接下來查看真正的公鑰:

cat id_rsa.pub  #??查看公鑰指令

后出來的才是公鑰,大概長這樣:

ssh-rsa AAAA***好幾行字母*** banli1001@sina.com

從開頭的「ssh-rsa」復制到郵箱號收尾。

位置:GitHub 》個人設置 Settings 》SHH and GPS Keys
點擊「New SSH key」,添加鑰匙;
標題空著,把剛剛復制的公鑰粘貼到 Key 那欄里。

然后上傳。


參考

  1. Bilibili 手把手教你從0開始搭建自己的個人博客 |無坑版視頻教程| hexo

  2. CSDN Hexo搭建GitHub博客--初級(一)

3.CSDN 查看本機ssh公鑰,生成公鑰


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容