使用Hexo 搭建你的技术博客

柔光的暖阳◎ 2023-02-21 09:21 2阅读 0赞

点击上方 蓝色文字 关注我们

温馨提示：本文大概 7500 字，阅读需要 7 分钟。

## 前言 ##

如果你是个热爱分（zhuang）享（bi）的人，如果你是一个不甘寂寞的程序猿（媛），你想搭建一个属于自己的个人网站，那么请跟着这篇文章操作一遍，几乎免费让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GayHub上，是搭建博客的首选框架，而且有个Github的个人博客逼格一下就上来了！

要想更全面的了解Hexo，可以访问官网 `https://hexo.io/zh-cn/docs/`

## hexo 安装配置 ##

### 基础组件 ###

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

*  git
 *  node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)

这两个组件安装都很简单，而且作为一名合格的程序猿/媛应该都接触过，安装步骤我们就直接略过了。在你安装完成后可以使用 `git --version`，和 `node -v` 两个指令来验证安装结果。![format_png][]

### 安装hexo ###

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。  
`npm install -g hexo-cli`安装完成后可以使用shell命令 `hexo -v` 验证安装结果，如下所示：![format_png 1][]

### 创建博客 ###

建立文件夹，然后进入文件夹后执行 `hexo -init` shell命令，初始化博客，具体操作如下：

mkdir /blog
    cd blog
    hexo -init

初始化完成后会在当前目录生成如下几个目录文件![format_png 2][]

**node\_modules**：依赖包**public**：存放生成的页面**scaffolds**：模版 文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。**source**：资源文件夹是存放用户资源的地方。除 \_posts 文件夹之外，开头命名为 \_ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。**themes**：主题文件夹**\_config.yml**  : 博客的配置文件，大部分配置都是基于这个文件完成。

初始化后我们就可以发布博客了，现在本地体验一下效果：

hexo g
    hexo server

这样在浏览器访问 `http://localhost:4000` 就可以查看博客效果了！![format_png 3][]

## github配置 ##

### 建立仓库 ###

在github上创建一个和你用户名相同的仓库，后面加 `.github.io`，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是http://yourname.github.io，其中yourname就是你注册GitHub的用户名。

比如博主的用户名是 jianzh5，那么我建立的仓库就是 jianzh5.github.io![format_png 4][]

### 生成ssh ###

*  使用下面命令配置你的git信息

git config --global user.name "yourname"
    git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

*  可以用命令检查并确认你的配置

git config user.name
    git config user.email

![format_png 5][] image.png

*  生成ssh ssh --keygen -t rsa -C "youremail" 一直回车即可生成ssh，如下所示，图中显示了你生成ssh的位置。![format_png 6][]

> ssh就是一组秘钥。其中，id\_rsa是你自己电脑的私人秘钥，id\_rsa.pub是公共秘钥。我们把公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

*  配置ssh 在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key 把你的id\_rsa.pub里面的内容信息复制进去。![format_png 7][]
 *  验证ssh是否配置成功 ssh -T git@github.com

## 关联 ##

搭建好了Hexo博客，创建好了Github仓库，接下来就是要将两者进行关联，将hexo生成的文章部署到Github上。

*  修改hexo配置文件，关联github仓库  
    打开站点配置文件 `_config.yml`，拉到最后的deploy配置项，增加git配置。大家可以直接将YourgithubName替换成你的github账号即可！

deploy:
        type: git
        repo: https://github.com/YourgithubName/YourgithubName.github.io.git
        branch: master

*  安装 `hexo-deployer-git` ,这样就可以部署到Github了  
    `npm install hexo-deployer-git --save`
 *  发布文章并部署 执行下面三个命令进行文章发布部署

hexo clean
    hexo generate
    hexo deploy

**`hexo clean`** 清除了你之前生成的东西，可以不加。  
**`hexo generate`** 生成静态文章，也可以使用缩写 `hexo g`**`hexo deploy`** 部署文章，也可以使用缩写 `hexo d`

注意在deploy时可能要你输入username和password，直接输入即可。![format_png 8][]

如果出现上图的效果则说明部署成功，这时候就可以通过浏览器访问并查看你博客效果了。`https://jianzh5.github.io` ![format_png 9][]

## 博客配置 ##

hexo中的大部分配置都是在具体主题中配置，只有些基础配置需要在主配置文件中(\_config.yml)配置，比如博客名称、作者、时区等，大家根据情况自行配置，下面是博主的配置![format_png 10][]

### 发布文章 ###

hexo 发布文章很简单，只需要在主目录中执行  `hexo n "文章标题"` 指令，执行完成后会在 `/blog/source/_posts` 文件夹下生成对应的md文件，要编辑文章只需要使用用md编辑工具编辑生成的文件即可。

在编写文章的时候可以使用tags标签和categories标签给文章打上标签和分类，方便后期检索。示例如下：![format_png 11][]

## 主题配置 ##

如果你不太喜欢nexo的默认主题，可以更换一个主题。这里我们选择Next作为我们的博客主题，官方地址为：`https://github.com/theme-next/hexo-theme-next`

*  下载next主题 在博客目录地址中执行git指令，下载主题

cd /Users/zhangjian/blog
    git clone https://github.com/theme-next/hexo-theme-next themes/next

下载完成后我们就可以在themes主题文件夹下看到next主题文件夹![format_png 12][]

*  修改主题配置 打开\_config.yml，修改theme属性配置，将值设置成next  
    ![format_png 13][]  
    
 *  重新编译部署

hexo g
    hexo d

这样你的博客主题就换成了 next ，可以访问我的博客查看效果：`https://jianzh5.github.io/`

### 配置搜索功能 ###

一般博客都会集成搜搜功能，NexT主题支持集成多种搜索：Local Search 、 Algolia、微搜索等。我使用的是Local Search，大家可以自行选择。

Local Search 的配置步骤如下：

*  安装插件 hexo-generator-searchdb  
    `$ npm install hexo-generator-searchdb`
 *  修改站点配置文件

search:
      path: search.xml
      field: post
      format: html
      limit: 1000

`path`：索引文件的路径，相对于站点根目录  
`field`：搜索范围，默认是 post，还可以选择 page、all，all 表示搜索所有页面`limit`：限制搜索的条目数

*  修改主题配置文件

# Local search
    # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
    local_search:
      enable: true

*  效果预览![format_png 14][]

### 评论配置 ###

没有评论的博客是没有灵魂的，NexT主题支持多种评论插件，这里我们选择valine作为评论系统，详情大家可以移步至官网 `https://leancloud.cn`

注册好应用后进入修改博客主题所在目录的配置文件 `/next/_config.yml`，开启valine并修改你注册的 `appid` 和 `appkey`，配置完成后使用 `hexo g` 和 `hexo d` 编译发布即可看到效果。![format_png 15][]

### 版权申明 ###

主流网站的文章末尾都有版权申明，原文链接。如下效果为博主在CSDN上的某篇博客的版权申明：![format_png 16][]

要在next中配置版权申明很简单，只需要修改主题配置文件 `_config.yml` 中的 `creative_commons` 标签配置：

creative_commons:
      license: by-sa
      sidebar: true
      post: true
      language: deed.zh

所有协议大家可以在网站 `https://creativecommons.org/licenses` 中了解，可以根据需求更换协议。

配置完成后重新部署hexo即可，效果如下：![format_png 17][]

### 打赏功能 ###

现在很多博客平台都集成了打赏功能，如果你也想实现此功能可以按照下面操作实现。

*  准备好微信和支付宝收款二维码 将两张收款二维码图片上传至next主题文件夹下的source/images下，即 `/blog/themes/next/source/images`
 *  修改主题配置文件，开启赞赏![format_png 18][]
 *  重新编译部署

hexo g
    hexo d

*  在文章明细页查看效果![format_png 19][]

### 社交功能 ###

希望给个人博客加上自己在其他平台的链接，可以直接修改主题的配置文件，比如博主给博客加入了博主CSDN、知乎的链接。![format_png 20][]很简单，配置个链接和图标即可，对应的图标大家可以在这个网站找到：`https://www.thinkcmf.com/font/font_awesome/icons.html`，如果不使用图标不要忘记后面需要跟上 `||`，否则编译不成功！

### 配置标签页面 ###

*  创建标签页  
    在博客主目录执行 `hexo new page tags` 创建tags页面，页面位于 `/blog/source/tags/index.md`
 *  编辑标签页，设置页面类型

title: 标签
    date: 2020-06-14 20:57:56
    type: "tags"
    comments: false

由于我们之前开启了评论，所有的页面默认都开启了评论功能，而标签页不需要评论，所以需要加上 `comments: false` 关闭评论。

*  修改菜单配置，将标签页面加入菜单

menu:
      home: / || fa fa-home
      tag: /tags/ || fa fa-tags
      archives: /archives/ || fa fa-archive

### 配置分类页面 ###

*  创建分类页面  
    `hexo new page categories`，页面位于 `/blog/source/categories/index.md`
 *  编辑分类页面，设置页面类型

title: 分类
    date: 2020-06-14 20:57:56
    type: "categories"
    comments: false

分类页面同样也需要关闭评论。

*  修改菜单配置，将分类页面加入菜单

menu:
      home: / || fa fa-home
      tag: /tags/ || fa fa-tags
      catagories: /catagories || fa fa-th
      archives: /archives/ || fa fa-archive

## 小结 ##

本篇文章带大家使用Hexo加上Github搭建自己的个人博客，博客基本的功能该有的都配置上了，剩下的一些个性化配置就等着大家自己慢慢去挖掘了。

作为程序员（媛）坚持写技术博客是很有好处的，可以大大扩展你的技术体系，而且以“输出倒逼输入”本身就是一个很好的学习方法。有搭建博客的想法就要坚持下去，切莫三天打鱼两天晒网，大家共勉！

如果本文对你有帮助，

别忘记三连啊，

点赞、转发、评论

。

咱们下期见！

End

干货分享

这里为大家准备了一份小小的礼物，关注公众号，输入如下代码，即可获得百度网盘地址，无套路领取！  
  
001：《程序员必读书籍》  
002：《从无到有搭建中小型互联网公司后台服务架构与运维架构》  
003：《互联网企业高并发解决方案》  
004：《互联网架构教学视频》  
006：《SpringBoot实现点餐系统》  
007：《SpringSecurity实战视频》  
008：《Hadoop实战教学视频》  
009：《腾讯2019Techo开发者大会PPT》

010： 微信交流群

近期热文top

01 [架构师之路 - 虚拟化技术与容器Docker][- _Docker]

![format_png 21][]

我就知道你“在看”

![format_png 22][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliMTg4M01EeGF0UVdQUm13a2xqTXBQUldpYTNEaWFTYkZZdm5LemVOT2YxWHBFa0R3b2dzZ0xqUVEvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliaWJ2Yk83SmljMDRMM2pCcEVMcHdLY09sZE55MmlhQkhGV21LQVJvbERRbDZCOHRwSFV3QmRIaGFBLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliSlBoUHFqM0g5Q3cxOEJpY01jSzJlR0hkeDRTRlhNZG9VQ0t0Z05NR0pvcjJVdm03b2owRWlicUEvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmlid2ljNnpkNUZWdGVOT0ZpY3VWVU9sV0dwcnRPcXA3amlhT2JqT0E0bFNuNnBGVUVIakxpY05iY3lyQS82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliaERXdXp6WjFkY2xEQWpqVW5kb2liY0JOaHJSRzk1aWIyOUdQTWVDU3E3QWN2SFF3THNmOHV1YXcvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliV0daREVBb0QzRHEyV3JkOHRjV2FVT2F3bjFINGVkS3l3VFlybjhTdHE5UnpjT0pxVHloaWF1dy82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliQW1VdDJPYzVhN2pzcGRmSU0yUHAzU2N6VFBOWDRCbVhhaWFWZ1U2VVUxUmlha0JwRFVvcGdId3cvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliRGFpY0lYa1pkdjVWbUxmODFwVGQzTmliNFFLVVhUVzBzWUVyZFRrUlVJME9mM3lNejBUaWNNeEF3LzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliaHUwVjRsc3dDVElhSU0zSUhpYXpXUURsTUZOeFBLdEhHeVpCWjZ3Tzh4eGc1WFYxWGxqZ1pyZy82NDA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmlicUM5Q2ZHaWFCUlVmT2ZsQ1o5M0JmTEVGeXNzSWhBc2tpYThMUkcwWDFtU3k5Y2ZXWjNCYWhWY2cvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliQ0s4WUYzc1ppYzR4SGlhdzZjaWFlbjZNMjVnOW14Q05SWjcxeGFUZG1LSVMyV1RNOGliZ20zbUd1Zy82NDA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliT2liVnZacUVzaHUwWk1BcGZNRFFkRTZLMmpKTll0STZtbWtYck5seDVVQ0RUWUh3VDBpYlA2NlEvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliRk1PVFVBaWNmeTB3SkwzZ3hpY05yWkFSejFOMkdTa0Jub2gwSzQzaGJmYlU5VjhZMnlUNExBdEEvNjQw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliQlVoQ1JMTGx0empuT1JvY3F3eTk2UE9XVGo0cXFzdDNZSmFWNWVsVGZMTHh3RmljSmJGc2pSZy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliZ1VFaHhiNFhVZ1k5QVV5bW9pYVptbmxFdlVlNkZqVEpybkRrUVNWdjZWYklLOXlwYXRDbVNlZy82NDA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliQ0lhSFZMRERDeFY0YkVIcllpY0N3VUxuU2I5VTFsYzdBNnFNYUVJN3Y3bDZob3ZJZ2VSdG1uUS82NDA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmlibWlhSURXcVpLVkRjM2Z6aWJzaWFMSzVTUXhsTDNKN1hHeTBqVFo0R0Z0cnQwVXJ4U0hTSTltZGZ3LzY0MA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliYW5pYVJZNTd2a2dGVWNpYWxiRUxjNTRzb2lidVRlY1hId3VrY3p6MWRFN21MUnRUV2xSRGZGZWRBLzY0MA?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliUmtlYmQzdWdLS2NYaWJnTmtESVIzcEpnZXBpYkpUR1pHa2txVGV1Z1ZERlFPSzA2enMxTU81ZEEvNjQw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliYWQ3bXJ6emJJRkpsQ1BhbW5PeHZPYXBhd1VxS3BNUm9Jd29GWGU0dU95djBZd2FJRG1nSU1BLzY0MA?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9QeE16VDBPaWJmNGdheUFRekJBdW8wTDFua1R4MU1FNmliRkJrdWt2OFR4aWFOWlBpYU1oeWlhZ0ZnQkNpYXZpY2pCUHB2SUI2SnRQVFc3VUxEQkxMSlB6bEM0d1EvNjQw?x-oss-process=image/format,png
[- _Docker]: https://blog.csdn.net/jianzhang11/article/details/106870892
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9QeE16VDBPaWJmNGlhc1FvS3V3czA4cjBOa3ZvdjJ2NkE0TmR2MGZWMUkwaWJKTENpY1R2SzVlQm03TVh1Y3hqa3MyUXBwWnh6TWJvN2xwWFR1MVhXMlVpY1N3LzY0MA?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9QeE16VDBPaWJmNGlhc1FvS3V3czA4cjBOa3ZvdjJ2NkE0Z1lMRkJPV1VtSGJMMXFDWEdmNWFJaWFpYUFtVWJBVEVyY1hsc250QXBjeGlhRWoyeWFHYktURklBLzY0MA?x-oss-process=image/format,png