使用Hexo搭建个人博客

2022-09-02 本文已影响0人 DebugWorld

0X00、前言

现在有好多平台都支持写作，比如：知乎、掘金、简书、微信公众号等，这些平台和社区都有着巨大的「网络效应」，那为什么还要有自己的独立博客呢？就我自己而言主要有两个理由：

受限于平台的局限性(封杀、广告、政治正确等)。即少了社交圈子，但多了自由
程序员的geek心态

0X01、搭建方案

搭建独立博客有很多方法，可根据自己的需求及情况决定使用哪套方案。

框架	技术门槛	服务器购买	服务器配置	域名备案	访问速度	费用
WordPress	中高	True	自行配置	可免	视服务器而定	视服务器而定
Hexo	中低	False	托管平台(GitHub、Gitee)	可免	视托管平台而定	低
Jekyll	中低	False	托管平台(GitHub、Gitee)	可免	视托管平台而定	低
Ghost	低	False	服务商提供的配置	可免	较快	高
Farbox	低	False	服务商提供的配置	可免	快	中

本教程选择是Hexo + Gitee进行搭建，Hexo是一个快速、简洁且高效的博客框架，在几秒内即可利用靓丽的主题生成静态网页，Gitee是OSCHINA.NET 推出的代码托管平台，支持Git 和SVN，提供免费的私有仓库托管，码云(Gitee)是国内的代码托管平台，访问速度快，因为GitHub的服务器在国外，在国内访问很不稳定。

0X02、Gitee配置

首先需要一个账号，注册账号之后，新建一个代码仓库用于存放生成的静态网页。

image.png

根据自己情况选择配置，仓库名字就是博客主域名。

image.png

新建代码仓库成功之后，复制该仓库的url，接下来会用到。

image.png

0X03、Hexo配置

1、安装

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js(版本至少是6.9)
Git

如果没有安装，可以按照推荐的教程进行安装。如果您的电脑已经安装上述必备程序，接下来只需要使用 npm 即可完成 Hexo 的安装。

npm install -g hexo-cli
hexo version    # hexo版本号，查看是否安装成功

2、建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件，指定的文件夹一定是空文件夹，否则会报错。

# 比如指定一个新的文件夹blog_source, 用来存放源文件，没有指定文件，默认在当前文件
hexo init blog_source
cd blog_source
npm install

执行上述命令后，在blog_source生成的目录如下：

├── _config.yml
├── package.json
├── scaffolds
├── source
 |   ├── _drafts
 |   └── _posts
└── themes

每个文件具体作用，查看官方文档说明。

3、配置

a、基础配置

博客的网站标题、网站副标题、您的名字、网站使用的语言以及网站时区都可以在 _config.yml 进行配置。查看官方文档，了解具体说明。

title: Debug World
subtitle: 世界很大 我想盘它
description:
keywords:
author: Debug World
language: zh-Hans
timezone:

支持的语言映射表

语言	代码	设定示例
English	en	language: en
简体中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt or language: pt-BR
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id
Korean	ko	language: ko

b、Hexo和Gitee进行关联

在 _config.yml找到deploy，进行修改。

deploy:
  type: git
  repository: https://gitee.com/xxxx/xxxx.git    # 在Gitee仓库复制的链接
  branch: master

4、生成

进入blog_source目录

hexo generate    # 把源文件生成静态文件。等同 hexo g
hexo server      # 启动本地服务器。等同 hexo s

用浏览器打开 http://localhost:4000/ 出现Hexo默认博文，就说明成功了。

image.png

把静态网页推送到Gitee

hexo deploy     # 把生成的静态文件部署到gitee仓库
# hexo g -d       # 重新生成静态文件并部署到gitee仓库
# 如果遇到 ERROR Deployer not found: git 错误，执行以下命令
npm install hexo-deployer-git --save

此时Gitee仓库就会有静态文件，打开服务--> Gitee Pages --> 更新。更新完成打开网址就可以进入博客网站。

image.png

0X04、配置和第三方服务

1、主题

Hexo 是高效的静态站点生成框架，她基于 Node.js。通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容。NexT主题是我个人最喜欢的主题，精于心，简于形。查看NexT官方文档，了解具体使用说明。

image.png

2、404页面

在source文件夹新建 404.html文件，复制以下代码，就可以在访问链接错误的时候展示公益信息。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>404</title>
   </head>
   <body>
      <script type="text/javascript"
                src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
                charset="utf-8" homePageUrl="/" homePageName="回到我的主页">
        </script>
   </body>
</html>

image.png

3、评论、阅读量

NexT主题评论和阅读量的插件有很多，考虑到速度、简洁、稳定等因素，最终选择LeanClod服务。

注册账号之后，选择创建应用，名字随便取
点击配置应用 --> 存储 --> 无限制
设置 --> 应用key --> 获取id和key

image.png

# themes --> next --> _config.yml
# 阅读量配置
leancloud_visitors:
  enable: true
  app_id: xxxxxxxx
  app_key: xxxxxxxxx

# 评价配置
valine:
  enable: false
  appid:  xxxxxx   # your leancloud application appid
  appkey: xxxxxx            # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

4、更新时间

# themes --> next --> _config.yml
post_meta:
  item_text: true      # 标题
  created_at: true     # 创建时间
  updated_at: true     # 更新时间
  categories: true     # 分类

5、阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

在文章中使用 <! -- more --> 手动进行截断，Hexo 提供的方式(官方推荐方案，因为灵活)
在文章的 front-matter 中添加 description，并提供文章摘录
自动形成摘要，在 主题配置文件 中添加:

# themes --> next --> _config.yml
auto_excerpt:
  enable: true
  length: 150    # 默认截取的长度为 150 字符，可以根据需要自行设定

6、多端同步

博客的维护需要多端同步，比如更换电脑，就需要copy源码以及配置文件，我采用的方案是在Gitee仓库新建一个分支hexo用来存储源文件和配置文件，matesr分支用来存储静态网页。

image.png

7、爱心效果

目前NexT的动画效果有四种:

canvas-nest: 粒子碰撞
three_waves: 波浪
canvas_lines: 线状
canvas_sphere: 球状的线

这些动画效果很赞很赞但也很费很费内存，为读者电脑考虑，我关闭了这些动画，只添加了点击出现爱心的效果。

创建js文件, 在/themes/next/source/js/src下新建文件clicklove.js，添加如下代码

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改_layout.swig，在\themes\next\layout_layout.swig文件末尾添加

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

8、站内搜索

当文章越来越多的时候，想要查找某篇文章的时候就比较麻烦了，虽然有分类(categories)和标签(tags)，这个时候就需要站内搜索功能了，通过比较各种主流插件最终选择了local_search。

安装插件

# 站点的根目录下执行
npm install hexo-generator-search  --save
npm install hexo-generator-searchdb --save

配置站点配置文件

# ./_config.yml
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

配置主题配置文件

# themes --> next --> _config.yml
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

9、目录自动展开

Hexo的目录是默认折叠的，想要自动展开，需要在 themes/next/source/css/_custom/custom.styl 文件添加以下自定义样式规则：

.post-toc .nav .nav-child { 
    display: block; 
}

但是通常文章内会出现多级标题，对应的目录里就会有多级导航出现，这时候一些原本你不希望出现的次要标题也会在目录中出现并且无法折叠。可以通过以下样式实现默认只展开两级目录，这样以来就完美解决了该问题。

.post-toc .nav .nav-level-1>.nav-child { 
   display: block; 
}

10、绑定域名

Hexo 绑定域名

0X05、注意事项

NexT的动画效果很赞但也很费内存
每次更博或者修改配置的之后，部署到gitee仓库才能生效，我用的命令是: hexo g -d
部署到gitee仓库后，需要手动更新才能生效，或者使用pro版，自动更新
如果强制使用https，通过http访问就会404

image.png

0X06、总结

个人认为无论从事任何行业，写作都是提升技能的重要途径，希望大家通过本教程能够搭建个人独立博客，记录自己的成长。

0X07、参考

Hexo 官网文档
 NexT 官方文档
 如何使文章多级目录自动展开，而不是默认折叠

使用Hexo搭建个人博客

0X00、前言

0X01、搭建方案

0X02、Gitee配置

0X03、Hexo配置

1、安装

2、建站

3、配置

a、基础配置

b、Hexo和Gitee进行关联

4、生成

0X04、配置和第三方服务

1、主题

2、404页面

3、评论、阅读量

4、更新时间

5、阅读全文

6、多端同步

7、爱心效果

8、站内搜索

9、目录自动展开

10、绑定域名

0X05、注意事项

0X06、总结

0X07、参考

猜你喜欢

热点阅读