建立Hexo个人博客
使用hexo和github.pages搭建博客,主题为zhaoo
文章部分功能是主题没更新之前写的,随着主题更新,功能也越来越完善,且设置起来更方便。作为记录,已有的内容不再修改,具体配置情况请根据主题而定。更多内容可以参考zhaoo主题作者博客主页:zhaoo
准备工作
github创建名为username.github.io的repository
安装git
安装Node.js
安装Hexo
新建文件夹blog,存放博客的所有内容
1 |
|
生成的几个文件:
- node_modules:依赖包
- public:存放生成的页面
- scaffolds:生成文章的一些模版
- source:用来存放文章
- themes:主题
- _config.yml: 配置文件
1 |
|
然后在浏览器输入localhost:4000即可看到生成的博客。
更换主题
hexo默认主题是landscape,可以自由更换主题:
1 |
|
根据需求创建tags、about、categories页面:
1 |
|
以上代码会在source
的对应文件夹下生成index.md文件,可根据需求配置页面:
1 |
|
layout(布局)有三种:post(文章)、draft(草稿)、page(页面),默认是post
然后根据主题配置说明,配置主题的配置文件themes/zhaoo/_config.yml
关联git库
1 |
|
修改blog/_config.yml
配置文件:
1 |
|
上述代码表示部署到指定的库中,并且默认部署到分支master。
部署的机制是将本地生成的.deploy_git
文件夹里的文件,上传到远程库,并不包括配置文件和主题文件。
为了方便多终端工作,建议每次写完文章,除了deploy操作以外,将源代码也push到远程仓库保存。新建一个分支,将源文件push到这个分支里面,这样在另一台机器上只需要clone远程库,安装必要的文件就可以了。
新建文章
1 |
|
在scaffolds
文件夹中,有三种默认布局新建时的模版,可以自定义新建文件时的格式。
tags和categories属性的值可以用列表,表示多个标签/类别。
数学公式渲染
主题更新添加了公式渲染配置的说明,方法简单快捷,可以参考。本节内容作为踩坑记录。
hexo默认的Markdown渲染器是hexo-renderer-marked,会先按照Markdown语法解析,然后才是LaTex,所以会有冲突。试了网上各种解决方法,终于遇到一个有效的方法:hexo无法显示公式的问题-DGZ’s Blog
重装插件
首先,只保留一个公式渲染器,这里保留kramed渲染器。
1 |
|
修改js文件
打开bolg/node_modules/hexo-renderer-kramed/lib/renderer.js
,将:
1 |
|
修改为:
1 |
|
安装mathjax插件
1 |
|
修改html文件
打开blog/node_modules/hexo-renderer-mathjax/mathjax.html,将:
1 |
|
修改为:
1 |
|
激活插件
在使用公式的md文件添加属性:
1 |
|
部署
如果是第一次修改,修改完以后需要重新启动服务:
1 |
|
图床
众所周知,github是万能的,使用PigGo和Github搭建个人图床,参考PigGo官方文档
新建github项目
新建github项目用来存放图片,并生成token:
1 |
|
配置PicGo
1
然后点击确定,并设置为默认图床。
自定义域名可以按照图中的设置,也可以使用别的自定义域名。第二种域名方式就是使用CDN加速的方法,CDN(Content Delivery Network)是指内容分发网络,也称为内容传送网络。
jsDelivr是一种免费的CDN加速产品,可以加速Github和NPM的资源,其中使用jsDelivr的方法访问Github资源只需要将链接改为以下格式:
1 |
|
jsDelivr的更多用法可以参考官方文档
使用jsDelivr加速的自定义域名填写内容如下:
2
上传图片
将图片拖入上传区,上传成功后会自动在剪切板生成图片链接。
其他设置
其他参数设置可根据个人喜好进行设置:
3
图片上传失败问题
由于某些原因,github当作图库不是很稳定,时好时坏也是正常现象。
参考PicGo踩坑记
- 首先检查设置的仓库名是否正确,仓库名不可包含空格,且不要出现奇怪的符号
- 上传的图片名字不要有奇怪符号
- 间歇性上传失败的话,可以将server的开关状态切换一下
另外,有条件的可以使用全局代理:airplane:
其他
主题的其他设置可以参考zhaoo主题文档,这里只记录一部分
访问量统计
主题默认使用的是leancloud,这里的统计是每篇文章的访问量,zhaoo主题支持leancloud,只需要按要求填写即可:
1 |
|
如果想要设置本地访问不统计次数,则可以在\themes\zhaoo\layout\_partial\common\visitors.ejs
中,修改以下内容:
1 |
|
如果想对网站访问量统计,可以使用卜蒜子,在themes\zhaoo\layout\_partial\footer.ejs
中合适的位置加入以下代码,其中的字体显示内容和风格可以自由设置:
1 |
|
评论功能
使用Valine,前提是主题支持:
1 |
|
侧边目录
zhaoo没有支持侧边目录,需要自己添加代码,使用hexo官方的toc函数。(2020.11.16主题更新,已经支持)
在themes\zhaoo\layout\_partial\post\article.ejs
中,最前面加以下代码:
1 |
|
然后在themes\zhaoo\source\css\_partial\post.styl
中,最前面添加以下代码:
1 |
|
SEO优化
搜索引擎优化(Search Engine Optimization,SEO),是一种通过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式。
Github.pages屏蔽了百度的爬虫请求,配置较麻烦,这里仅以Google为例,使用Google Search Console,以下过程参考:hexo博客搭建(五) SEO优化
1 |
|
未完待续……
参考教程
- 本文作者:Kangshitao
- 本文链接:http://kangshitao.github.io/2020/10/25/BlogCreatProcess/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!