Hexo + Material + Github 搭建博客

U+2647

关注

发布于: 2021 年 04 月 02 日

0. 准备环境

git
Node.js
github 账号

1. 安装

1.1 安装 git

Git下载地址

一路 next 没啥好说的

验证一下，在命令行下执行

D:\GitRepository>git --versiongit version 2.13.2.windows.1

复制代码

就说明成功了

1.2 安装 Node.js

Node.js下载地址

一路 next 没啥好说的

验证一下，在命令行下执行

D:\GitRepository>node -vv6.11.5
D:\GitRepository>npm -v3.10.10

复制代码

1.3 安装 Hexo

npm install -g hexo-cli

复制代码

2. 创建本地 Blog

在命令行下进入一个空文件夹内，

执行

hexo init

复制代码

本地 blog 就创建成功了

执行

hexo ghexo s

复制代码

访问 http://localhost:4000/ 就能看到自己的 blog 了。

3. 主题安装

这里使用的是 viosey 主题

3.1 下载主题：

cd themesgit clone https://github.com/viosey/hexo-theme-material.git material

复制代码

3.2 使用主题：

修改主目录下的 _config.yml 文件的 theme 值，改为 git 克隆下来的文件夹名称。

重命名 theme/material 目录下_config.template.yml 为 _config.yml

3.3 站内搜索

安装 hexo-generator-search 插件。

修改 theme/material 目录 _config.yml 中的 search 值

search:    use: local    swiftype_key:

复制代码

然后在主目录的_config.yml文件中添加

search:  path: search.xml  field: all

复制代码

其他相关配置可查看文档

4. 提交部署

在 github 上创建 xxxx.github.io 仓库,其中 xxxx 是你 github 的用户名

安装 hexo-deployer-git

npm install hexo-deployer-git --save

复制代码

配置主目录的_config.yml文件

deploy:  type: git  repo: 仓库地址  branch: master

复制代码

部署到 github

hexo d -g

复制代码

访问下 https://xxxx.github.io/。试试（xxxx 是你自己的用户名）

5. 写 blog

创建 blog 模板

hexo new 这是我的第一篇文章

复制代码

会在 source/_posts 目录下创建一个 md 文件。可以编辑这个文件创作 blog

6. 多台机器

有时候需要在不同的地方写 blog。这就需要在多台机器上同步 blog。

主要思路是创建两个分支，一个用于管理 blog，一个用于管理原文件

在 blog 目录下

6.1 创建源文件 git 目录

 git init git remote add origin https://github.com/xx/xx.github.io // 填入你的repo地址

复制代码

6.2 创建 source 分支

 git checkout -b source git add . git commit -m 'add source' git push origin source

复制代码

6.3 多机器同步

clone 仓库到本地

初始化 Hexo。跟上面的步骤一样，不再赘述。注意分支的切换

7 分类 &标签

7.1 创建分类

执行

 hexo new page categories

复制代码

打开 source/categories/index.md

修改为：

---title: 文章分类date: 2017-05-27 13:47:40type: "categories"---

复制代码

7.2 给文章添加分类

---layout: hexotitle: Hexo + Material + Github 搭建博客与配置date: 2018-03-26 13:22:22categories: - 工具tags: 学习笔记---

复制代码

8. SEO 优化部分（补充）

由于博客接入了 Google 与百度搜索，所以做了一下 SEO 优化。

8.1 站点地图

安装插件：

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

复制代码

修改博客的 _config.yml 配置文件，添加以下内容


## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'# 替换成你自己的域名url: https://www.zdran.com 
... ...

Plugins:- hexo-generator-baidu-sitemap- hexo-generator-sitemap
baidusitemap:    path: baidusitemap.xmlsitemap:    path: sitemap.xml

复制代码

然后提交给百度和 Google，就会被定期检索到了

8.2 百度提交 URL

提交百度的 URL 需要手动处理，可以使用 hexo-baidu-url-submit 工具来处理。

安装：

npm install hexo-baidu-url-submit --save

复制代码

然后在 _config.yml 文件里添加以下配置：

baidu_url_submit:  count: 1 ## 提交最新的一个链接  host: www.hui-wang.info ## 在百度站长平台中注册的域名  token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

deploy:- type: baidu_url_submitter ## 这是新加的

复制代码

原文地址

8.3 robots 文件

在 \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://zdran.com/sitemap.xmlSitemap: https://zdran.com/baidusitemap.xml

复制代码

请将域名换成你自己的域名！！！

将 robots 文件提交给 google 和百度

发布于: 2021 年 04 月 02 日阅读数: 80

原文链接:【http://xie.infoq.cn/article/a6f3be60da366913284821fa6】。文章转载请联系作者。

U+2647

关注

evolving code monkey 2018.11.05 加入

https://zdran.com/

发布

暂无评论

创作场景

Hexo + Material + Github 搭建博客

0. 准备环境

1. 安装

1.1 安装 git

1.2 安装 Node.js

1.3 安装 Hexo

2. 创建本地 Blog

3. 主题安装

3.1 下载主题：

3.2 使用主题：

3.3 站内搜索

4. 提交部署

5. 写 blog

6. 多台机器

6.1 创建源文件 git 目录

6.2 创建 source 分支

6.3 多机器同步

7 分类 &标签

7.1 创建分类

7.2 给文章添加分类

8. SEO 优化部分（补充）

8.1 站点地图

8.2 百度提交 URL

8.3 robots 文件

U+2647

评论