安装git和node
1、安装git和node,git和node安装步骤自行查询
安装hexo主题
1、安装hexo-cli
$ npm install -g hexo-cli
2、如需部署到github里面,则需运行命令(此步骤可跳过)
$ npm install hexo-deployer-git --save
3、上面步骤执行完成后,可以自行创建一个文件夹(比如:D:\个人\Blog
),用于搭建博客目录
4、进入上一步骤的文件夹,初始化博客目录,其中_config.yml为网站配置信息,source目录为网站页面所存放地址。
$ D:
$ cd 个人/blog
$ hexo init
$ npm install
新建完成后,指定目录如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts //有时候没有
| └── _posts
└── themes
github搭建博客
1、进入博客,搭建仓库(比如:Blog)
2、进入此仓库,点击settings,在options里找到GitHub Pages这一栏,把source设置成master分支,并保存。此时,你得到一个网址,此网址就是你博客地址。
hexo创建的个人博客部署到Blog仓库
1、在_config.yml文件里设置如下,repo命令写换成自己的
deploy:
type: git //此处需写成git
repo: 仓库地址
branch: master
2、运行如下命令
$ hexo g //生成静态文件,hexo generate
$ hexo d //部署到远程仓库,hexo deploy
3、如果想在本地查看,可以运行如下命令
$ hexo s //启动服务器,hexo server
4、如果不想使用部署方法,也可以在生成静态文件后,在D:的目录下把Blog仓库克隆下来,运行生成静态文件命令后,把生成的public目录下的文件拷贝该目录里,提交到github
更换主题
1、此处推荐使用next主题,主题网址https://hexo.io/themes/
2、下载主题
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
3、打开站点配置文件_config.yml, 设置theme
为next
,设置完成后,运行hexo clean来清除缓存,再运行hexo s命令,此时就可以看到更换后的主题。
4、风格设定
next提供3个风格,推荐使用Pisces
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
5、设置语言,编辑站点文件,将language
设置为zh-Hans
6、设置菜单
menu:
home: / //主页
archives: /archives //归档页
#about: /about //关于页面
#categories: /categories //分类页
tags: /tags //标签页
#commonweal: /404.html //公益404
7、设置头像,编辑站点配置文件,新增avatar,值设置成头像的链接地址,此地址可以为互联网url,也可以为站点内地址,比如/images/avatar.jpg
8、设置作者昵称,编辑站点配置文件,设置author为你的昵称
9、站点描述,编辑站点配置文件,设置description字段为你的描述,可以为你的喜欢的签名之类
10、添加标签页面
$ hexo new page tags
添加完成后,设置页面类型
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---
11、添加分类页面
$ hexo new page categories
添加完成后,设置页面类型
title: 标签
date: 2014-12-22 12:39:04
type: "categories"
---
12、设置代码高亮主题,在主题文件中找到highlight_theme字段,字段值有normal,night,night blue,night bright,night eighties。默认为normal。
13、侧边栏社交链接。主题配置文件中,设置如下。
# Social Links
social:
GitHub: https://github.com/
微博: http://weibo.com/
social_icons:
enable: true
GitHub: github
Weibo: weibo
14、腾讯公益404页面,新建404.html页面,放到source目录下,内容如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
15、站点建立时间,编辑主题配置文件,新增字段since,值为站点建立时间
谷歌分析
编辑站点配置文件,新增字段google_analytics,值设置成你的Google 跟踪 ID。跟踪ID通常是以UA-开头。
阅读次数统计(LeanCloud)
1、进入https://leancloud.cn
2、创建应用,进入该应用,在存储页面创建class,class名称必须为Counter
,主要是为了保证签名对Next主题的修改兼容。数据条目的默认权限设置成为无限制
3、在设置里找到应用key,然后在主题配置文件中配置,记录文章访问量是依据文章标题加上发布日期作为唯一键,所以如果你更改了这两个数值,会造成文章阅读数值清零。
leancloud_visitors:
enable: true
app_id: ddddddddd
app_key: sssssssss
4、如果你想自己设置文章访问量,找到Counter表,设置其中time字段,保存即可,装逼必备。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。