1 前言
本文將介紹利用Hexo+gitee搭建個人博客。
原理是將markdown文件生成靜態頁面,發布到gitee上,利用git page服務提供靜態頁面訪問。
這樣的話不需要花費一分錢即可搭建一個自己的博客。
我是博客地址：https://heliufang.gitee.io
2 環境
node.js:因為Hexo是基於node的
git：主要用來推送靜態頁面
Hexo：將markdown文件轉化成靜態頁面
2.1 node安裝
略。網上有很多，安裝也很簡單
可以參考菜鳥教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
2.2 git安裝
略。win、mac各個平台有不同的軟件，我是win平台所以用的是Git-2.13.0-64-bit.exe
參考菜鳥教程：https://www.runoob.com/git/git-install-setup.html
2.3 Hexo安裝
- 全局安裝Hexo
npm install hexo-cli -g
-
在win磁盤上建立一個文件夾,並進入這個文件夾，在這個文件夾中右鍵-git bash here，調出git窗口
-
在黑窗口中運行命令,等待hexo初始化完成
hexo init
- 初始化完成后下載依賴
npm install
npm install --save hexo-renderer-pug
2.3.1 測試
- 清除生成的靜態文件,以后每次發布博客都要執行此操作
hexo clean
- 重新生成靜態文件
hexo g
- 啟動hexo服務,這樣在瀏覽器中訪問localhost:4000就可以看到默認的博客了
hexo s
說明：hexo安裝完成后默認會在 \source_posts\中生成hello-world.md文章,啟動后默認就是看到這個。
3 Hexo配置
根目錄下的_config.yml為全局配置文件，相關的配置可以參考官網：
3.1 網站配置
title: 賀劉芳的網絡日志 #網站大標題
subtitle: '每天多學一點知識,就少寫一行代碼' #網站子標題
description: '賀劉芳的網絡日志' #這個是seo搜索引擎用的,很重要
keywords:
author: 賀劉芳
language: zh-CN #網站語言 zh-CN為中文
timezone: ''
3.2 主題配置
#theme: landscape #默認是 landscape 主題，個人覺得不好看
theme: hexo-theme-stun #我使用的是stun這個主題
注意：這里這個名字如：hexo-theme-stun 要和/themes/下的主題文件夾的名稱對應
3.3 寫作圖片配置
- 安裝圖片插件
npm install hexo-asset-image --save
- 修改
_config.yml
post_asset_folder: true # 將這個改為true默認是false
- 打開
/node_modules/hexo-asset-image/index.js修改內容如下
'use strict';
var cheerio = require('cheerio');
// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);
var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];
var $ = cheerio.load(data[key], {
ignoreWhitespace: false,
xmlMode: false,
lowerCaseTags: false,
decodeEntities: false
});
$('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
!/^\s*\//.test(src)) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
});
data[key] = $.html();
}
}
});
然后就可以插入圖片了。
注意：博客文件也就是md文件放在/source/_posts下
md文件名要和圖片文件夾的名稱一樣而且是同級。
md文件引用圖片：如
4 git配置和推送
-
首先得申請gitee一個賬號
-
然后新增一個空倉庫heliufang,並把倉庫的設為
公開 -
開啟git page服務
- 安裝hexo安裝git依賴,不按照此依賴hexo沒法推送靜態頁面到gitee
npm install hexo-deployer-git --save
- 修改根目錄下的
_config.yml全局配置文件中的url
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://heliufang.gitee.io #注意：這里為啟動git page服務后分配的地址
root: /
permalink: :year/:month/:day/:title/
- 修改根目錄下的
_config.yml全局配置文件中的deploy,配置倉庫地址和分支
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git #這里為git
repo: https://gitee.com/heliufang/heliufang.git #倉庫的地址,注意屬性名稱是repo不是repository
branch: master # 主分支
注意：網絡上很多文檔寫的倉庫地址的屬性名repository,可能是以前的hexo版本配置。這里被坑到了，導致總是推送不上去。然后去看官方文檔才知道倉庫地址的屬性名稱是repo ╮(╯▽╰)╭
- hexo推送到gitee
先重新生成靜態頁面
hexo clean
hexo g
推送,輸入下面的命名,然后會讓你輸入gitee的賬號密碼，完之后不出意外就推送上去了。
hexo d
注意：推送上去之后訪問地址為：啟動git page服務后分配的地址,比如我的https://heliufang.gitee.io
推送后要到gitee的git page頁面點擊更新按鈕,不然看不到最新的頁面！！！
推送后要到gitee的git page頁面點擊更新按鈕,不然看不到最新的頁面！！！
推送后要到gitee的git page頁面點擊更新按鈕,不然看不到最新的頁面！！！
重要的事情說三遍。
5 主題配置
默認的主題不是特別美觀，可以去官網選擇合適的主題，然后下載到本地。
主題官網地址：https://hexo.io/themes/
主題中文官網: https://hexo.bootcss.com/
我用的是這個主題（stun）：https://github.com/liuyib/hexo-theme-stun/
stun主題文檔：https://theme-stun.github.io/docs/zh-CN/guide/primary.html#配置文件
未完...待有時間再完善這一塊
6 寫作
-
可以將寫好的md文件放入/source/_post/下
-
也可以通過命令創建。這樣就會在/source/_post/下創建md文件以及同名的文件夾
hexo new '文章名稱' #注意這里不要加后綴
- 在md文件的頭部加上文章的標題、標簽、分類、時間，這樣發布后就有相關的信息
---
title: 利用Hexo+gitee搭建個人博客
tags:
- 標簽1
- 標簽2
category:
- 分類生活
date: 2020-12-24 17:55:19
---
7 參考文獻
使用Hexo+服務器搭建個人博客： https://www.jianshu.com/p/6ae883f9291c
基於Gitee+Hexo搭建個人博客： https://segmentfault.com/a/1190000018662692
HEXO插入圖片（詳細版）： https://www.jianshu.com/p/f72aaad7b852