hexo 博客搭建教程

BeZer0

已于 2022-04-09 12:59:32 修改

阅读量333

点赞数

分类专栏： blog 文章标签： git github hexo next

于 2021-10-27 16:05:29 首次发布

未经允许禁止转载

本文链接：https://blog.csdn.net/qq_42375636/article/details/120994970

版权

blog 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、安装 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`：

<% if (theme.mathjax.enable){ %>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            processEscapes: true
        }
        });
    </script>

    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            tex2jax: {
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
            }
        });
    </script>

    <script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
            var all = MathJax.Hub.getAllJax(), i;
            for(i=0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

    <script type="text/javascript" src="<%- theme.mathjax.cdn %>"></script>
<% } %>

3. 在主题配置文件末尾添加：

# MathJax Support
mathjax:
enable: true
cdn: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML

4. 修改 `themes/Your-Theme-Name/layout/post.ejs`：

在文件的 <main> 标签块中加入：

<% if (page.mathjax == true){ %>
    <%- partial('mathjax') %>
<% } %>

5. 在需要写公式的文章头部添加字段启用：

mathjax: true

6. 卸载 `hexo-math`：

npm uninstall hexo-math;

7. 替换渲染，使用 `pandoc` 版本：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

或使用 kramed 版本：

npm 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 对你的博客进行部署，即：
```
hexo clean
hexo g
hexo d
```
回到网页点击验证，因为网络同步的问题，此步骤可能需要延迟进行

2. baidu：需要登录

进入 https://ziyuan.baidu.com/
点击用户中心->站点管理->添加网站
填写相关信息，使用 HTML 方法进行验证
后续步骤同 Google

3. Bing：需要登录

进入 https://www.bing.com/webmasters
Bing 可以使用 Google 收录，按提示操作即可

4. 生成站点地图

安装插件：

npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save

修改站点配置文件，添加以下内容：

sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

在 source 目录下创建 robots.txt 文件，内容如下：

User-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 对你的博客进行部署，即：

hexo clean
hexo g
hexo d

5. 百度主动推送（此步骤与下个步骤冲突）

安装插件：npm install hexo-baidu-url-submit --save
登录百度搜索资源平台->普通收录->资源提交->API 提交，再推送接口中复制 token （在调用地址的最后面）
在站点配置文件中添加：

baidu_url_submit:
    count: 100 # 提交最新的多少个链
    host: your_website # 在百度站长平台中添加的域名
    token: your_token # 秘钥
    path: baidu_urls.txt

在站点配置文件中添加新的 deployer ，注意多个 deployer 需要用短横线配置

deploy:
- type: baidu_url_submitter # 百度

使用 hexo 对你的博客进行部署，即：

hexo clean
hexo g
hexo d

6. 主动推送（此步骤包含百度主动推送）

安装插件：npm install hexo-submit-urls-to-search-engine --save
在站点配置文件中添加：

hexo_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 需要用短横线配置

deploy:
- type: cjh_baidu_url_submitter # baidu
- type: cjh_google_url_submitter # Google
- type: cjh_bing_url_submitter # Bing

使用 hexo 对你的博客进行部署，即：

hexo clean
hexo g
hexo d

九、问题及解决

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

十、相关链接

BeZer0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
hexo 博客搭建教程

一、安装 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 为电
复制链接

扫一扫