记录搭建本博客的过程,以及遇到的一些问题及解决方案
Based on Hexo & Volantis
详细说明参考文档 Hexo & Volantis
搭建环境
安装 Hexo
准备环境:
npm 安装 Hexo:
建立项目
在指定文件夹中新建项目
1 2 3 hexo init MyBlog cd MyBlognpm install
_config.yml
主要配置文件,配置网站参数
scaffolds
模板文件,填写头部 front-matter 内容
source
源文件,包括 about、category 页面、images/ 等资源文件
图片资源引用:/images/XXX
部署到远程仓库
安装模块
1 npm install hexo-deployer-git --save
修改 _config.yml
1 2 3 4 deploy: type: git repository: git@github.com:CS0522/CS0522.github.io.git branch: master
推送
1 hexo clean && hexo g && hexo d
配置网站
仅列出我修改的地方
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 34 35 36 37 38 39 40 41 42 43 44 45 favicon: /images/cicon.ico title: 诚实同学的博客 subtitle: '' description: 'Blog, Computer Science, Learning, Life' keywords: author: Chen Shi language: - zh-CN - en - ja-JP timezone: 'Asia/Shanghai' permalink: :category/:title/ permalink_defaults: lang: zh-CN category: notes post_asset_folder: true marked: enable: true prependRoot: true postAsset: true default_category: notes category_map: 学习笔记: notes 论文随记: learnings 文档小记: docs tag_map: deploy: type: git repository: git@github.com:CS0522/CS0522.github.io.git branch: master
常用命令
建立
1 2 3 hexo init <pro_name> cd <pro_name>npm install
新建文章
1 2 hexo new [page/post/docs] [-p about/me] "<file_name>"
生成、预览
1 2 3 hexo clean hexo g hexo s
部署推送
网站主题
安装 Volantis
修改主题 _config.yml
安装 Volantis
1 npm install hexo-theme-volantis --save
配置主题
原主题配置文件位于 ./node_modules/hexo-theme-volantis/_config.yml
下
项目根目录创建 _config.volantis.yml
以自定义主题。其中的内容可以直接复制 1 中的文件内容,再按需修改
以下仅列出我修改的地方
导航栏
点击查看
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 navbar: visiable: auto logo: img: '' icon: title: '诚实同学<sup style="color:#ff9800">Blog</sup>' menu: - name: 首页 icon: fa-solid fa-house url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 关于我 icon: fa-solid fa-info-circle url: about/ - name: 暗黑模式 icon: fa-solid fa-moon toggle: darkmode search: 随便逛逛...
封面
点击查看
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 cover: height_scheme: full layout_scheme: search title: '欢迎来到诚实同学的博客' subtitle: '"Patience is key in life."' background: /images/91.jpg features: - name: 首页 icon: fa-solid fa-home url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 关于我 icon: fa-solid fa-info-circle url: about/
文章
点击查看
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 article: preview: scheme: landscape pin_icon: auto_title: true auto_excerpt: true hide_excerpt: false line_style: solid author: false readmore: auto body: top_meta: [author , category , date , wordcount ] bottom_meta: [updated , tags , counter , share ] meta_library: author: avatar: /images/userphoto02.png name: Chen Shi url: https://github.com/CS0522/ date: icon: fa-solid fa-calendar-alt title: '发布于:' format: 'll' updated: icon: fa-solid fa-edit title: '最后更新于:' format: 'll' category: icon: fa-solid fa-folder-open counter: icon: fa-solid fa-eye unit: '次浏览' wordcount: icon_wordcount: fa-solid fa-keyboard icon_duration: fa-solid fa-hourglass-half tags: icon: fa-solid fa-hashtag share: - id: qq img: volantis-static/media/org.volantis/logo/128/qq.png - id: qzone img: volantis-static/media/org.volantis/logo/128/qzone.png - id: weibo img: volantis-static/media/org.volantis/logo/128/weibo.png - id: img: - id: img:
侧边栏
点击查看
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 sidebar: for_page: [blogger , category , guide , tagcloud , webinfo ] for_post: [toc , guide , tagcloud , webinfo ] widget_library: toc: class: toc display: [desktop , mobile ] header: icon: fa-solid fa-list title: 本文目录 list_number: true min_depth: 2 max_depth: 5 guide: class: grid display: [desktop , mobile ] header: icon: fa-solid fa-map-signs title: 功能导航 fixed: true rows: - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 关于我 icon: fa-solid fa-info-circle url: about/ blogger: class: blogger display: [desktop , mobile ] avatar: /images/userphoto02_scaled.png title: Chen Shi subtitle: <p>DLUT DRISE</p><p>2024届本科生</p> jinrishici: false social: - icon: fa-solid fa-envelope url: mailto:chenshi020522@outlook.com - icon: fa-brands fa-github url: https://github.com/CS0522/ - icon: fa-brands fa-weixin url: /images/weixin.png - icon: fa-brands fa-qq url: /images/qq.jpg - icon: fa-brands fa-bilibili url: https://space.bilibili.com/37047123/ tagcloud: class: tagcloud display: [desktop , mobile ] header: icon: fa-solid fa-tags title: 标签 url: tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' webinfo: class: webinfo display: [desktop , mobile ] header: icon: fa-solid fa-award title: 站点信息 type: article: enable: true text: '文章数目:' unit: '篇' runtime: enable: true data: '2023/11/01' text: '已运行时间:' unit: '天' wordcount: enable: true text: '本站总字数:' unit: '字' visitcounter: siteuv: enable: true text: '本站访客数:' unit: '人' sitepv: enable: true text: '本站总访问量:' unit: '次' lastupd: enable: true friendlyShow: true text: '最后活动时间:' unit: '日'
底部
点击查看
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 site_footer: layout: [social , source , analytics , copyright ] copyright: 'Copyright © Since 2023 诚实同学' social: - icon: fa-solid fa-envelope url: mailto:chenshi020522@outlook.com - icon: fa-brands fa-github url: https://github.com/CS0522/ - icon: fa-brands fa-weixin url: /images/weixin.png - icon: fa-brands fa-qq url: /images/qq.jpg - icon: fa-brands fa-bilibili url: https://space.bilibili.com/37047123/
网站字体
点击查看
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 fontfamily: logofont: fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal bodyfont: fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal
插件
我装的插件: * hexo-deployer-git
记得在配置文件中启用插件
点击查看
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 34 35 36 37 38 plugins: parallax: enable: true position: cover shuffle: true duration: 60000 fade: 500 images: - /images/covers/cover01.jpg - /images/covers/cover02.jpg - /images/covers/cover03.jpg - /images/covers/cover04.jpg - /images/covers/cover05.jpg - /images/covers/cover06.jpg - /images/covers/cover07.jpg - /images/covers/cover08.jpg - /images/covers/cover09.jpg - /images/covers/cover10.jpg wordcount: enable: true mathjax: enable: true per_page: false cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML search: enable: true service: hexo darkmode: enable: true
网站页面
归档页面
自动生成
关于页面
source/about/index.md
1 2 3 4 5 6 7 8 9 10 --- layout: docs seo_title: 关于 bottom_ meta: falsesidebar: [] twikoo: placeholder: 有什么想对我说的呢? --- 下面写关于自己的内容
分类页面
source/categories/index.md
1 2 3 4 5 --- layout: category index: true title: 所有分类 ---
标签页面
source/tags/index.md
1 2 3 4 5 --- layout: tag index: true title: 所有标签 ---
列表页面
source/mylist/index.md
1 2 3 4 5 --- layout: list group: mylist index: true ---
404页面
source/404.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 --- cover: true robots: noindex,nofollow sitemap: false seo_title: 404 Not Found bottom_ meta: falsesidebar: [] twikoo: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了 --- {% p logo center huge, 404 %} {% p center bold, 很抱歉,您访问的页面不存在 %} {% p center small, 可能是输入地址有误或该地址已被删除 %}
问题与解答
1. 站内文章跳转?
参考官方文档
1 2 {% post_path filename %} {% post_ link filename [title] [escape] %}
例子:
1 {% post_link hexo-3-8-released %}
Hexo 3.8.0 Released
1 {% post_link hexo-3-8-released '通往文章的链接' %}
通往文章的链接
1 {% post_link hexo-4-released 'How to use <b > tag in title' %}
How to use <b> tag in title
1 {% post_link hexo-4-released '<b > bold</b > custom title' false %}
bold custom title
2. 数学公式渲染?
更换渲染引擎
1 2 3 4 5 6 7 8 9 npm uninstall hexo-renderer-marked npm uninstall hexo-math npm install hexo-renderer-pandoc npm install hexo-filter-mathjax sudo apt install pandoc
3. 网站页脚文字修改?
进入 ./node_modules/hexo-theme-volantis/layout/_partial/footer.ejs
1 2 3 4 5 6 <!-- Custom Files footer begin--> <%- volantis_inject ('footer' ) %> <p style ="font-size: .8125rem" > 本站采用 <a href ="https://volantis.js.org/" target ="_blank" > Volantis</a > 主题设计</p > <!-- Custom Files footer end-->
4. CDN 加速?
使用 jsdelivr CDN 加速访问
创建存放静态资源的仓库(CSBlog)
创建 Release
引用链接修改为 1 2 3 4 https://gcore.jsdelivr.net/gh/<Username>/<Repo>/<文件路径> https://gcore.jsdelivr.net/gh/CS0522/CSBlog/source/_posts/l-srcmap/fig02.png
5. 百度、谷歌、Bing 网站收录?
参考:Hexo - SEO 、Gitee Pages 百度收录
百度收录网址:https://ziyuan.baidu.com/site/index#/
Bing 收录网址:https://www.bing.com/webmasters
谷歌收录网址:https://search.google.com/search-console