hexo+github+material博客搭建
此前是使用typecho模板+阿里云服务器搭建的博客,由于某次忘记续费导致网站关闭,临时联系客服续费备份了网站和数据库文件。
考虑到后续的一些开销,于是转战github网站免费托管。而typecho是动态渲染的,不适用github的托管服务。因此网站框架也改用为hexo。
hexo 是一个静态博客生成工具,具备编译 Markdown、拼接主题模板、生成 HTML、上传 Git 或 FTP 等基本功能。
建站是主要参考了hexo官方文档参考链接和U2647’s blog(参考链接)
环境准备
Nodejs 下载地址
Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本
检查是否安装成功
PS C:\Windows\System32> node -v v16.14.2 PS C:\Windows\System32> npm -v 8.5.0
Git 下载地址
检查是否安装成功PS C:\Windows\System32> git --version git version 2.35.1.windows.
博客搭建
hexo部署
建议首先阅读hexo官方文档
安装hexo
将hexo的功能封装为命令,提供给用户通过 hexo server / hexo deploy 等命令调用的模块,就是 hexo-cli(hexo-Command Line Interface)。
终端输入:
npm install -g hexo-cli
博客初始化
新建一个用于存放hexo博客的空文件夹,进入该文件夹,终端输入:
hexo init
该命令执行相当于
- Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录(指定文件夹时,则到指定目录)。
- 下载依赖。
此时,博客文件夹的文件结构如下:
. ├── _config.yml 网站的配置信息 ├── package.json 应用程序的信息 ├── scaffolds 文章模版 ├── source 用户资源 | └── _posts * ├── themes 主题 ├── node_modules ├── .github ├── .gitignore ├── _config.landscape.yml └── yarn.lock
*除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
接着,生成静态文件:
hexo generate
缩写:hexo g
然后,启动服务器(默认情况下,访问网址为: http://localhost:4000/ ):
hexo server
缩写:hexo s
访问网站查看博客部署情况,页面显示如下,则成功:
主题配置
hexo安装时默认使用landscape主题,我使用的是material主题,虽然主题最近的更新时间都是好几年前,但是还是能用用的!
下载material主题
在博客目录,终端输入:
cd themes git clone git@github.com:iblh/hexo-theme-material.git material
修改网站配置
修改博客主目录下的网站配置文件_config.yml中的theme值,将值修改为安装的主题文件夹名称。(网站配置文件每项的含义可以仔细阅读注释或者查看官方文档)
theme: material
主题配置
首先将theme/material 目录下_config.template.yml 重命名为 _config.yml
阅读material主题的文档链接,自定义主题配置项。
这里分享常用的配置:
- 侧边栏
# Sidebar Customize sidebar: dropdown: Email Me: link: "mailto: 你的邮箱" icon: email homepage: use: true icon: home divider: false archives: use: true icon: inbox divider: false categories: use: true icon: chrome_reader_mode divider: true pages: 标签云: link: "/tags" icon: cloud divider: false 时间轴: link: "/timeline" icon: timeline divider: true 友链: link: "/links" icon: links divider: false 关于: name: 关于 link: "/about" icon: person divider: true article_num: use: true divider: false footer: divider: true theme: false support: false feedback: false material: false
- 侧边栏
提交部署
安装部署插件
git类型
终端输入:npm install hexo-deployer-git --save
对应的网站配置项
deploy: type: git repo: <repository url> branch: [branch] message: [message]
仓库配置
配置仓库的部署方式、仓库地址和分支名称,这里选择github和coding作为托管。
deploy: - type: git repository: github: git@github.com:xxx.git,main coding: git@e.coding.net:xxx,master
网站部署
在博客主目录下,终端输入:
hexo d -g -g, --generate 部署之前预先生成静态文件
执行
hexo deploy
时,Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容
一些问题
material主题,主页的分页不显示icon,显示源代码
修复:在material主题文件夹的layout目录下,在index.ejs中的分页代码新增
escape:false
<%- paginator({ prev_text: __('<button aria-label="Last page" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_back</i></button>'), next_text: __('<button aria-label="Next page" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_forward</i></button>'), space: '', escape: false, }) %>
版权声明:本博客所有文章除特别声明外,均采用 CC BY 4.0许可协议,转载请注明出处
本文链接:https://blog.redamancy.tech/technique/17