[关闭]
@ltlovezh 2017-09-22T14:05:12.000000Z 字数 4193 阅读 592

基于Hexo搭建个人博客

Hexo


Hexo是一个快速、简洁且高效的基于Node.js的博客框架。这里简单介绍下基于Hexo搭建博客的步骤。

安装Hexo

在安装Hexo之前,首先需要安装Node.jsGit,具体的安装过程可参考官方文档
然后就是安装Hexo:

  1. npm install -g hexo-cli

安装完成后,需要建站:

  1. hexo init blog
  2. cd blog
  3. npm install

上述代码创建了blog站点,在blog目录下是如下内容:

  1. .
  2. ├── _config.yml #网站的配置信息,例如:标题、语言等信息
  3. ├── package.json
  4. ├── scaffolds #文件模板
  5. ├── source
  6. | ├── _drafts
  7. | └── _posts #文章内容
  8. └── themes #网站主题

更详细的介绍,可参见官方文档

Next主题

Hexo有很多可选的主题插件,这里以Next为例,介绍下添加主题的步骤。

  1. 首先cd到themes目录下,把Next clone到本地目录
  1. git clone https://github.com/iissnan/hexo-theme-next.git next
  1. 在网站配置文件_config.yml中选择next主题
  1. # Extensions
  2. ## Plugins: https://hexo.io/plugins/
  3. ## Themes: https://hexo.io/themes/
  4. theme: next
  5. #theme: spfk
  1. 然后,本地部署下
  1. hexo clean
  2. hexo generate
  3. hexo server

输入http://localhost:4000,就可以看到效果了。
接下来就是针对Next主题,添加定制化信息,详细信息可参考Next官方文档
Next主题本身支持多种样式,可以在主题配置文件_config.yml下选择不同的样式:

  1. # Schemes
  2. #scheme: Muse
  3. #scheme: Mist
  4. #scheme: Pisces
  5. scheme: Gemini

添加文章标签页面

首先cd到blog站点目录下

  1. 创建一个tags的页面
  1. hexo new page "tags"
  1. 编辑位于blog/source/tags/index.md的文件,最终会显示在网站的标签页面
  1. title: All tags
  2. date: 2016-10-22 13:39:04
  3. type: "tags"
  1. 在主题配置文件_config.yml,添加tags菜单
  1. menu:
  2. home: / || home #主页
  3. about: /about/ || user #个人简介页面
  4. tags: /tags/ || tags #标签页面
  5. categories: /categories/ || th #分类页面
  6. archives: /archives/ || archive #归档页面
  7. commonweal: /404.html || heartbeat #公益404页面

添加文章分类页面

添加分类页面的步骤和标签页面类似,首先cd到blog站点目录下。

  1. 创建一个categories的页面
  1. hexo new page "categories"
  1. 编辑位于blog/source/categories/index.md的文件,最终会显示在网站的分类页面
  1. title: All categories
  2. date: 2016-10-22 13:50:22
  3. type: "categories"
  1. 在主题配置文件_config.yml,添加categories菜单
  1. menu:
  2. home: / || home #主页
  3. about: /about/ || user #个人简介页面
  4. tags: /tags/ || tags #标签页面
  5. categories: /categories/ || th #分类页面
  6. archives: /archives/ || archive #归档页面
  7. commonweal: /404.html || heartbeat #公益404页面

添加好标签和分类页面后,我们怎么对文章进行分类那?很简单,只要在文章的顶部添加tagscategories信息,Hexo就会把文章添加到对应标签和分类下面。如下所示:

  1. ---
  2. title: 文章标题
  3. date: 2016-10-16 09:12:43
  4. tags:
  5. - tag1
  6. - tag2
  7. categories:
  8. - category1
  9. - category2
  10. ---

添加个人简介页面

与添加标签、分类页面类似,首先cd到blog站点目录下。

  1. 创建一个about的页面
  1. hexo new page "about"
  1. 编辑位于blog/source/about/index.md的文件,最终会显示在网站的about页面
  1. ---
  2. title: 博主简介
  3. date: 2016-04-06 22:23:25
  4. ---
  5. # 简介
  6. 姓名:leon
  7. QQ : 1031747903
  1. 在主题配置文件_config.yml,添加about菜单
  1. menu:
  2. home: / || home #主页
  3. about: /about/ || user #个人简介页面
  4. tags: /tags/ || tags #标签页面
  5. categories: /categories/ || th #分类页面
  6. archives: /archives/ || archive #归档页面
  7. commonweal: /404.html || heartbeat #公益404页面

添加404公益页面

首先,在Next主题的source目录下,建立404.html文件,内容如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="robots" content="all" />
  7. <meta name="robots" content="index,follow"/>
  8. </head>
  9. <body>
  10. <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="你的站点地址" homePageName="回到主页"></script>
  11. </body>
  12. </html>

然后,在主题配置文件_config.yml,添加404.html配置:

  1. menu:
  2. home: / || home #主页
  3. about: /about/ || user #个人简介页面
  4. tags: /tags/ || tags \\标签页面
  5. categories: /categories/ || th #分类页面
  6. archives: /archives/ || archive #归档页面
  7. commonweal: /404.html || heartbeat #公益404页面

添加评论

Hexo支持多说、搜狐畅言、Disqus、友言等多个评论系统。其中多说已挂、畅言需要对网站备案,因此我选择了Next原生支持的友言。

只要在友言上进行注册,获得你的用户ID,然后在主题配置文件_config.yml中配置下友言ID就可以了。

  1. # Support for youyan comments system.
  2. # You can get your uid from http://www.uyan.cc
  3. youyan_uid: xxx

添加文章阅读次数

这里仅介绍Next主题直接支持的方法。

基于leancloud统计

在Next主题的主题配置文件_config.xml中有对leancloud的原生支持。

  1. # Show number of visitors to each article.
  2. # You can visit https://leancloud.cn get AppID and AppKey.
  3. leancloud_visitors:
  4. enable: true
  5. app_id: xxx
  6. app_key: xxx

上面的app_idapp_key需要我们在leancloud上创建应用后,在应用 key里面找到。
这种统计方式仅会在每篇文章的顶部展示当前的阅读次数,无法统计博客总的访问次数和人数。

基于不蒜子统计

不蒜子是个人开发的网站计数工具。Next主题也提供了原生支持,只需要按照如下配置即可:

  1. # Show PV/UV of the website/page with busuanzi.
  2. # Get more information on http://ibruce.info/2015/04/04/busuanzi/
  3. busuanzi_count:
  4. # count values only if the other configs are false
  5. enable: true
  6. # custom uv span for the whole site
  7. site_uv: true
  8. site_uv_header: <i class="fa fa-user"></i> 访问人数
  9. site_uv_footer:
  10. # custom pv span for the whole site
  11. site_pv: true
  12. site_pv_header: <i class="fa fa-eye"></i> 访问次数
  13. site_pv_footer:
  14. # custom pv span for one page only
  15. page_pv: true
  16. page_pv_header: <i class="fa fa-file-o"></i> 浏览
  17. page_pv_footer:

如上所示,配置不蒜子后,我们可以看到每篇文章的访问次数、整个站点的访问人数和次数。
但是如果网站已经运行一段时间了,那么整个站点的访问人数和次数是比较离谱的(不知道怎么计算来的?),所以需要初始化访问次数。官方提供的说法是:注册登录,自行修改阅读次数。但是目前官网还不能注册...

部署网站

在本地编辑好网站后,需要上传到服务器,才能让更多的人看到,Hexo的部署很简单。
首先,在网站配置文件_config.yml的最后添加部署信息:

  1. # Deployment
  2. ## Docs: https://hexo.io/docs/deployment.html
  3. deploy:
  4. type: git
  5. repository: https://github.com/ltlovezh/ltlovezh.github.io.git
  6. branch: master

然后,通过hexo deploy命令,就可以部署到github上了。

参考文档

  1. Hexo官网
  2. Hexo插件
  3. Hexo主题
  4. Next主题
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注