搭建博客

搭建博客

十一月 01, 2021

博客搭建

文档格式
需要git,Node.js,npm

做好准备

安装好软件,配置好相关的环境

建立一个github仓库,由于在部署时未设置配置建议改成 用户名.github.io,方便网站进入导致只打开一个html,与整个页面脱节的情况

寻找材料

到Hexo中找相关喜欢的主题,并找到相应的开源的GitHub,先hexo init在空文件夹中初始化,导入相关主题,修改全局中的theme变量

修改配置

https://hexo.io/zh-cn/docs/configuration
具体配置连接

网站

参数 || 描述

title || 网站标题

subtitle || 网站副标题

description || 网站描述

keywords || 网站的关键词。支持多个关键词。

author || 您的名字

language || 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans和 zh-CN。

timezone || 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai。

网址

url || 网址, 必须以 http:// 或 https:// 开头

root || 网站根目录 url’s pathname

permalink || 文章的 永久链接 格式 :year/:month/:day/:title/

permalink_defaults || 永久链接中各部分的默认值

pretty_urls || 改写 permalink 的值来美化 URL

pretty_urls.trailing_index || 是否在永久链接中保留尾部的index.html,设置为 false 时去除 true

pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)

网站存放在子目录
如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

例如:# 比如,一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
trailing_index: false
此时页面的永久链接会变为 http://example.com/foo/bar/

目录
参数 || 描述 || 默认值

source_dir || 资源文件夹,这个文件夹用来存放内容。|| source

public_dir || 公共文件夹,这个文件夹用于存放生成的站点文件。|| public

tag_dir || 标签文件夹 || tags

archive_dir 归档文件夹 archives

category_dir 分类文件夹 categories

code_dir Include code 文件夹,source_dir 下的子目录 downloads/code

i18n_dir 国际化(i18n)文件夹 :lang

skip_render 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

文章
参数 描述 默认值

new_post_name 新文章的文件名称 :title.md

default_layout 预设布局 post

auto_spacing 在中文和英文之间加入空格 false

titlecase 把标题转换为 title case false

external_link 在新标签中打开链接 true

external_link.enable 在新标签中打开链接 true

external_link.field 对整个网站(site)生效或仅对文章(post)生效 site

external_link.exclude 需要排除的域名。主域名和子域名如 www 需分别配置 []

filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0

render_drafts 显示草稿 false

post_asset_folder 启动 Asset 文件夹 false

relative_link 把链接改为与根目录的相对位址 false

future 显示未来的文章 true

highlight 代码块的设置, 请参考 Highlight.js 进行设置

prismjs 代码块的设置, 请参考 PrismJS 进行设置

默认情况下,Hexo 生成的超链接都是绝对地址。例如,如果您的网站域名为 example.com,您有一篇文章名为 hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。

分类 & 标签

参数 描述 默认值

default_category 默认分类 uncategorized

category_map 分类别名

tag_map 标签别名

日期 / 时间格式

参数 描述 默认值

date_format 日期格式 YYYY-MM-DD

time_format 时间格式 HH:mm:ss

updated_option 当 Front Matter 中没有指定 updated 时 updated 的取值 mtime

updated_option
updated_option 控制了当 Front Matter 中没有指定 updated 时,updated 如何取值:

mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中,因为使用 Git 管理站点时,文件的最后修改日期常常会发生改变
empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。
use_date_for_updated 选项已经被废弃,将会在下个重大版本发布时去除。请改为使用 updated_option: ‘date’。

use_date_for_updated | 启用以后,如果 Front Matter 中没有指定 updated, post.updated 将会使用 date 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | true

分页

参数 描述 默认值

per_page 每页显示的文章量 (0 = 关闭分页功能) 10

pagination_dir 分页目录 page

扩展
参数 描述

theme 当前主题名称。值为false时禁用主题

theme_config 主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置

deploy 部署部分的设置

meta_generator Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

    • 特别注意,记得修改配置中的连接和主题

开始部署

配置好配置中的部署部分

1
2
3
4
deploy:
type: git
repository: https://github.com/MrChenLreanSpace/MrChenLreanSpace.github.io.git
branch: main

用 npm 安装好hexo-deployer-git.

1
npm install hexo-deployer-git 

有些加入搜索功能,需要插件

1
npm install hexo-generator-searchdb --save

配置hexo全局配置文件(请将生成的索引文件放在网站根目录或修改主题js文件的path值)

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

在主题配置文件启用本地搜索

1
2
3
4
#本地搜索,请将索引文件放在网站根目录
local_search:
#是否启用
enable: true

开始生成本地站点

1
hexo g

本地测试

1
hexo s 或者 hexo serve

完成之后,连上github,需要GitHub的令牌,令牌生成后记得记住密钥,之后会看不到
令牌在设置的开发者选项中第三个第一次上传需要登入和用用户名和令牌连上账户

1
hexo clean&&hexo d

清除本地文件且部署到GitHub上