一、安装 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
,其中xxx
GitHub 中博客仓库的链接并保存;
!(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