Mac+Hexo+GitHub

(Updated: )
, ,

Catalog

  1. 博客本地环境搭建
  2. 连接github
  3. 博客美化
  4. Google&Baidu&Bing网站身份验证和添加Sitemap

博客本地环境搭建

博客搭建教程

hexo 主题：https://github.com/Kaijun/hexo-theme-huxblog

此主题原作者是用 ruby 写的，Jekyll 作为动力的：https://github.com/Huxpro/huxpro.github.io。hexo 的主题是被 kaijun 移植的，所有有一些东西还有有区别，比如说文章里面的目录没有了

post-bg-theme

安装Node.js和Git。

1
2
3
4
5
6
7
brew install node
brew install npm
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

这是初始主题，更换主题为Hexo-Theme-Huxblog。

1
2
3
git clone https://github.com/Kaijun/hexo-theme-huxblog.git
cd hexo-theme-huxblog
npm install

插件

hexo-blog-encrypt

https://www.jianshu.com/p/44e211829447?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install hexo-blog-encrypt

# _config.yml
encrypt:
	enable: true

---
title: xxxxx
date: xxxxx
tags: xxxxx 
password: 该Blog使用的密码
abstract: Blog摘要文字（少量）
message: 密码框上的描述性文字
---

连接github

上传或本地试运行

1
2
3
hexo new post IMAPOST
hexo serve // run hexo in local environment
hexo clean && hexo deploy // hexo will push the static files automatically into the specific branch(gh-pages) of your repo!

配置你的博客

博客美化

  • 添加音乐

  • 添加本地音乐

    1
    <audio controls="controls" autoplay="autoplay"> <source src="./我和我的祖国.mp3" type="audio/mp3" /> </audio>

  • 添加iframe网站外音乐

    1
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1591910&auto=1&height=66"></iframe>

  • 添加视频

https://www.cnblogs.com/wkfvawl/p/12268980.html

1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

_config.yml配置示例

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
# Hexo Configuration Hexo配置文件
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/


# 网站信息
#标题
title: 学志の博客
#副标题
subtitle: 记录学习的技能和遇到的问题
#网站描述
description: 做自己爱做的事，爱自己在做的事！
#作者昵称
author: 张学志
#网站语言，默认英语，设置简体汉语
language: zh-Hans

#时区，默认电脑时区
#timezone: 
timezone: Asia/Shanghai


# 网址设置
#如果网站是放在子目录中，将url设置成'http://yoursite.com/child'，将root设置成'/child/'
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
#网址
url: http://zhangxuezhi.com
#网站根目录。如果网站是放在子目录中，将root设置成'子目录名'
root: /
#文章链接地址格式 。即文章存放的目录。
permalink: :year/:month/:day/:title/
permalink_defaults:


# 目录设置
#资源文件夹，放在里面的文件会上传到github中
source_dir: source
#公共文件夹，存放生成的静态文件
public_dir: public
#标签文件夹，默认是tags。实际存放在source/tags中。
tag_dir: tags
rss_dir: rss
#档案文件夹，默认是archives。
archive_dir: archives
#分类文件夹，默认是categories。实际存放在source/categories中。
category_dir: categories
#代码文件夹，默认是downloads/code
code_dir: downloads/code
#国际化文件夹，默认跟language相同
i18n_dir: :lang
#不需要渲染的文件夹或文件夹,放在[]中
# 这两个文件是百度和google的站长验证文件，不能渲染，否则会改变内容，不能验证过
skip_render: [baidu_verify_R9MZjdMkXT.html, google0f8fac7da2b48ef8.html, README.md, 模板.md]


# 写作选项
# 新建博文（帖子）的默认名称
# File name of new posts
new_post_name: :title.md 
#默认布局模板是post，而不是draft和page
default_layout: post
#是否将标题转换成标题形式（首字母大写）
titlecase: false # Transform title into titlecase
#在新标签页面中打开网页
external_link: true # Open external links in new tab
filename_case: 0
#是否渲染草稿
render_drafts: false
#启动 Asset 文件夹
post_asset_folder: false
#把链接改为与根目录的相对位址
relative_link: false
#显示未来的文章
future: true
#代码块的设置
highlight:
  enable: true          #  使用代码高亮
  line_number: true # 显示行号
  auto_detect: true  # 自动检测语言
  tab_replace:

  
# 分类和标签
# 默认分类
default_category: uncategorized
#分类别名
category_map:
#标签别名
tag_map:


# 日期和时间格式
#Hexo 使用 Moment.js 来解析和显示时间。
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss


# 分页配置
# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save
## Set per_page to 0 to disable pagination
#每页显示的文章量 
#per_page: 20
#首页的分页设置
index_generator:
  per_page: 5
#归档页的分页设置
archive_generator:
  per_page: 30
  yearly: true
  monthly: true
#标签页的分页设置
tag_generator:
  per_page: 20

#分页路径，在public中可以看到
#pagination_dir: page


# Extensions 拓展插件配置
## Plugins: https://hexo.io/plugins/
plugins: 
baidusitemap: 
  path: baidusitemap.xml


# 配置RSS
feed: 
  #feed 类型 (atom/rss2)
  type: atom   
  #rss 路径
  path: atom.xml  
  #在 rss 中最多生成的文章数(0显示所有)
  limit: 0
  
  
  
# 自定义站点内容搜索
# 需要先安装插件：
# npm install hexo-generator-search --save
search:
  path: search.xml
  # 如只想索引文章，可设置为post
  field: all 
  
# 主题配置
## Themes: https://hexo.io/themes/
#theme: false #禁用主题
#theme: landscape
theme: next


# 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  #repo: https://github.com/xuezhisd/xuezhisd.github.io.git
  repo: 
    # 部署到github
    github: git@github.com:xuezhisd/xuezhisd.github.io.git,master
    # 部署到coding.net。取消注释，可同时部署
    #coding: git@git.coding.net:xuezhisd/blog.git,coding-pages
  #type: baidu_url_submitter

修改脚本

设置图床

设置 index 预览长度

修改预览长度

Google&Baidu&Bing网站身份验证和添加Sitemap

html验证
页面的 header 设置在themes/huxblog/layout/_partials/head.ejs，添加

1
2
3
4
<meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
<me
ta name="baidu-site-verification" content="qdgsDvgwFq" />
<meta name="msvalidate.01" content="0E9B71B6F56A22BC0F2FC544223578BC" />

百度:https://ziyuan.baidu.com/site/index#/
必应:https://www.bing.com/webmaster/home/

添加sitemap
安装针对谷歌的插件sudo npm install hexo-generator-sitemap --save
安装针对百度的插件sudo npm install hexo-generator-baidu-sitemap --save-dev
然后进入_config.yml

1
2
3
4
5
#自动生成的sitemap
sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

RevolverMaps

1
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=51upa1szdt0&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>