Hexo 博客从搭建部署到SEO优化等详细教程

本文主要包括以下内容:

• Hexo 博客搭建
• Hexo 主题选择以及应用
• 关于 Hexo Material 主题的相关配置
• 网站 SEO 优化
• 将你的网站同时托管到 Github 和 Coding 上,国内外分流
• 将自己的代码托管到私有仓库
• 使用 Gulp 来压缩你的代码
• 如何简单高效地使用七牛图床
• 自己编写Shell脚本来一步部署你的代码

主题这里我选择的是 Hexo Material 主题( Github Hexo 主题中 star 数排第三,前两名分别是 next 和 yilia).

为什么写这篇文章?

我发现网上关于 Next 主题的相关配置比较多,但是关于这个 Material 主题的完整配置过程文档却相当难找,但这个主题在我看来,不管是颜值,还是功能来说,都明显不该被埋没在next的大海之中,所以在自己折腾了一整子后,将自己记录的相关过程整理分享给大家,毕竟这个主题颜值辣么高,功能辣么强......(除了主题不通之外,其他相关配置都是可以拿来参考的,甚至直接拿来用的,所以其他主题的童靴先不要逃...)

Demo演示

Hexo 博客搭建

Hexo 安装环境

Hexo 是基于Node.js,所以不管是 mac 还是 win 都需要提前安装好Node.js以及NPM才能进行下一步,这里关于 Node 与 NPM 的安装我就不在这里多说了,请大家自行 Google 解决.

Hexo 的相关安装搭建

安装 Hexo

首先我们要在命令行里直接执行如下命令,全局安装Hexo.

npm install -g hexo

初始化你的 Hexo 博客

然后需要你去找到一个你想要安装的文件夹,在里面执行如下命令来进行安装初始化你的hexo博客.

hexo init hexo_blog   //在当前目录下新建一个叫 hexo_blog 文件夹并在其中初始化生成 Hexo 相关代码
cd hexo_blog          //进入到 hexo_blog 这个文件夹中并安装相关依赖包
npm install

生成的相关目录如下:

-- hexo_blog
    ├── node_modules    //NPM安装依赖包
    ├── scaffolds
    ├── source
    |   └── _posts      //新建文件存放位置
    ├── themes          //相关主题存放位置
    ├── _config.yml     //Hexo 博客站点配置文件
    ├── .gitignore
    ├── db.json
    └── package.json

这里需要下载速度比较慢的童鞋需要注意一下, npm 中默认使用的是国外的 npm 源,这意味着你在你执行 npm install 相关命令式会有比较高的延迟,甚至部分包下载不下来的情况,所以这里推荐国内用户用nrm切换成淘宝的镜像源来使用(但还是会有部分依赖包必须从国外下载,所以还是推荐自己去学会科学上网),使用方法如下:

npm i nrm -g     //全局安装 nrm 这个插件
nrm test         //测试哪个镜像源跟自己的延迟比较低,我的是 taobao
nrm use taobao   //切换到taobao 这个镜像源上
npm i ...        //之后继续使用 npm 来安装相关依赖就行

之后你就可以在当前文件夹下执行hexo server --debug来让你的博客进入debug模式,一般默认是在4000这个端口下执行,直接在浏览器输入localhost:4000就可以查看自己本地生成的Hexo博客了.

在debug模式下,你可以直接对你的博客进行相关修改,刷新网页来查看效果.

Hexo 主题选择以及应用

现在网上关于 Hexo 的主题一搜一大把,这里推荐大家在选择主题时可以去选择一些关注度比较高的主题,这种主题一般相应的配套使用插件和文档比较丰富,使用起来也比较方便,主题选择的话可以去一些主题库中查找,也可以直接去Github中搜索hexo theme等关键字来查找---点击查看搜索结果.

这里我们要注意的一点是在 Hexo 中,通常有两份配置文件,一个是站点根目录下(例如我的就是.../hexo_blog/_config.yml)的 _config.yml;另外一个是主题目录(例如我的就是.../hexo_blog/themes/material/_config.yml)下的 _config.yml.为了描述方便,在以下说明中,将前者称为 站点配置文件,后者称为 主题配置文件.

1. 去找到你喜欢的主题,然后将其下载下来存放到你的 Themes 这个文件夹下,可以使用NPM,Git等一系列方法下载下来,一般主题的文档里面都会有其下载方法的介绍,例如我使用的 Material 主题的下载方法.
2. 复制完成后,修改主题文件夹名称,将其修改为 AAA(你的主题名称),然后打开站点配置文件,找到theme字段,并将其值更改为AAA.
3. 运行hexo s --debug 并访问http://localhost:4000即可查看你的主题修改效果.

文件夹名称可自由修改,并不是唯一的,只需要 theme 字段与之对应即可.这里有一点必须要注意,配置项之间必须要有一个空格,例如theme:material这种情况是会报错的,要向下面这样.

关于 Hexo Material 主题的相关配置

这里我会将分享我关于Material配置时的一些踩坑经验,使用其他主题的童鞋可以直接跳过这一段,去看后面的其他优化配置.

Material的相关配置文档可以直接查看官网配置文档,但是我在配置的一些过程中发现该网站中的文档部分没有跟上最新发布的版本,例如关于文章评论这一块,并没有网易云跟帖的相关说明,但是在最新的版本中,已经跟新了对网易云跟帖的支持.推荐大家直接去查看其 Github 上面的文档---material-theme-docs,这里更新的比较及时.

• 站点配置文件:.../hexo_blog/_config.yml
• 主题配置文件: .../hexo_blog/themes/material/_config.yml

站点配置文件

这里我主要介绍一下关于博客使用语言的设置,其默认的是英语,我们可以编辑站点配置文件,将language设置成你想要的语言,常用的几种如下:

• 英语: en
• 简体中文: zh-CN
• 繁体中文: zh-TW

language: zh-CN

代码高亮设置

这里可以使用 hexo-prism-plugin这个插件来让我们文章中的代码实现高亮，具体文档官方已经写得很详细了,这里我就不再多说,大家直接去参考 Hexo-Prism-Plugin 插件文档即可.

主题配置文件

这里我直接贴出我的配置文件,大家可以结合官方文档参考下,但我会在下面一些有可能踩坑的地方做出一些相关注释,大家可以配合着一起看下.

#  .../hexo_blog/themes/material/_config.yml
---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Head info
head:
    favicon: "/img/favicon_c.png"  //网站的 favicon
    high_res_favicon: "/img/favicon_c.png"  //高清 favicon
    apple_touch_icon: "/img/favicon_c.png"  //IOS 主屏按钮图标
    keywords: 前端,全栈,Web,自学编程,学习分享  //网站关键词,文章的关键字会结合你对文章打上的相应标签来一起显示
    site_verification:  //向搜索引擎验证你对站点的所有权,后面会专门做这方面的 SEO
        google:
        baidu:

    # Enable generate structured-data as JSON+LD for SEO or not.
    #        Set as 'false' if it cause some wrong when `hexo g`.
    structured_data: true  //用于改善搜索引擎对你网站的 SEO, 建议开启

# Jump Links Settings
url:
    rss:  //设置生成的 rss 或 atom url
    daily_pic: "#" //设置 daily_pic 模块 点击时跳转的 url
    logo: "#" //设置 logo 点击时跳转的 url



# ---------------------------------------------------------------
# Style Settings
# ---------------------------------------------------------------

# Shemes  //主题选择设置,现在只有默认的 Paradox 和至简模式的 Isolation,去掉对应的 # 号就可使用
scheme: Paradox
#scheme: Isolation

# UI & UX: slogan, color, effect
uiux:
    slogan: "XXXXXXXXXXX"
    theme_color: "#607D8B"
    theme_sub_color: "#00838F"
    hyperlink_color: "#00838F"
    button_color: "#757575"
    android_chrome_color: "#607D8B"
    nprogress_color: "#29d"
    nprogress_buffer: "800"

slogan --- 网站标语

slogan: 显示在blog_info模块中的标语,我们可以将其可以设置成单行或者多行,支持 HTML 标签.

• 单行格式: slogan: "我爱吃土豆"
• 多行格式:(注意缩进)

slogan: 
    - "我爱吃土豆"
    - "我爱吃番茄"

我继续接上面开始说明 .../hexo_blog/themes/material/_config.yml中的相关代码.

# JS Effect Switches --- 用来控制 Material 主题中自带的多种 js 特性
js_effect:
    fade: true
    smoothscroll: false

# Reading experience --- 首页文章输出摘要的字符长度
reading:
    entry_excerpt: 80

# Thumbnail Settings --- 用于设置文章缩略图相关
thumbnail:
    purecolor:
    random_amount: 19

# Background Settings
# bing available parameter:
#     new | color= | type=
#         color available value: black, blue, brown, green, multi, orange, pink, purple, red, white, yellow
#         type available value: A (animal), C (culture), N (nature), S (space), T (travel)
background:
    purecolor: "#F5F5F5"
    #bgimg: "/img/bg.png"
    bing:
        enable: false
        parameter:

# Images Settings
img:
    logo: "/img/logo_c.png"
    avatar: "/img/avatar.JPG"
    daily_pic: "/img/daily_pic.jpg"
    sidebar_header: "/img/sidebar_header.jpg"
    random_thumbnail: "/img/random/material-"
    footer_image:
        #upyun_logo:
            #link: "https://www.upyun.com/"
            #src: "/img/upyun_logo.svg"

# Custom Fonts
#   family: the font-family which will be used in the theme
#   host: uri of fonts host.
#       Available value of "host": google | baomitu | ustc | custom
fonts:
    family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
    use: baomitu
    custom_font_host:

# Card Elevation Level
card_elevation: 2

# Copyright
# Specify the date when the site was setup.
#   For example, if you set it as 2015, then footer will show '© 2015 - 2017'
copyright_since: 2017

# Qrcode for redirect at other device
#   use: choose which method to generate the qrcode for each posts.
#       Available value of "use": plugin | online
#           - When use "plugin", you need to install the hexo-helper-qrcode.
#           - When use "online", the qrcode will be generated by 'pan.baidu.com' in China.
qrcode:
    enable: true
    use: plugin


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# TOC Button

toc:
#   use: choose whether the line_number of toc will show or not.
#       Available value of "linenumber": true | false
    linenumber: true

# SNS Menu
sns:
    email: xxx@email.com
    facebook: 
    twitter: 
    googleplus: 
    weibo:
    instagram:
    tumblr:
    github: "https://www.github.com/xxx"
    linkedin: "https://www.linkedin.com/in/xxx/"
    zhihu: "https://www.zhihu.com/people/xxx"
    bilibili:
    telegram:

# SNS Share Switch
sns_share:
    twitter: true
    facebook: true
    googleplus: true
    weibo: true
    linkedin: true
    qq: true
    telegram: false

# Sidebar Customize
sidebar:
    dropdown:
        Email Me:
            link: "mailto:xxx@email.com"
            icon: email
    homepage:
        use: true
        icon: home
        divider: false
    categories:
        use: true
        icon: chrome_reader_mode
        divider: false
    tags:
        use: true
        icon: chrome_reader_mode
        divider: false
    archives:
        use: true
        icon: timeline
        divider: false
    pages:
        标签云:
            link: "/tags"
            icon: cloud_circle
            divider: true
        Timeline:
            link: "/timeline"
            icon: send
            divider: false
        Gallery:
            link: "/gallery"
            icon: photo_library
            divider: false
        About Me:
            link: "/test"
            icon: person_pin
            divider: true
    article_num:
        use: true
        divider: false
    footer:
        divider: false
        theme: false
        support: false
        feedback: false
        material: false

sidebar --- 侧边栏

关于侧边栏的一些相关配置这里有些部分我需要说明一下: 图标选择网站是这个(需要翻墙),只需要向下面一样把 icon 对应的配置项换掉就可以切换图标.

• homepage: 主页
• catagories: 文章分类
• tags: 文章打上的标签
• archives: 文章按时间归档
• pages: 用于设置一些独立页面的入口(相关页面需要自己开启,后面后有相关说明),格式如下:

链接名称:
    link: "/xxx" //url 地址
    icon: xxxx   // 图标样式
    divider: true/false //是否显示下划线

• article_num: 是否显示文章数目统计
• footer: 配置侧边栏的底部

# ---------------------------------------------------------------
# Integrated Services
# ---------------------------------------------------------------

# MaterialCDN
# When you set 'use' as true, the needed css, js, font file will have a new src.
# The new src will have the base domain you configured in 'base'.
materialcdn: 
    use: false 
    base: xxxx

# Comment Systems
# Available value of "use":
#     disqus | disqus_click | changyan | 163gentie
comment:
    use: 163gentie
    shortname: 
    changyan_appid:
    changyan_conf:
    changyan_thread_key_type: path
    gentie_productKey:  xxxxx

# Search Systems
# Available value:
#     swiftype | google | local
search:
    use: local
    path: search.xml
    field: all
    #swiftype_key:

# Analytics Systems
# Available value:
#     baidu | google | cnzz
analytics:
    use: baidu
    site_id: 8c824176282809c2a3153ab0c6883a31

# Leancloud Views
leancloud:
    enable: false
    app_id: #你的 app_id
    app_key: #你的 app_key
    av_core_mini: "https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"

# Busuanzi 不蒜子 Views
busuanzi:
    enable: true
    all_site_uv: true
    post_pv: true
    busuanzi_pure_mini_js: "https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"

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

集成服务

• materialcdn: 使用 cdn 来加速 Material 主题需要使用到的一些静态资源,例如 jq 等,但我感觉效果不是很明显,所以没有使用.
• comment: 文章使用的评论系统,内置的目前有四种
  • Disqus/Disqus_click: 这两个区别不是很大,后者需要点击才显示评论,但在国内环境下,加载速度很慢,不建议使用；�如果你会翻墙的话，这个加载速度很快，例如我用的就是ss翻墙，目前体验很好，配置也比较简单，只需要你在配置里选择disqus然后去他官网上注册一个账号，获得你的shortname填入即可，如果对这个步骤不是很清楚的可以去看看这篇文章。
  • changyan: 畅言,唯一缺点就是国内使用需要域名提前备案,没有备案不能使用
  • 163gentie: 网易云跟帖,这个配置起来很简单,不关风格还是功能都比较完善,推荐使用,只需要去注册一下网易云跟帖,然后设置好自己的评论格式,再在gentie_productKey这一栏当中填入你的 key 就行.这个 key 在获取代码中的 WEB 代码当中,如下图: 网易云跟帖下架了，我最后选择了disqus
• search: 跟网站的 seo 相关,我会在后面详细的说明关于这一方面的设置
• analytics: 网站的数据统计与分析,关于这一块推荐使用国内的baidu,百度在这一方面确实做得更加符合国情一些,而且我们还可以绑定微信公众号,随时了解自己网站的相关统计数据.
  • 百度统计: 只需要登录百度统计,在站点的代码获取页面复制hm.js?后面那串统计脚本id,填入site_id即可.
    
• Leancloud/busuanzi: Pv&UV统计,这里我偷懒直接使用的不蒜子的服务,使用不蒜子仅需在主题配置文件中将busuanzi: enable: 的值设置为 true
  • enable: 默认为 false。
  • all_site_uv: 默认为 false,可统计全站的独立访客人数，即可在 blog_info 模块的 Menu 菜单中看到
  • post_pv: 默认为 false,统计每篇文章的页面浏览次数，在文章页的 分享按钮 菜单中可看到
  • busuanzi_pure_mini_js: 统计 js,调用不蒜子统计 js 文件，可将该文件保存至你的 WebServer 或 CDN 中，然后在这里填入 URL
• sitemap/baidusitemap: 关于搜索引擎优化,会在下面进行说明.

以下页面配置好后只是已经存在于你的博客里面了,可以直接输入相应地址查看,但是要想在侧边栏新建快捷入口,请参考该文侧边栏中pages的相关配置.

创建友情链接页面

创建页面

在 hexo 目录下的 source 文件夹中内创建一个名为 links的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

最后在 index.md 文件内写入如下内容即可。

---
title: links
date:
layout: links
---

这里要注意的是title(对应的链接名称) 可修改，layout 不可修改。

添加数据

只需我们同样在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。

然后在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。

这里单个友情链接的格式为：

Name:
    link: http://example.com
    avatar: http://example.com/avatar.png
    descr: "这是一个描述"

添加多个友情链接，我们只需要根据上面的格式重复填写即可。

• 将 Name 改为友情链接的名字，例如 Viosey。
• http://example.com 为友情链接的地址。
• http://example.com/avatar.png 为友情链接的头像。
• 这是一个描述 为友情链接描述。

创建「图库」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 gallery的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---
title: gallery
date:
layout: gallery
---

title 可修改，layout 不可修改(同上)。

添加数据

在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。

然后在文件内创建一个名为 gallery.yml 的文件,在其中添加如下格式的数据即可。

其中单个图片的格式为：

Name:
    full_link: http://example.com/full-image.png
    thumb_link: http://example.com/thumb-image.png
    descr: "这是一个描述"

添加多张图片，只需要根据上面的格式重复填写即可。

• 将 Name 改为图片名字，例如 Material。
• http://example.com/full-image.png 为完整图片的地址。
• http://example.com/thumb-image.png 为图片缩略图的地址，如果没有缩略图也可使用完整图片的地址。
• 这是一个描述 为图片描述。

创建「标签云」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容。

---
title: tags
date:
layout: tags
---

title 可修改，layout 不可修改。

创建「时间轴」页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 timeline（只是建议，可根据自己喜好修改）的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---
title: timeline
date:
layout: timeline
---

title 可修改，layout 不可修改。

到此,关于Material主题的相关配置我觉得已经说得算是比较清楚了,下面,我会说下,我关于网站 SEO 所做的一些尝试.

网站 SEO 优化

关于网站 SEO 这一块我主要参考了这位小姐姐的这篇文章,但是有些发现她有些地方写的不是很清楚,自己也在这一块设置时也摸索了半天,所以直接像大家分享一下我的踩坑经验.

让百度收录你的站点

我们直接在百度中搜索site:你的域名就可以查看百度是否已经收录你的网站,如果没有收录的话,你就要去去登录百度站长平台在站点管理中点击添加网站,然后输入你的站点地址, 注意,这里需要输入我们自己购买的域名,不能使用xxx.github.io之类域名.

步骤如下:

1. 输入网站: 添加域名时建议是带上www的前缀
2. 站点属性: 选择自己网站类型
3. 验证网站: 验证网站的所有权,这里主要有以下三种
   • 文件验证: 文件验证文件存放的位置需要放在source文件夹下,txt 格式的不会被 hexo 预编译,其他格式要在头部加上layout: false
   • HTML 标签验证: 将他给你的代码添加到网站首页的 head 标签内
   • CNAME 验证: 推荐使用,将对应的 CNAME 文件放在你的 source 文件夹中即可,只要在其中写上你的域名地址就行;除此之外还会要求你到自己的域名提供商(我的是万网)上添加 CNAME 的解析(会面在国内外分流这一块会与更详细的解析说明);
     

生成网站地图 --- sitemap

这里需要我们安装下面两个插件,先执行下面命令

npm i hexo-generator-sitemap hexo-generator-baidu-sitemap -S

再在你的站点配置文件中修改 URL 为你的站点地址

当你在 hexo g 时,会在public文件夹中生成sitemap.xml 和baidusitemap.xml 两个文件,如果你已经提前将你的 hexo 部署到网上,这是可以直接打开http://yoururl/sitemap.xml和http://yoururl/baidusitemap.xml来查看.(这两者的区别在于 baidusitemap.xml 是百度搜索引擎的专用文件,另一个是通用).

向百度提交链接

如何选择链接提交方式

1、主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。

2、自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。

3、sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。

4、手动提交：一次性提交链接给百度，可以使用此种方式。

这里我推荐大家使用主动推送,当你主动推送时,可以缩短百度爬虫发现您站点新链接的时间,使新发布的页面可以在第一时间被百度收录;对于网站的最新原创内容，使用主动推送功能可以快速通知到百度，使内容可以在转发之前被百度发现.

使用主动推送

• 需要先安装插件npm i hexo-baidu-url-submit -S
• 然后再在站点配置文件中按如下方式新增字段

baidu_url_submit:
  count: 10 # 提交最新的链接数
  host: crowncj.com # 在百度站长平台中注册的域名,虽然官方推荐要带有 www, 但可以不带.
  token:  XXXXX # 你的秘钥,每个人都不一样,获取方法在下面
  path: baidu_urls.txt # 文本文档的地址,新链接会保存在此文本文档里

• 然后加入新的 deploy

deploy:
 - type:baidu_url_submitter

注意,这里多个 type 的写法应该这么写,前面那个 type 是我推送到 Gitub 与 Coding 的page页面的配置,后面再讲这个.

密钥的获取位置在网页抓取中的链接提交这一块,如下所示:

• 最后当你执行hexo d时新的连接就会被推送上去.
• 推送成功时,会有如下终端提示,各种不同的推送反馈字段说明在这里查看,一般来说,推送失败都是地址不相符造成的,我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中是否一样即可,这里需要注意的是,多加www会导致上传失败(血的教训...)

让 Google 收录你的网站

• 登录 Google 网络站长,点击添加属性按要求添加你的网站

• 验证你的网站所有权,我推荐使用 HTML 文件上传的方式,将他给你的html 文件放入 sources 文件夹下,但 html 文件默认会被 hexo 预编译,所以这里,我们要手动设置让 hexo 不要编译该文件,在文件开始添加layout:false即可.
  

• 添加 sitemap : 进入 Google Search Console - 抓取 - 站点地图,点击「添加/测试站点地图」,输入你的博客网址. 若无报错则站点地图提交成功
• 提交 robots.txt:

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中，博客生成后在站点目录 /public/ 下。

我的 robots.txt 文件内容如下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

robots.txt 文件更新至网站后可进入 Google Search Console - 抓取 - robots.txt 测试工具进行测试。

这里部分参考自Hexo 博客搜索 SEO 优化 -- 谷歌篇

优化你的 URL

这段话参考自上面那个小姐姐的文章,写的很好,这里我直接拿来用下

seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面，但是我们使用hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会经常爬不到我们的文章，所以我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根目录的配置文件下修改permalink如下：

将你的网站同时托管到 Github 和 Coding 上,国内外分流

Coding 类似于中国的 Github 一样,也提供了 Pages 服务,但对我们而言,跟 Github 不同的地方在于免费用户能拥有五个私人仓库,这个可以用来部署自己的一些私人代码,而且配合 Github 可以做到国内IP 访问 Coding 的 Pages 页面,国外访问 Github 上面的 Pages 页面.大致配置过程如下:

• 在 Coding 上创建仓库: 这里注意要去创建一个公有的仓库,私有仓库是没有 pages 服务的.
• 将你的公钥传上去.这里网上关于自己公钥的相关教程很多,我就不多叙述了.
• 修改 hexo 的站点配置文件中的 deploy 选项,配置你的 Github 与 Coding 仓库,需要注意的是其中 Github 的仓库名xxx.github.io必须跟你的 Github 名称一样:
  

每次上传的时候都需要输入你的账号密码之类的信息,可以直接将你账号密码写在上传地址中,这样就不用每次更新都输入你的账号密码了

例如你的账号为:crown3,密码为 BBB;
那你的repo填写为下面这样即可
github: https://crown3:BBB@github.com/crown3/crown3.github.io.git
coding: https://crown3:BBB@git.coding.net/crown3/仓库名.git

• 设置 coding 的 pages 服务:在pages页面将部署来源选择为master分支，然后将自定义域名填写自己购买的域名就可以了

• 设置域名解析: 在你的域名提供商那里修改你的域名解析就行,例如我的是万网,按照下图所示,添加这五条解析即可做到国内外访问分流.

  
  

将自己的代码托管到私有仓库

当我们将自己的代码托管到私有仓库后,就可以在任何一台电脑上将你的 hexo 部署代码下载下来进行编辑,而且可以将你的一些个人密钥什么的直接推送到你的代码仓库去,这样更便利于我们的管理维护.

在上文我已经说过了,国内 Coding 的免费用户可以创建五个私有仓库,这是可以直接拿来使用,但是如果你对国内的私有仓库安全性存有怀疑,也可以去使用国外专门做私有仓库托管的bitbucket,在这里私有仓库是可以免费使用的.具体上传之类的使用方法我就不再细述了,都是基于 git 做的代码管理,使用方法都大同小异.

使用 Gulp 压缩你的代码

代码压缩可以明显减小我们的文件大小,加载速度,这里我会直接提供我使用的脚本,大家可以直接拿来使用,有需要了解相关知识的可以去gulp官网去做相关了解.

• 先安装Gulp以及我们需要使用的一系列插件:

npm i gulp gulp-clean-css gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-uglify -S

• 接着创建gulpfile.js: 在你的博客根目录(跟你站点配置文件同一层)下创建gulpfile.js这个文件,然后在里面填入如下脚本即可,里面有相关注释,感兴趣的可以去了解一下.

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var runSequence = require('run-sequence');
var Hexo = require('hexo');
// 清除public文件夹
gulp.task('clean', function() {
    return del(['public/**/*']);
});
// 利用Hexo API 来生成博客内容， 效果和在命令行运行： hexo g 一样
// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
    hexo.init().then(function() {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function() {
        return hexo.exit();
    }).then(function() {
        return cb()
    }).catch(function(err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
})
// 压缩public目录下的所有css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩public目录下的所有html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});
// 压缩public目录下的所有js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩public目录下的所有img： 这个采用默认配置
gulp.task('minify-img', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./public/images'))
})
// 同上，压缩图片，这里采用了： 最大化压缩效果。
gulp.task('minify-img-aggressive', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
})
// 用run-sequence并发执行，同时处理html，css，js，img
gulp.task('compress', function(cb) {
    runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive'], cb);
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆
gulp.task('build', function(cb) {
    runSequence('clean', 'generate', 'compress', cb)
});
gulp.task('default', ['build'])

• 执行gulp: 在命令行中输入gulp build即可

这里要说明的是,这里利用Hexo API 来生成博客内容,效果和在命令行运行： hexo g 一样,所以当我们在执行gulp build时,会根据我们的相关博文来直接生成相应的public文件夹中的内容,并直接进行压缩,接下来我们运行hexo d上传上去的代码会是已经进行相应压缩了的.

使用七牛图床来处理我们的图片

在我的另一篇博文 --- 网站配图,图片压缩以及图床选择小结中已经简单介绍过七牛的相关使用了,这里我想像各位展示下我现在使用七牛图床的最新姿势(虽然跟简书什么的直接拖拽粘贴就可直接使用还是有点麻烦,但这里我们可以自己控制我们上传图片的大小质量等,而且操作也不麻烦到哪里去):

选中一张图片 => 用智图进行相应压缩处理 => 使用 iPic 快捷键一键上传到七牛云(cmd + u) => 在文章中直接粘贴已经复制到剪贴板的图片地址

选择智图来压缩是因为iPic这个软件自带的上传压缩效果没有智图的好,如果对这个配置结果比较感兴趣的童鞋可以去看看我另一篇博文!!!

如何操作该博客

相信应该有部分童鞋看完前面所有的配置估计已经被绕的云里雾里的,但不要担心不要害怕,当你配置好后接下来的使用简直方便的一批.这里我简单的说下按照我这个流程配置完后,日常的使用操作吧.

怎么使用

1. hexo g: 生成当前博客 重新编写后的 gulp 任务可以直接生成完成public文件夹中的生成以及压缩.
2. gulp build: 生成文件后再压缩已生成的代码,图片等
3. hexo d: 将最终代码推送上去

---

2017-08-25更新部分

再把自己私事处理的差不多的情况后，重新开始维护自己的博客，但是越使用越发现一个很严重的问题，就是每次不管是发布文章还是更新文章，我都要去做好多没必要的重复操作，gulp build => hexo d => git add . => git commit -m 'xxx' => git push 等一系列操作完成后才能完成一次更新，还有每次本地预览我的博客更改时居然还要我去手动去打开浏览器 ...... What �fuck！所以我就去开始找各种能帮我偷懒的的方法，最后还真的被我找到最合适我当前情况的方法，具体的过程这里就不详说了，大家感兴趣的可以去我另外两篇文章中查看 ———— �如何使用Shell命令来节省各种常规操作 和 NPM的一些“骚”操作，这里我只将我的更改地方以及之后的操作方法在这里简单说下。�

• 本地预览：npm start�即可，自动打开浏览器冰进入博客的debug模式
• 发布更新：npm run build即可，上诉的所有关于压缩打包以及上传到私有库git中所有操作都会在这里完成。

修改地方

1. 安装这个插件
2. 按这篇文章�————如何使用Shell命令来节省各种常规操作，中的步骤在你的站点配置目录下创建你的脚本并赋予权限。
3. 在你的package.json中添加如下命令�

"scripts": {
    "build": "./deploy.sh",
    "start": "opener http://localhost:4000 && hexo server --debug"
},

---

创建文章

使用命令行

hexo new <你的文章名>

手动创建

在 hexo 主目录下 source -> _posts 新建以 .md 为后缀的文件。

Front-matter

Front-matter 是文件最上方以 --- 分隔的一块区域,主要用于指定个别文件的变量来设置我们的相关文章等页面,具体位置如下

Front-matter - 官方介绍

参数	描述	默认值
layout	布局	post
title	标题	文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址
thumbnail	缩略图地址
toc	显示 TOC 按钮	true
comment	显示评论	true
notag	不生成标签按钮	false
top	置顶	false
mathJax	启用 Mathjax	false
description	每篇文章在搜索结果中显示的链接描述	站点配置文件中的 description

缩略图功能

在 Material 主题中，每个 Scheme 都有缩略图功能。
只需要在 Front-matter 中添加参数 thumbnail:，然后填入缩略图地址即可。

修改你的文章模板

当你每次使用hexo new 你的文章名时,默认生成的模板是这个样子的

---
title: XXXX
tag: XXXX
date: XXXX
---

但这种这种文章模板没有一大堆描述属性,例如description,thumbnail等,明显不能满足我们的日常需求,所以我们这是一般会去修改我们的默认模板来满足我们的需求.这是我们只需修改/scaffolds/下相应的文件即可.

post.md  ==>  对应hexo new 生成的md模板
page.md  ==>  对应hexo new page生成的categories模板

例如我修改的就是/scaffolds/post.md:

---
title: {{ title }} //文章标题
tags: [] //文章的标签
categories: 文章的分类
description: 文章的搜索结果描述
thumbnail: '文章缩略图位置'
date: {{ date }} //时间
---

这里还可以添加一些文章公共的开头等文字

总结

最后,关于我自己这篇博客的折腾过程基本上是说清楚了,如果那里有写的不够清楚或者有问题的地方,欢迎大家来交流指正.

我们的口号是 生命不息,折腾不止 [斜眼笑]

---

随着我自己个人的技术水平的提高，我也会尽最大力量去原创一些有价值有内容的文章出来。在此期间我的文章会同步更新在以下地方,欢迎大家在自己长逛的网站中关注或者star我的Github来了解我的最新消息!!!

• 我的博客网站 --- crowncj.com
• 我的知乎专栏 --- Crown的编程学习感悟
• 我的掘金 --- 掘金 | Crown
• 我的简书 --- 简书 | Crown3
• 我的segmentfault --- segmentfault | Crown3

未经允许,不准转载