一、安装 node
点击此处 下载 node 长期维护版并安装,安装完成后在 cmd 中输入 node -v 验证。
二、安装 git
点击此处 下载 git 并安装,安装完成后在 cmd 中输入 git 验证。
三、git ssh 配置
- 打开 git bash;
- 输入
ssh-keygen -t rsa -C "邮箱",其中邮箱中填写注册 git 时所使用的邮箱; - 打开 Github 设置,进入 SSH and GPG keys 页面,填写信息,其中 Title 为自定义 key 的名称,key 为 电脑中的密钥,具体位置在
C:/Users/Administrator/.ssh/id_rsa.pub中,将复制粘贴即可。
四、安装 hexo
- 在本地博客文件夹(打算写博客的文件夹)下打开 cmd ;
- 输入
npm install hexo-cli -g; - 安装好后输入
hexo init xxx进行初始化,其中 xxx 为你的博客名称。 - 进入博客目录,输入
npm install安装依赖; - 输入
hexo s将博客在本地运行起来,网页链接为localhost:4000。
六、使用 pages
- 打开 GitHub;
- 创建博客仓库,命名为
username.GitHub.io,其中username为你 GitHub 账号的名称;
五、发布博客
- 在博客目录( hexo 的安装目录 )中打开
_config.yml; - 在
deploy:项下填写type: git、repo: xxx以及branch: main,其中xxxGitHub 中博客仓库的链接并保存;
!(deploy信息)[deploy信息.png#pic_center] - 将
url站点信息改为自己的仓库链接并保存;
!(url信息)[url信息.png] - 通过 cmd(博客目录下)安装部署代码的插件:
npm install hexo-deployer-git --save; - 通过 cmd 配置 GitHub 信息:
git config --global user.email "你的邮箱"、git config --global user.name "用户名"; - 部署 hexo :
hexo g、hexo d,在跳转的页面输入账号密码; - 访问
https://xxx.github.io/验证,其中xxx为你的账户名,即该链接为你的博客仓库名。
六、改换主题
- 在 hexo 官网中浏览不同主题,选选择目标并下载,一般推荐 next 主题;
- 将下载后的主题放在
themes目录下; - 在站点配置文件(即 hexo 的 _config.yml) 中修改
theme为主题名,比如next主题为next; - 依据需求修改主题配置文件
_config.yml,该文件在主题目录中,非站点配置文件。
七、Latex
此步骤用于有写公式需求的用户,参考链接。
1. 检查主题是否支持 Mathjax:
打开主题 Readme ,查看是否有 Mathjax 字段,若有则依照说明开启 Mathjax 支持,不需后续步骤;若无则进行后续步骤。
2. 在 themes/Your-Theme-Name/layout/ 下新建文件 mathjax.ejs:
1 | <% if (theme.mathjax.enable){ %> |
3. 在主题配置文件末尾添加:
1 | # MathJax Support |
4. 修改 themes/Your-Theme-Name/layout/post.ejs:
在文件的 <main> 标签块中加入:1
2
3<% if (page.mathjax == true){ %>
<%- partial('mathjax') %>
<% } %>
5. 在需要写公式的文章头部添加字段启用:
mathjax: true
6. 卸载 hexo-math:
npm uninstall hexo-math;
7. 替换渲染,使用 pandoc 版本:
1 | npm uninstall hexo-renderer-marked --save |
或使用 kramed 版本:1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
八、搜索引擎收录、提交
由于 Github Pages 反爬虫的特性,因此若想让自己的博客能够被搜索引擎检索,就需要将站点录入,下面以 Next 主题为例。
1. Google:需要登录
- 用谷歌搜索
site:https://your_website.xxx - 在网站前缀中输入你的网页,验证资源
- 选择 HTML 标记,点击复制
- 在
Blog/themes/next/layout/_partials/head.swig文件顶部原有 标签下添加你复制的 标签 - 使用 hexo 对你的博客进行部署,即:
1
2
3hexo clean
hexo g
hexo d - 回到网页点击验证,因为网络同步的问题,此步骤可能需要延迟进行
2. baidu:需要登录
- 进入
https://ziyuan.baidu.com/ - 点击用户中心->站点管理->添加网站
- 填写相关信息,使用 HTML 方法进行验证
- 后续步骤同 Google
3. Bing:需要登录
- 进入
https://www.bing.com/webmasters - Bing 可以使用 Google 收录,按提示操作即可
4. 生成站点地图
- 安装插件:
1
2npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save - 修改站点配置文件,添加以下内容:
1
2
3
4sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml - 在 source 目录下创建 robots.txt 文件,内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: https://你的域名/sitemap.xml
Sitemap: https://你的域名/baidusitemap.xml - 使用 hexo 对你的博客进行部署,即:
1
2
3hexo clean
hexo g
hexo d
5. 百度主动推送(此步骤与下个步骤冲突)
- 安装插件:
npm install hexo-baidu-url-submit --save - 登录百度搜索资源平台->普通收录->资源提交->API 提交,再推送接口中复制 token (在调用地址的最后面)
- 在站点配置文件中添加:
1
2
3
4
5baidu_url_submit:
count: 100 # 提交最新的多少个链
host: your_website # 在百度站长平台中添加的域名
token: your_token # 秘钥
path: baidu_urls.txt - 在站点配置文件中添加新的 deployer ,注意多个 deployer 需要用短横线配置
1
2deploy:
- type: baidu_url_submitter # 百度 - 使用 hexo 对你的博客进行部署,即:
1
2
3hexo clean
hexo g
hexo d
6. 主动推送(此步骤包含百度主动推送)
- 安装插件:
npm install hexo-submit-urls-to-search-engine --save - 在站点配置文件中添加:
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
32hexo_submit_urls_to_search_engine:
# 提交最新的 n 个链接
count: 10
# 提交修改时间在 n 秒内的链接,单位秒。例如:
# 有两个文件 a.txt 和 b.txt ,分别对应 https://yoursite.com/a.txt 和 https://yoursite.com/b.txt
# 其更新时间距当前分别为 800s 和 1000s ( period 字段设为 900 )
# 则 https://yoursite.com/a.txt 会被提交,https://yoursite.com/b.txt 不会
period: 900
# 提交链接的条件,可选值:count | period 。不同取值的含义如下:
# count:应用上述的 count 配置项
# period:应用上述的 period 配置项
submit_condition: count
# 是否向 Google 提交,可选值:1 | 0 ( 0:否; 1:是)
google: 0
# 是否向 Bing 提交,可选值:1 | 0 ( 0:否; 1:是)
bing: 1
# 是否向 Baidu 提交,可选值:1 | 0 ( 0:否; 1:是)
baidu: 1
# 文本文档的地址,要推送的链接会保存在此文本文档里
txt_path: submit_urls.txt
# 在百度站长平台中注册的域名
baidu_host: https://yoursite.com/
# 百度自动推送 API 的 token (获取方式见插件文档: https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html )
baidu_token: xxxxx
# 在必应站长平台中注册的域名
bing_host: https://yoursite.com/
# 必应自动推送 API 的 token (获取方式见插件文档: https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html )
bing_token: xxxxx
# 在谷歌站长平台中注册的域名
google_host: https://yoursite.com/
# 存放 google key 的 json 文件,放于网站根目录
google_key_file: google_key.json - 在站点配置文件中添加新的 deployer ,注意多个 deployer 需要用短横线配置
1
2
3
4deploy:
- type: cjh_baidu_url_submitter # baidu
- type: cjh_google_url_submitter # Google
- type: cjh_bing_url_submitter # Bing - 使用 hexo 对你的博客进行部署,即:
1
2
3hexo clean
hexo g
hexo d
九、其他功能
1. 本地搜索
- 安装插件:
npm install hexo-generator-search --save - 修改主题配置文件:
1
2
3# Local search
local_search:
enable: true - 修改站点配置文件:
1
2
3
4search:
path: search.xml # 生成的搜索文件的路径
field: post # 搜索文件的范围
content: true # 是否搜索文章内容
十、问题及解决
1. Next 主题换页符号非正常显示
- 打开
Blog\themes\next\layout\_partials\pagination.swig - 将
<i class="fa fa-angle-left"></i>替换为< - 将
<i class="fa fa-angle-right"></i>替换为>
2. TypeError: Cannot read property 'count' of undefined
- 这是因为本文第八节中步骤 5、6 不兼容,推荐使用步骤 6 ,因此需要将步骤 5 的操作都删除
- 还需命令:
npm remove hexo-baidu-url-submit