U2647's blog 一个热爱学习的 Java 程序员,喜欢 Vue,喜欢深度学习 Dubbo Flutter SpringBoot Debug Notes Java LeetCode Python Redis Android DesignPattern mdi-home-outline 首页 mdi-cloud-outline 标签云 mdi-timeline-text-outline 时间轴 mdi-draw-pen 文章总数 62
Hexo + Material + Github 搭建博客 Hexo、Material、Github、搭建博客与配置 Hexo Material Github blog mdi-cursor-default-click-outline 点击量 62

0. 准备环境

  • git
  • Node.js
  • github 账号

1. 安装

1.1 安装 git

Git下载地址

一路 next 没啥好说的

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

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

就说明成功了

1.2 安装 Node.js

Node.js下载地址

一路 next 没啥好说的

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

D:\GitRepository>node -v
v6.11.5

D:\GitRepository>npm -v
3.10.10

1.3 安装 Hexo

npm install -g hexo-cli 

2. 创建本地Blog

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

执行

hexo init

本地blog就创建成功了

执行

hexo g
hexo s

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

3. 主题安装

这里使用的是 viosey 主题

3.1 下载主题:

cd themes
git 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:40
type: "categories"
---

7.2 给文章添加分类

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

8. SEO 优化部分(补充)

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

8.1 站点地图

安装插件:

npm install hexo-generator-sitemap --save
npm 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.xml
sitemap:
    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.xml
Sitemap: https://zdran.com/baidusitemap.xml

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

将 robots 文件提交给 google 和百度

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
我的GitHub 我的LeetCode 我的掘金
Powered by Hexo Powered by three-cards
Copyright © 2017 - {{ new Date().getFullYear() }} 某ICP备xxxxxxxx号