2

安装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, 设置themenext,设置完成后,运行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字段,保存即可,装逼必备。


时间小鱼
127 声望5 粉丝

成长的路上充满坎坷,要么跨过去,要么等死!