hexo博客配置记录

刚开始接触博客源自GitHub中的jekyll博客模板,后来发现hexo体验不错,且国内的coding.net支持自定义域名和托管hexo、hugo、jekyll代码。

原理在于平台在用户提交代码后自动执行hexo generate,生成静态文件并部署,而GitHub则需要将本地生成好的静态文件推送至仓库(嫌麻烦)。

准备

还需要准备好:

git bash窗口

初始化hexo网站

按照官网步骤来便好了。在窗口初始化hexo网站:

1
2
3
4
5
zhangc@DESKTOP-DOAPQKF MINGW64 /d/workstations/blog.youdef.com (master)
$ hexo init blog #在当前目录下创建名为blog的目录,并初始化

$ cd blog/
$ npm install #或者自己配置的cnpm

hexo主题

https://hexo.io/plugins/ 提供有丰富的主题,或者在GitHub中检索hexo theme第一页基本是最流行的。

下面以Next主题为例

hexo插件

分别运行以下命令,安装RSS、搜索和PV功能的依赖,结果将体现在根目录下package.json中:

1
2
3
4
5
npm hexo-generator-feed --save

npm install hexo-generator-searchdb --save

npm install hexo-related-popular-posts --save

曾经在调试时多次出现报错,都是跟主题要求的插件没有安装有关!**

如某次CSS样式文件未加载:

package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

文件中上标号^是定义了向后(新)兼容依赖。

在本地尝试更新文件成功,恢复本地预览网站:npm install

安装主题

在theme目录下创建next目录,并克隆主题:

1
2
3
git clone --depth=1 https://github.com/theme-next/hexo-theme-next themes/next
#https://github.com/ppoffice/hexo-theme-icarus.git
#该主题也不错

注:由于大陆网速较慢,且clone 默认会下载完整的历史版本,这里设置只克隆最新版本的代码,即depth为1。实测代码体积大幅减少。(浅克隆)

安装完毕后,需要在根目录下打开_config.yml,指定hexo网站的主题:

1
2
# Extensions
theme: next #next 为theme目录下主题对应的目录

本地预览网站

1
2
3
4
5
6
7
# 在git窗口下键入hexo命令
hexo server

#或者hexo server --debug
#其他hexo命令
hexo clean
hexo new post article-name

本地预览地址 http://localhost:4000/

git常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
git init
git config --global user.name '你的名字'
git config --global user.email '登录邮箱'

git remote add origin https://xxxx.git #这里origin是源的意思,在push时加上,表示指定push到该源的仓库上


git add 指定的file #.表示全部
git commit -m "文字说明"
git push -u origin master #推送到远端仓库

git status
git log
git reset --hard xxxxxx #
git push -u origin HEAD --force

#有时需要生成密钥,配置完毕后在GitHub或coding.net上添加
#生成文件为C:\Users\xxx你电脑名\.ssh目录下的id-rsa.pub文件
ssh-keygen -t rsa -C '登录邮箱'

如有需要:本地代理git

1
2
3
4
5
6
# 代理设置
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'
# 取消代理
git config --global --unset https.proxy 'socks5://127.0.0.1:1080'
git config --global --unset http.proxy 'socks5://127.0.0.1:1080'

最后:这次记录主要为备忘,结合本人也踩过多次坑,也似乎缺点什么,。如果看完网上其他诸多复制粘贴的教程,该文档仍给您启示最好不过了。

修改主题

自定义CSS样式

先得在next.yml配置文件中中开启修改,去掉前面的#注释即可:

1
2
custom_file_path:
style: source/_data/styles.styl

然后再对应目录下创建文件,并写入样式:

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
28
29
30
31
32
33
body {
background:url(https://mingshan.fun/images/background_25.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
.headband, .site-brand-container {
background: #fc6423 !important;
}
:root {
--body-bg-color: #eee;
--content-bg-color: #fff;
--card-bg-color: #f5f5f5;
--text-color: #555;
--blockquote-color: #666;
--link-color: #555;
--link-hover-color: #0684bd;
--brand-color: #fff;
--brand-hover-color: #fff;
--table-row-odd-bg-color: #f9f9f9;
--table-row-hover-bg-color: #f5f5f5;
--menu-item-bg-color: #f5f5f5;
--btn-default-bg: #fff;
--btn-default-color: #555;
--btn-default-border-color: #555;
--btn-default-hover-bg: #222;
--btn-default-hover-color: #fff;
--btn-default-hover-border-color: #222;
--highlight-background: #f0f0f0;
--highlight-foreground: #444;
--highlight-gutter-background: #dedede;
--highlight-gutter-foreground: #555;
}

该样式参考自米米的博客,body{}部分参考自明月逐人归 两者不可兼得。