搭建Hexo博客+部署到Github

前言

本文章靈感來源於B站up主codesheep,以及視頻評論區裏的課代表的博客。爲了學習總結經驗,經過一定修改和總結後寫下了這篇文章,感謝他們的指導。


以下操作均在windows10 64位 系統下演示

一、準備工作(安裝Node.js 和 Git)


1、安裝Node.js

進入 Node.js 官網

https://node.js.org/

點擊下載左邊的較穩定版本。下載完之後安裝,一直下一步即可。在這裏插入圖片描述

2. 安裝 Git

進入 Git 官網

https://git-scm.com/downloads

在這裏插入圖片描述
在這裏插入圖片描述
也是一樣下載完後安裝,一直下一步就行了。

二、安裝Hexo


首先,創建一個文件夾(這個文件夾將是你的Hexo博客的一些相關文件放置的地方)
然後,打開進入文件夾,點擊右鍵選擇 Git Bash here 相當於從這裏進入終端窗口

分別輸入

node -v
npm -v

查看 node和npm的版本,檢測node是否安裝成功。

在這裏插入圖片描述
接下來,我們要安裝cnpm

在終端窗口輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待片刻,安裝完後輸入 cnpm 進行測試。

然後安裝Hexo

cnpm install -g hexo-cli

輸入 hexo -v 檢驗
在這裏插入圖片描述
最後輸入

hexo init

表示把整個項目建立在當前文件夾中

打開我們剛剛新建立的文件夾,裏面含有以下文件即表示博客搭建成功。
在這裏插入圖片描述

三、運行測試Hexo


1、常用命令

	#三連:
	 hexo clean          
	 hexo g             
	 hexo s
hexo clean 	#清理緩存文件
hexo g     	#生成文件
hexo s     	#運行本地服務器
hexo d     	#推送到服務器

創建文章命令:

hexo n "我的博客文章"

然後就會在文件夾/source/_posts裏生成一個對應的md文件,用文本編輯器打開他就可以寫文章了,注意最好用Markdown格式書寫。

寫完之後在終端窗口輸入一波三連即可。

2、運行博客

hexo s

打開瀏覽器,輸入:localohost:4000

在這裏插入圖片描述

上圖是我個人自己設置過主題後的效果

你們剛搭建完的Hexo博客可能不長這樣,那是Hexo默認給你設置的主題。

四、將Hexo博客部署到Github上


可能大家覺得每次想打開博客都要先打開終端然後輸入hexo s有點麻煩
那麼,部署到Github上後將會舒服很多

具體的如何創建一個Github賬號在這裏就不講了

當然,如果你嫌Github運行慢的話,也可以部署到國內的Coding上(具體你們也可以看這位課代表的博客)Hexo學習(二),在這裏就不演示了

1、創建Github倉庫

先打開Github官網,登錄上我們的賬號,然後創建一個倉庫,這個倉庫將是你在終端把文件推送到Github上儲存文件的地方。

注意:這裏的倉庫名一定要是 你的Github帳戶名.github.io
這也是你以後打開博客的網址
在這裏插入圖片描述

2、推送到服務器

首先,我們回到我們之前創建的那個放置博客的文件夾,再次進入終端。
然後輸入 cnpm install --save hexo-deployer-git 等待安裝。

然後我們回到那個文件夾,用記事本或者其他文本編輯器打開 _config.yml 文件。
拉到下面會看見 deploy:

接下來我們輸入以下信息並保存:在這裏插入圖片描述
最後我們返回終端窗口
輸入以下代碼:

git config --global user.name "你的Github用戶名"
git config --global user.email "你註冊Github時用的郵箱 xxx@xxx"

最後我們輸入:

hexo d

然後會跳出登陸Github賬號密碼的窗口,輸入完之後等待片刻。

這樣就大功告成啦!!!!
打開瀏覽器輸入你的Github倉庫名(xxx.github.io)就能打開博客了!!!


這是我第一次寫博客,有點不順手,沒經驗,有什麼不合理的地方請大家多多包涵。

往後我會不定期寫一些總結學習知識點的文章與大家一起學習,至於Hexo主題的優化方面,我自己也在斟酌,往後可能也會寫一下經驗。

謝謝觀看

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章