手把手教你使用Hexo+GitHub搭建本身的我的博客網站

安裝nodejs環境

這個直接搜索安裝便可，安裝完成以後，經過以下命令檢測環境變量是否安裝成功：java

λ node -v
# 輸出版本號
v12.13.1
複製代碼

正確輸入版本號便可。node

安裝cnpm

cnpm是淘寶鏡像，能夠加快依賴的安裝速度git

npm install cnpm -g --registry=https://registry.npm.taobao.org
 # 輸出
C:\Users\xxxxx\AppData\Roaming\npm\cnpm -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
added 680 packages from 933 contributors in 24.882s
複製代碼

其餘

Git、GitHub就很少說了github

安裝 Hexo

cnpm install -g hexo-cli
複製代碼

能夠經過以下命令檢查是否安裝成功shell

λ hexo -v

"node"  "C:\Users\xxxxxx\AppData\Roaming\npm\\node_modules\hexo-cli\bin\hexo" -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.13.1
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
複製代碼

建立本地博客

hexo init gitpage
複製代碼

出現下面提示表示初始化成功了npm

執行完以後目錄內容api

進入gitpage目錄，執行以下命令瀏覽器

cd gitpage
cnpm install
複製代碼

這樣，hexo就安裝完成了。bash

Hexo 基本用法

啓動

hexo server 
# or
hexo s
複製代碼

經過瀏覽器訪問http://localhost:4000便可查看效果：服務器

新建博客

hexo new "My First Post"
複製代碼

在source_posts 路徑下，會有一個 My-First-Post.md 的文件。編輯這個文件，而後保存。

回到命令行，輸入

hexo g

複製代碼

建立靜態文件

啓動服務器，查看效果

hexo server

複製代碼

啓動以後，便可看到本身新建立的這篇文章。

部署到GitHub

首先在GitHub建立一個倉庫，倉庫名叫"<username>.github.io"。複製倉庫地址。打開gitpage目錄下的_config.yml 文件，找到 #Deployment，填入如下內容：

deploy:  
	  type: git  
	  repository: https://github.com/Happy4Java/happy4java.github.io.git
	  branch: master

複製代碼

保存，而後在命令行執行以下語句：

cnpm install hexo-deployer-git --save

複製代碼

執行完以後，便可執行部署命令：

hexo d

複製代碼

可能須要輸入github的帳號密碼，輸入以後便可部署完成。

查看效果

訪問https://happy4java.github.io便可查看到效果。

使用 Next 主題

進入gitpage文件夾下的themes文件夾，執行

git clone https://github.com/theme-next/hexo-theme-next.git

複製代碼

這樣，該主題的文件就所有克隆到 gitpage\themes\next 下面。

修改博客配置文件

打開 _config.yml配置文件
找到 theme:
把 Hexo 默認的 lanscape 修改爲 hexo-theme-next 。
找到 # Site，添加博客名稱，做者名字等。
在 language 後面填入 en 或者 zh-CN，選擇英文或者中文。
找到 # URL, 填入 url。好比 url: https://happy4java.github.io

從新生成部署

hexo g
hexo d

複製代碼

訪問https://happy4java.github.io便可查看效果

原創聲明

本文爲【Happyjava】的原創，歡迎轉載，但需註明出處