这里以主题yilia为例进行说明。
安装主题
$ hexo clean
$ git clone https://github.com/你安装的主题github地址
启用主题
修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia。
更新主题
$ cd themes/你安装的主题github地址
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器
现在打开http://localhost:4000/ ,会看到我们已经应用了一个新的主题。
hexo deploy可以部署到很多平台,具体可以参考这个链接. 如果部署到github,需要在配置文件_config.xml中作如下修改:
deploy:
type: git
repo: [email protected]:13469940053/13469940053.github.io.git
branch: master
然后在命令行中执行
hexo d
即可完成部署。
注意需要提前安装一个扩展:
$ npm install hexo-deployer-git --save
不幸的是,上述命令虽然简单方便,但是偶尔会有莫名其妙的问题出现,因此,我们也可以追本溯源,使用git命令来完成部署的工作。
clone github repo
$ cd d:/hexo/blog
$ git clone https://github.com/你安装的主题github地址
将我们之前创建的repo克隆到本地,新建一个目录叫做.deploy用于存放克隆的代码。
创建一个deploy脚本文件
hexo generate
cp -R public/* .deploy/13469940053.github.io
cd .deploy/13469940053.github.io
git add .
git commit -m “update”
git push origin master
需要部署的时候,执行这段脚本就可以了(比如可以将其保存为deploy.sh)。执行过程中可能需要让你输入Github账户的用户名及密码,按照提示操作即可。
在使用git提交的时候出现错误
The file will have its original line endings in your working directory.
后来发现 自己再提交的时候忘记输入git add 上传的文件 出现了上面的错误,需要下面进行修改:
1 git rm -r -f --cached ./ (删除缓存)
2 git add . (添加该目录下所有文件)
3 git push -u origin master (这时候提交就没问题了)
初次提交的命令
git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:xxxx.git
git push -u origin master
每个不同的主题会需要不同的配置,主题配置文件在主题目录下的_config.yml。
以我们使用的yilia主题为例,其提供如下的配置项(themeyilia_config.yml):
# Header
menu:
主页: /
所有文章: /archives
# 随笔: /tags/随笔
# SubNav
subnav:
github: "#"
weibo: "#"
rss: "#"
zhihu: "#"
#douban: "#"
#mail: "#"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
rss: /atom.xml
# Content
excerpt_link: more
fancybox: true
mathjax: true
# Miscellaneous
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar: ""
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: true
#是否开启云标签
tagcloud: true
#是否开启友情链接
#不开启——
#friends: false
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…
购买域名
在你的域名注册提供商那里配置DNS解析,获取GitHub的IP地址点击,进入source目录下,添加CNAME文件
$ cd source/
$ touch CNAME
$ vim CNAME # 输入你的域名
$ git add CNAME
$ git commit -m "add CNAME"
使用七牛云存储
自己在github上搭建的图床:http://jiji262.github.io/qiniuimgbed/ ,需要首先注册七牛账号使用。
添加sitemap和feed插件
$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap
修改_config.yml,增加以下内容
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
配完之后,就可以访问http://13469940053.github.io/atom.xml
和http://13469940053.github.io/sitemap.xml
,发现这两个文件已经成功生成了。
GitHub Pages有提供制作404页面的指引:Custom 404 Pages。
直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。
推荐使用腾讯公益404。
添加about页面
$ hexo new page "about"
之后在sourceaboutindex.md目录下会生成一个index.md文件,打开输入个人信息即可,如果想要添加版权信息,可以在文件末尾添加:
获取代码,选择你喜欢的代码添加到hexo/themes/yilia/layout/layout.ejs的末尾即可,注意要将代码里的you改成你的Github账号名。
添加支付宝捐赠按钮及二维码支付
支付宝捐赠按钮
在D:hexothemesyilialayout_widget目录下新建一个zhifubao.ejs文件,内容如下
打赏他
添加完该文件之后,要在D:/hexo/themes/yilia/_config.yml文件中启用,如下所示,添加zhifubao
widgets:
- category
- tag
- links
- tagcloud
- zhifubao
- rss
首先需要到这里获取你的支付宝账户的二维码图片,支付宝提供了自定义功能,可以添加自定义文字。
我的二维码扫描捐赠添加在about页面,当然你也可以添加到其它页面,在D:hexoblogsourceabout下有index.md,打开,在适当位置添加
欢迎您捐赠本站,您的支持是我最大的动力!
![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]
可以让图片居中显示,注意将图片链接地址换成你的即可。
点击进入,点击其它工具->站内检索->现在使用->新建搜索引擎->查看代码,将代码里的id值复制,打开/d/hexo/themes/jacman/_config.xml,配置成如下即可。
baidu_search: ## http://zn.baidu.com/
enable: true
id: "1433674487421172828" ## e.g. "783281470518440642" for your baidu search id
site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site
详情参考搞定你的网站计数,具体做法很简单,就是在你的themes/your themes/layout/_partial/footer.ejs
底部加入这段脚本
然后在中间添加如下统计信息即可
本站总访问量 次, 访客数 人次, 本文总阅读量 次
不蒜子的官方服务网站是不蒜子,目前最大的弊端就是不开放注册,所以对于运行了一段时间的网站,不蒜子的数据都是从1开始,没办法设置,只有等后期开放注册之后,登入网站才能对统计计数进行设置。
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
在主题的 _config.yml
文件中,默认支持 QQ
、GitHub
和邮箱的配置,你可以在主题文件的 /layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
其中,社交图标(如:fa-github
)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:
fa-facebook
fa-twitter
fa-google-plus
fa-linkedin
fa-tumblr
fa-medium
fa-slack
fa-weibo
fa-wechat
fa-qq
注意: 本主题中使用的
Font Awesome
版本为4.7.0
。
在主题文件的 source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
要支持音乐播放,就必须开启音乐的播放配置和音乐数据的文件。
首先,在你的博客 source
目录下的 _data
目录(没有的话就新建一个)中新建 musics.json
文件,文件内容如下所示:
[{
"name": "五月雨变奏电音",
"artist": "AnimeVibe",
"url": "http://xxx.com/music1.mp3",
"cover": "http://xxx.com/music-cover1.png"
}, {
"name": "Take me hand",
"artist": "DAISHI DANCE,Cecile Corbel",
"url": "/medias/music/music2.mp3",
"cover": "/medias/music/cover2.png"
}, {
"name": "Shape of You",
"artist": "J.Fla",
"url": "http://xxx.com/music3.mp3",
"cover": "http://xxx.com/music-cover3.png"
}]
注:以上 JSON 中的属性:
name
、artist
、url
、cover
分别表示音乐的名称、作者、音乐文件地址、音乐封面。
然后,在主题的 _config.yml
配置文件中激活配置即可:
# 是否在首页显示音乐.
music:
enable: true
showTitle: false
title: 听听音乐
fixed: false # 是否开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
listFolded: false # 列表默认折叠
listMaxHeight: # 列表最大高度
Front-matter
选项中的所有内容均为非必填的。但我仍然建议至少填写 title
和 date
的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 |
文章标题,强烈建议填写此选项 |
date | 文件创建时的日期时间 | 发布时间,强烈建议填写此选项,且最好保证全局唯一 |
author | 根 _config.yml 中的 author |
文章作者 |
img | featureImages 中的某个值 |
文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg |
top | true |
推荐文章(文章是否置顶),如果 top 值为 true ,则会作为首页推荐文章 |
cover | false |
v1.0.2 版本新增,表示该文章是否需要加入到首页轮播封面中 |
coverImg | 无 | v1.0.2 版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片 |
password | 无 | 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
toc | true |
是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
mathjax | false |
是否开启数学公式支持 ,本文章是否开启 mathjax ,且需要在主题的 _config.yml 文件中也需要开启才行 |
summary | 无 | 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 |
categories | 无 | 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类 |
tags | 无 | 文章标签,一篇文章可以多个标签 |
注意:
- 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色。date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。- 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的
_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。
以下为文章的 Front-matter
示例。
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
Hexo主页
hexo你的博客
Markdown 语法说明 (简体中文版)
本文原始链接:手把手教你使用Hexo + Github Pages搭建个人独立博客
作者:令狐葱
本文基于 知识共享署名-相同方式共享 4.0 国际许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 令狐葱及链接。