github+hexo制作個(gè)人博客


title: github+hexo制作個(gè)人博客
categories: study
tags:

  • github
  • hexo
    description: 自己用github+hexo搭建個(gè)人博客,記錄一下,互相學(xué)習(xí)
    date: 2017-05-29 20:24:59

通過github的代碼托管和hexo搭建個(gè)人博客

前期準(zhǔn)備

首先要把準(zhǔn)備工作做好,前期的賬號(hào)注冊(cè)、軟件安裝、環(huán)境搭建

注冊(cè)github賬號(hào)

直接到github官網(wǎng)注冊(cè)賬號(hào)即可

github Page

new repository,Repository name填寫的和你的用戶名相同,我覺得這個(gè)應(yīng)該就是你的github Page了,我生成的鏈接 https://heartsxin.github.io/

在此之前你要現(xiàn)在本地安裝了git,我現(xiàn)在也不是很會(huì)用git,初學(xué)者而已,按照教程一步步做的。安裝很簡單用起來有點(diǎn)不會(huì),畢竟都是英語的,對(duì)我來說很吃力。

這是本地安裝的git和github桌面版

git

這位大神已經(jīng)做的很不錯(cuò),我就是在他的廖雪峰博客才懂了一些git的用法、

安裝Hexo

Hexo是基于Nodejs的靜態(tài)博客系統(tǒng),通過MackDowd編輯的.md文件會(huì)生成靜態(tài)的html文件,所以在安裝Hexo之前需要安裝Nodejs

安裝Node.js

安裝Node.js

到官網(wǎng)下載Node.js官網(wǎng)直接下載,按照步驟直接安裝即可。

Node.js環(huán)境配置

說明:這里的環(huán)境配置主要配置的是npm安裝的全局模塊所在的路徑,以及緩存cache的路徑,之所以要配置,是因?yàn)橐院笤趫?zhí)行類似:npm install express [-g] (后面的可選參數(shù)-g,g代表global全局安裝的意思)的安裝語句時(shí),會(huì)將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中,占C盤空間。
例如:我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中,則在我安裝的文件夾【D:\Develop\nodejs】下創(chuàng)建兩個(gè)文件夾【node_global】及【node_cache】如下圖:

文件夾新建

新建文件夾之后在CMD窗口輸入如下命令:

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

輸入代碼后在新建的文件夾里面會(huì)生成相應(yīng)的文件后文件夾,然后配置相應(yīng)的環(huán)境變量,如下圖所示:


環(huán)境配置01

enter image description here

配置完后,安裝個(gè)module測(cè)試下,我們就安裝最常用的express模塊,打開cmd窗口,
輸入如下命令進(jìn)行模塊的全局安裝:

   npm install express -g     # -g是全局安裝的意思
環(huán)境配置02

通過npm安裝模塊時(shí)都是去國外的鏡像下載的,有的時(shí)候由于網(wǎng)絡(luò)原因會(huì)導(dǎo)致安裝模塊失敗,靜靜等待吧...

安裝Hexo

搭建好以上環(huán)境之后打開Git Bssh然后輸入命令

安裝Hexo

可以先去Hexo官網(wǎng)去看看,下面的命令就是安裝Hexo

npm install hexo-cli -g #安裝hexo

初始化

現(xiàn)在新建你博客要存儲(chǔ)的文件夾,如:“某位置/blog”,然后在該文件夾下右擊鼠標(biāo),選擇Git Bash Here,然后輸入如下命令:

初始化
   hexo init

然后輸入

 npm install
生成靜態(tài)頁面

輸入以下代碼生成靜態(tài)html代碼,它是“hexo generate”的簡寫

hexo g 

本地啟動(dòng)

輸入以下代碼本地啟動(dòng)服務(wù),它是”hexo server“ 的簡寫

    hexo s

此時(shí)個(gè)人博客已經(jīng)初步建成,在瀏覽器輸入 https://localhost:4000即可訪問你的博客了,試試看...
它可能是這個(gè)樣子,如下:

enter image description here

這樣已經(jīng)初步完成個(gè)人博客的初步搭建

上傳至github

修改博客根目錄下的_config.yml,修改 Deployment部分。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
# ssh://git@github.com/wenjunoy/wenjunoy.github.io
deploy: 
type: git
repo: ssh://git@github.com/wenjunoy/wenjunoy.github.io ##這個(gè)是你的倉庫地址
branch: master

部署

 hexo d

成功之后,在瀏覽器中輸入https://username.github.io/即可訪問你的個(gè)人博客了,username是你的github用戶名。

總結(jié)

這樣就可以擁有一個(gè)你的個(gè)人博客了,博客可以在后續(xù)學(xué)習(xí)中慢慢的完善。

總結(jié)

也附上我博客的鏈接,歡迎大家多多訪問!
https://heartsxin.github.io/
http://heartsxin.coding.me/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容