Windows下使用Hexo+GithubPage搭建博客

安裝Node.js  
下載地址:  https://nodejs.org/en/
去 NodeJs 官網下載相應版本,進行安裝便可。 
能夠經過node -v的命令來測試NodeJS是否安裝成功 
這裏寫圖片描述
  1. 安裝Git 
    下載地址:https://git-scm.com/
    去 Git 官網下載相應版本,進行安裝便可。 
    選擇使用git命令 
    我選擇在第二個在系統的cmd也可使用 
    這裏寫圖片描述 
    這裏寫圖片描述 
    這裏寫圖片描述 
    這裏寫圖片描述 
    能夠經過git –version的命令來測試git是否安裝成功 
    這裏寫圖片描述
  2. 註冊Github帳號 
    去 Github 官網進行註冊便可。 
    註冊完以後記得添加 SSH Key。 
    這個 SSH Key是一個認證,讓github識別綁定這臺機器,容許這臺機器提交。執行以下命令:
 
 
 
 
  • 1
cd ~/. ssh

這裏寫圖片描述 
~這個符號,表示在用戶目錄下 
執行代碼若是提示:No such file or directory 說明你是第一次使用git。 
下面就說下怎麼配置SSH Key。 
生產新的SSH Key配置 
在Git Bash執行代碼:html

 
 
 
 
  • 1
ssh-keygen -t rsa -C "你的GitHub帳戶"

記得修改爲你本身郵箱地址。 
成功後會生成兩個文件id_rsa 以及id_rsa.pub。如圖, 
這裏寫圖片描述 
添加SSH Key到github 
這倆個文章在剛纔用戶的.ssh目錄下 
這裏寫圖片描述 
以後在github添加SSH Key,在任意界面右上角,點擊你的頭像,選擇Settings-> SSH keys->New SSH key 
這裏寫圖片描述 
添加成功!node

搭建博客

  1. 安裝Hexo 
    在本地新建一個Blog文件夾,文件右鍵,選擇Git Bash。 
    這裏寫圖片描述 
    輸入指令安裝hexo: 
    npm install -g hexo 
    這裏寫圖片描述 
    等安裝完畢,經過輸入hexo的命令來測試Hexo是否安裝成功,成功以下圖展現: 
    這裏寫圖片描述 
    接着初始化Hexo: 
    hexo init hexo 
    這裏寫圖片描述 
    初始化成功會顯示Start blogging with Hexo! 
    這裏寫圖片描述
    這時在你剛纔建立的Blog裏面會多出一個hexo文件 
    這裏寫圖片描述 
    進入到hexo目錄,輸入指令npm install,安裝依賴文件以及部署造成文件 
    打開hexo目錄
 
 
 
 
  • 1
cd hexo

安裝依賴文件git

 
 
 
 
  • 1
npm install

部署造成文件github

 
 
 
 
  • 1
hexo generate

這裏寫圖片描述 
最後剩下運行server 
跑起hexo服務npm

 
 
 
 
  • 1
hexo server

這裏寫圖片描述 
這時提示Hexo is running at http://loalhost:4000/
接着咱們打開瀏覽器,輸入http://localhost:4000/即可看到默認的博客,如圖。 
這裏寫圖片描述
到這裏,hexo已經安裝完畢。瀏覽器

配置githubPage

登陸Github,點擊」New repository」,新建一個版本庫 
輸入倉庫名:你的Github名稱.github.io。而後點擊Create repository。 
這裏寫圖片描述 
注意:這邊的建立名字,必定要用的github的用戶名,否則顯示不出來,由於githubPage只能你的用戶名。 
啓用GitHub Page 
點擊右邊的「Setting」菜單進入設置,點擊」Launch automatic page generator」 
這裏寫圖片描述 
進入以後點擊底部的」Continue to layouts」這裏寫圖片描述 
以後選擇一個隨意模版,點擊」Publish page」,發佈github默認生成的一個靜態站點 
這裏寫圖片描述
試着打開本身在github的靜態網址,個人http://wx-jin.github.io,你會發現,打開是你本身剛纔選擇靜態站點模版。bash

將本地hexo項目託管到Github

打開修改hexo目錄下配置文件_config.yml。 
這裏寫圖片描述 
編輯最後面的deploy屬性,加入代碼:hexo

 
 
 
 
  • 1
  • 2
  • 3
type: git repository: git@github.com:WX-JIN/WX-JIN.github.io.git branch: master

type使用是git。 
repository屬性改爲你的剛纔建立倉庫git地址。 
分支branch填寫master。app

這邊說下本地網站配置文件 _config.ymlssh

網站的配置文件,你能夠在這裏配置一些基本信息,這裏列舉部分關鍵配置:

 
 
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Dududzai’s Blog #網站的標題 subtitle: life is struggle #副標題 description: life is struggle #描述 author: examble #做者信息 avatar: /images/avatar.png #頭像,圖片位置在相應主題目錄下的images language: zh-Hans #中文簡體 email: 85268837@qq.com timezone: # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next #配置主題,這裏使用next主題 stylus: compress: true #自適應佈局 # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git #部署環境,基於hexo+githubpage,因此這裏使用git。注意:不一樣版本的hexo,type有可能不一樣,3.x之後應使用git,具體參看官方文檔 repository: git@github.com:username/username.github.io.git #git倉庫地址,替換成你的username便可,其餘保持不變,後面會提到如何建立git倉庫 branch: master

根據本身須要修改! 
安裝hexo-deployer-git插件

 
 
 
 
  • 1
cnpm install hexo-deployer-git --save

這裏寫圖片描述

部署你本地的主題到github上 
代碼以下,每次修改本地主題,都須要執行如下代碼

 
 
 
 
  • 1
  • 2
  • 3
hexo clean hexo generator #簡寫 hexo g hexo deploy #簡寫 hexo d

這裏寫圖片描述 
這裏寫圖片描述 
這裏寫圖片描述 
最後看下,部署到github上的效果! 
這裏寫圖片描述

相關文章
相關標籤/搜索