使用hexo搭建github個人博客網站


搭建步驟:

1>Mac或win電腦一台,本文以mac為例。

2>下載安裝GitNode

3>安裝hexo

4>注冊登錄GitHub,創建一個倉庫,庫名格式為:GitHub用戶名.github.io

5>購買域名,本文以阿里雲為例,解析域名。

6>博客主題,標題,界面設置


安裝Git

下載地址:https://git-scm.com/download/

這里寫圖片描述

安裝Node

下載地址:http://nodejs.cn/download/

這里寫圖片描述

驗證是否安裝成功:

這里寫圖片描述

安裝hexo

//安裝hexo
&:npm install hexo-cli -g //創建本地博客,“GitHub用戶名.github.io”建議和GieHub倉庫名一致 hexo init GitHub用戶名.github.io 例如: &:hexo init 1170197998.github.io //進入到安裝目錄 &:cd 1170197998.github.io/ //安裝npm &:npm install //啟動服務 &;hexo server

 

至此,在瀏覽器地址欄鍵入http://localhost:4000/,即可訪問本地博客


安裝hexo-server

npm install hexo-server --save npm install hexo --save

登錄GitHub創建一個名字為1170197998.github.io的倉庫,

這里寫圖片描述

打開本地博客目錄1170197998.github.io中的_config.yml,加入倉庫地址,如下:

deploy: type: git repo: https://github.com/1170197998/1170197998.github.io.git branch: master
  • 1
  • 2
  • 3

生成的靜態文件 (public文件夾),部署服務

//生成靜態文件 &:hexo generate //部署服務 &:hexo deploy
  • 1

把這個文件夾里面的內容上傳到剛剛新建的倉庫里面

這里寫圖片描述

此時訪問1170197998.github.io可以訪問博客


購買域名,綁定域名,登錄阿里雲控制台進行域名解析操作如下

這里寫圖片描述
這里寫圖片描述

查看github空間服務IP

ping 1170197998.github.io
  • 1
  • 1

這里寫圖片描述

source文件下新建一個文件名為CNAME文件,不要有后綴,輸入域名,保存關閉

這里寫圖片描述

然后執行hexo g,hexo d進行生成和部署。此時在瀏覽地址欄鍵入域名就可以打開博客了

這里寫圖片描述

博客基本操作

1>切換博客主題

博客的主題都保存在了themes文件夾下,默認landscape主題,想切換別的主題,終端進入到該文件夾下,進行克隆即可,比如克隆next主題:

&:git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 1
  • 1

然后到_config.yml中把theme的值由默認的landscape修改為next

這里寫圖片描述

然后執行hexo g,hexo d進行生成和部署命令。此時再登錄域名,主題已經切換。

2>設置博客標題、作者

打開_config.yml,對應填寫title,auther等參數,修改了url參數對應的值以后,即使在地址欄輸入了1170197998.github.io,網頁加載完后會變為url的值,然后執行hexo g,hexo d進行生成和部署命令。


hexo常用命令

npm install hexo -g #安裝 npm update hexo -g #升級 hexo init #初始化 簡寫 hexo n "我的博客" == hexo new "我的博客" #新建文章 hexo p == hexo publish hexo g == hexo generate#生成 hexo s == hexo server #啟動服務預覽 hexo d == hexo deploy#部署 服務器 hexo server 會監視文件變動並自動更新,無須重啟服務器。 hexo server -s #靜態模式 hexo server -p 5000 #更改端口 hexo server -i 192.168.1.1 #自定義 IP hexo clean #清除緩存 網頁正常情況下可以忽略此條命令,清除了db_json文件和public文件夾 hexo g #生成靜態網頁 hexo d #開始部署 監視文件變動 hexo generate #使用 Hexo 生成靜態文件快速而且簡單 hexo generate --watch #監視文件變動 完成后部署 hexo generate --deploy hexo deploy --generate or: hexo deploy -g hexo server -g 草稿 hexo publish [layout] <title>

 


可能會遇到的問題:

1>出現:

FATAL Cannot find module '/Users/xxxxxxx/GitHubBlog/1170197998.github.io/node_modules/hexo-renderer-marked' Error: Cannot find module '/Users/xxxxxxx/GitHubBlog/1170197998.github.io/node_modules/hexo-renderer-marked' at Function.Module._resolveFilename (module.js:485:15) at Function.resolve (internal/module.js:18:19)

 

這里寫圖片描述

可能是安裝hexo的時候沒有執行npm install,執行如下命令:

&:rm -rf node_modules
&:npm install
  • 1
  • 2
  • 1
  • 2

2>ERROR Deployer not found : github的問題解決辦法

先執行:
npm install hexo-deployer-git --save 然后執行: hexo g hexo d 
  • 1
  • 2

3>發布博客后設置分類和標簽

在文章的頂部tags和categories中這樣寫所屬分類和對應的標簽,例如:

tags: [iOS,鏈式編程和函數式編程] categories: [iOS_Objective-C] 備注:單個分類或者標簽不需要用中括號[],多個的時候用[]括起來,英文逗號隔開。

 

4>加入搜索功能

使用的是Local Search, 首先安裝hexo-generator-searchdb <要在當前博客目錄下>

npm install hexo-generator-searchdb --save
  • 1
  • 1

然后在博客目錄下的_config.xml里面加入以下字段

search:
  path: search.xml
  field: post format: html limit: 10000

 

同時要把主題目錄下的_config.xml文件中的local_searchenable設置為true

local_search:
  enable: true
  • 1
  • 2
  • 1
  • 2

這里寫圖片描述

5>加入百度統計功能

注冊登錄百度統計,把統計腳本id復制到主題next下的配置文件_config.xml中的baidu_analytics字段后
這里寫圖片描述

6>加入評論功能

注冊登錄網易雲跟帖,將yunTieProductKey放到主題next下的配置文件_config.xml中的gentie_productKey字段后
這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM