使用Hexo搭建个人博客的终极资料

# 一、前言

Hexo 是一个基于 NodeJs 博客框架，可以快速的帮我们搭建一个博客系统，Hexo使用的是Markdown（下文简称MD）解析文章的，在几秒内即可利用靓丽的主体生成静态网页。

推荐使用 Hexo 有三大理由：

  • 有大量的主题可供人们选择
  • 使用MD解析文章，MD是现在主流的文章格式
  • 可以快速的生成静态网页，对于系统性能要求低

本文将包含的内容：

  • Hexo安装
  • 后台模式启动Hexo
  • Hexo主题更换
  • 构建Hexo分类列表页
  • 添加评论功能
  • 使用Hexo-Admin插件更方便的发布文章

本文实践环境：

  • Ubuntu 16.04

二、Hexo安装

Setp1：安装NodeJs环境

  • 下载对应平台的安装包

输入网址：https://nodejs.org/en/download/ 找到对应的平台进行下载，如果是Windows平台可以直接使用xxx.msi进行傻瓜式的安装即可，如果是Linux系统，需要下载安装包，然后上传到对应的服务器，等待后续的操作。

  • 解压

tar -xvf node-v8.11.4-linux-x64.tar.xz

  • 设置全局变量

sudo ln /用户Node解压包地址/bin/node /usr/local/bin/node

sudo ln /用户Node解压包地址/bin/node /usr/local/bin/npm

进行如上配置之后，nodejs环境已经安装好了，使用命令查看nodejs版本

node -v

Setp2：安装Hexo脚手架

npm install hexo-cli -g

所谓的“脚手架”也就是安装对应的客户端，使它具备操作自己的能力。这样说可能有点绕，比如说Hexo脚手架的作用就可以创建Hexo框架的项目，新建页面，编译Hexo项目，发布运行Hexo项目对，脚手架是让其拥有操作自身的能力。

Setp3：初始化Hexo

使用命令：

hexo init blog

cd blog

npm install

Setp4：启动Hexo

hexo s

hexo s是hexo server的缩写，正常启动之后，在浏览器输入：http://localhost:4000/

这时候就能看到我们已经搭好的Hexo博客了，是不是很方便。

三、后台模式启动Hexo

上面我们已经博客搭好了，但是退出控制台之后发现访问不了了，这是因为启动Hexo访问的命令终止了，这个时候我们需要使用后台模式来启动Hexo了。

和后台启动NodeJs一样，我们有两种方式可以实现后台模式启动：

  1. 使用Linux本身自带的nohup命令启动；
  2. 使用第三方守护线程的方式启动，比如PM2；

下来我们分别来实现以上两种方式。

3.1 使用nohup模式启动

  • nohup启动命令：

nohup hexo s -p 80 &

exit

其中“-p 80”是指定端口号。

  • 停止命令：

killall hexo

3.2 使用PM2启动

Setp1：安装PM2

npm i pm2 -g

Setp2：编写启动脚本

创建app.js，放在博客根目录，代码如下：

//run
const { exec } = require('child_process')
exec('hexo server -p 80',(error, stdout, stderr) => {if(error){console.log('exec error: ${error}')return}console.log('stdout: ${stdout}');console.log('stderr: ${stderr}');
})

Setp3：启动项目

进入博客根目录，输入命令：

pm2 start app.js

更多pm2命令

pm2 stop all #停止所有应用
pm2 restart all #重启所有应用
pm2 delete all #删除所有应用
pm2 list #查看所有应用

3.3 总结

nohup和pm2的区别：

  • nohup比pm2使用更简单
  • pm2功能比nohup更强大，有完善的日志信息，可以查看详细的运行情况
  • pm2有相应的管理视图，可以方便多应用的管理和运行
  • pm2可以设置多实例运行nodejs程序，可以充分利用系统资源

四、主题更换

Hexo另一个强大之处，在于它有很多的主题可以使用，方法地址：https://hexo.io/themes/

选择你喜欢的主题，以“MaterialFlow”为例，更换步骤如下：

Setp1：下载主题

访问：https://github.com/stkevintan/hexo-theme-material-flow 点击Clone or download => Download ZIP 下载文件到本地。

Setp2：复制主题到服务器

把下载好的文件进行解压之后，拷贝到Hexo\themes目录下。

Setp3：修改配置文件

找到Hexo根目录的_config.yml修改：

theme: landscape

为

theme: material-flow

继续更改根目录的_config.yml文件为自己的信息，比如title，author等，可以参照这个配置文件：

https://github.com/stkevintan/hexo/blob/master/_config.yml

而主题material-flow下也有一个_config.yml文件，这个文件是配置使用的过程的，比如分类，标签的名称顺序等，查找配置文件：

https://github.com/stkevintan/hexo/blob/master/themes/material-flow/_config.yml

Setp4：重启项目

到目前为止已经完成了主题的更换，如果你是使用的nohup就是用“killall hexo”停止，在启动项目即可，如果使用pm2就是用“pm2 restart all”，查看新换的主题吧。

五、构建Hexo分类列表页

使用Hexo是没有分类集合页面的，需要用户自己创建，步骤如下：

Setp1：创建分类页面

hexo new page “categories”

Setp2：配置分类导航

打开主题内的_config.yml，注意不是根目录的_config.yml，配置如下：

menu:- name: 首页slug: homeurl: /- name: 分类slug: categoriesurl: /categories

把分类显示到导航的第二个，如下图：

Setp3：修改模板

打开文件layout/_partial/article.ejs，找到

<div class="article-entry" itemprop="articleBody">替换div的所有内容为下面这段代码：

<div class="article-entry" itemprop="articleBody"><% if (page.type === "tags") { %><div class="tag-cloud"><div class="tag-cloud-title"><%- _p('counter.tag_cloud', site.tags.length) %></div><div class="tag-cloud-tags"><%- tagcloud({min_font: 12,max_font: 30,amount: 200,color: true,start_color: '#ccc',end_color: '#111'}) %></div></div><% } else if (page.type === 'categories') { %><div class="category-all-page"><div class="category-all-title"><%- _p('全部分类', site.categories.length) %></div><div class="category-all"><%- list_categories() %></div></div><% } else { %><% if (post.excerpt && index){ %><%- post.excerpt %><% } else { %><%- post.content %><% } %><% } %>
</div>

Setp4：修改样式

以“material-flow”主题为例，打开文件“themes/material-flow/source/less/_article.less”添加下面样式，到文件最底部：

/*tag-cloud*/
.tag-cloud {text-align: center;margin-top: 50px;
}
.tag-cloud a {display: inline-block;margin: 10px;
}
.tag-cloud-title {font-weight: 700;font-size: 24px;
}
.tag-cloud-tags {margin-top: 15px;a {display: inline-block;text-decoration: none;font-weight: normal;font-size: 10px;color: #fff;line-height: normal;padding: 5px 5px 5px 10px;position: relative;border-radius: 0 5px 5px 0;font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;&:hover {opacity: 0.8;}&:before {content: " ";width: 0;height: 0;position: absolute;top: 0;left: -18px;border: 9px solid transparent;}&:after {content: " ";width: 4px;height: 4px;background-color: #fff;border-radius: 4px;box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);position: absolute;top: 7px;left: 2px;}}a.color1 {background: #FF945C;&:before {border-right-color: #FF945C;}}a.color2 {background: #F5C7B7;&:before {border-right-color: #F5C7B7;}}a.color3 {background: #BA8F6C;&:before {border-right-color: #BA8F6C;}}a.color4 {background: #CFB7C4;&:before {border-right-color: #CFB7C4;}}a.color5 {background: #7B5D5F;&:before {border-right-color: #7B5D5F;}}
}/*category-all-page*/
.category-all-page {margin-top: 50px;.category-all-title {font-weight: 700;font-size: 24px;text-align: center;}.category-list-item:after {content: '';clear: both;display: table;}.category-list-count {float: right;margin-left: 5px;}.category-list-count:before {content: '一共 ';}.category-list-count:after {content: ' 篇文章';}
}

效果如下图：

如上的配置设置完之后，还差一步给文章设置了分类之后，才会显示出来。

Setp5：设置文章属性

添加如下属性在MD的开头：

---
title: RabbitMQ在Ubuntu上的环境搭建
date: 2018-06-02
tag: "rabbitmq"
categories:- [Java]
  - [MQ]
---

其中：

  • title 文章标题
  • date 文章发布日期
  • tag 文章标签
  • categories 文章分类，多个独立的分类使用上面代码的格式

设置了文章分类之后，所有文章的分类就会自动显示出来了。

六、添加评论功能

本文对接的评论为畅言，畅言微微SOHU出品的，在行业里面使用的很广泛，比如17173，人民网，中国新闻网等调用的畅言，优点是对接简单，国内的速度快，不需要FQ，缺点是嵌套的域名需要备案。

Setp1：注册畅言账号

访问：https://changyan.kuaizhan.com/ 注册账号，安装畅言的引导注册应用，获取评论安装代码，每个应用的都不一样，其中appid和conf是独立的，复制畅言评论安装代码。

Setp2：修改主题配置

找到主题下的_config.yml在底部添加：

changyan:on: true

Setp3：修改代码

打开文件“material-flow\layout_partial\article.ejs”替换代码：

<% if (post.comments && config.disqus_shortname){ %><section id="comments"><div id="disqus_thread"></div></section><% } %>

为：

<% if (post.comments && theme.changyan.on){ %><%- partial('comments/changyan', {}) %>
<% } %>

修改完之后，重启项目。

评论效果如下：

七、使用Hexo-Admin更方便的发布文章

使用Hexo快是快，但是有一个问题，就是每次发布文章都要手动发布到服务器上，并且还要进行服务器重启，是一件很麻烦的事情，那么有没有简单的方法，可以直接通过后台进行文章录入和发布呢？

这就是Hexo-Admin插件的作用，让你可以直接通过后台管理和新增文章，真是太爽了，下来一起来看看实现步骤吧。

Setp1：安装Hexo-Admin插件

npm install –save hexo-admin

Setp2：启动插件

经过上面安装已经挖完成了hexo-admin的安装了，这个时候只需要重启项目，访问http://localhost/admin/ 就可以看到管理后台了，如下图：

Setp3：设置密码

我们发现第一次登录是没有密码的，这可不行，接下来我们要设置一个密码，点击管理后台的Settings，如下图：

设置密码1

进入页面之后，输入用户名、密码，保存生成的账号信息复制到根目录下的_config.yml文件最底下，配置账号信息，如下图：

设置密码2

重启服务，这个时候，我们重新访问http://localhost/admin/ 发现生效了，我们只有输入正常的用户名或者密码才能进入系统。

文章的添加和修改和简书很像，这里就不过多描述了，更多使用的细节用户自己慢慢研究吧。

八、总结

到目前为止，我们已经把整个博客系统搭建起来了，包括和用户的互动留言，如果需要打赏功能的话，在article.ejs文章下面贴上自己的微信或支付宝的二维码即可，当然还有很赞的博客搜索功能，也是Hexo也是直接支持的，不用用户过多的配置，就这样这个博客系统已经搭建完毕了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/546875.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux Ubuntu 安装编译Opencv 3.4.3 C++开发环境

Linux Ubuntu 安装编译Opencv 3.4.3 C++开发环境

在安装Autoware之前&#xff0c;需要先安装Opencv&#xff0c;之前在Windows下安装了Opencv&#xff0c;挺复杂的。不过&#xff0c;在Ubuntu 16.04环境中配置安装Opencv相对来说&#xff0c;比较简单。 Linux Ubuntu 安装编译Opencv 3.4.3 C开发环境 1.1 下载Opencv 3.4.3 …
阅读更多...
bugku web基础$_POST

bugku web基础$_POST

意思是通过post传入一个参数what&#xff0c;如果what的值等于flag&#xff0c;即打印出flag 这个我们有好几种办法&#xff1a; 第一种方法&#xff1a; 用FireFox的HackBar插件&#xff0c;传入参数whatflag run一下&#xff0c;爆出了flag 第二种方法&#xff1a; 写个…
阅读更多...
Windows MinGW cmake 安装编译Opencv 3.4.3 C++开发环境

Windows MinGW cmake 安装编译Opencv 3.4.3 C++开发环境

win10 _64位系统 VSCode&#xff1a;官网地址 Opencv&#xff1a;3.4.5 Cmake&#xff1a;3.9.0 MinGw&#xff1a;MinGW-W64 GCC-8.1.0&#xff08;x86_64-posix-seh&#xff09; MinGW配置&#xff1a; MinGW可以在线安装&#xff0c;也可以直接下载文件后离线解压。 …
阅读更多...
Spring Boot （七）MyBatis代码自动生成和辅助插件

Spring Boot （七）MyBatis代码自动生成和辅助插件

一、简介 1.1 MyBatis Generator介绍 MyBatis Generator 是MyBatis 官方出品的一款&#xff0c;用来自动生成MyBatis的 mapper、dao、entity 的框架&#xff0c;让我们省去规律性最强的一部分最基础的代码编写。 1.2 MyBatis Generator使用 MyBatis Generator的使用方式有4…
阅读更多...
Android 性能优化提示

Android 性能优化提示

原文 http://developer.android.com/guide/practices/design/performance.html 性能优化 Android应用程序运行的移动设备受限于其运算能力&#xff0c;存储空间&#xff0c;及电池续航。由此&#xff0c;它必须是高效的。电池续航可能是一个促使你优化程序的原因&#xff0c;即…
阅读更多...
全志A20 刷入Ubuntu/Debian Linux固件 亲测能用

全志A20 刷入Ubuntu/Debian Linux固件 亲测能用

测试盒子&#xff1a;小美盒子&#xff08;好像是杂牌的&#xff09; 有疑问交流可以加微信&#xff1a;1755337994 PCB板号&#xff1a;RM-MPEG-107G VER1.0 20140422 用PhoenixUSBPro刷入就行&#xff0c;要刷500多秒&#xff0c;5124G版本的配置刷完Debian系统里面看还剩1…
阅读更多...
Spring Boot （八）MyBatis + Docker + MongoDB 4.x

Spring Boot （八）MyBatis + Docker + MongoDB 4.x

一、MongoDB简介 1.1 MongoDB介绍 MongoDB是一个强大、灵活&#xff0c;且易于扩展的通用型数据库。MongoDB是C编写的文档型数据库&#xff0c;有着丰富的关系型数据库的功能&#xff0c;并在4.0之后添加了事务支持。 随着存储数据量不断的增加&#xff0c;开发者面临一个困…
阅读更多...
树莓派3B+安装Android 10系统

树莓派3B+安装Android 10系统

Android Things 作为 Google 旗下的一款操作系统 (OS)&#xff0c;能够帮助开发者规模化开发和维护物联网设备。同时推出的 Android Things 控制台 (Android Things Console) 更是将简化产品开发推向极致&#xff0c;帮助开发者定期获取 Google 最新稳定性修复包以及安全升级包…
阅读更多...
Ubuntu下安装配置VIM/GVIM(GUI-Vim)

Ubuntu下安装配置VIM/GVIM(GUI-Vim)

安装命令&#xff1a; sudo apt-get install vim sudo apt-get install vim-gtk 配置&#xff1a; 打开.vimrc文件 vim ~/.vimrc在当前用户的./vimrc文件中添加如下代码&#xff0c;保存 set ai set smarttab set tabstop4 set shiftwidth4 set expandtab set nu set guif…
阅读更多...
Spring Boot（九）Swagger2自动生成接口文档和Mock模拟数据

Spring Boot（九）Swagger2自动生成接口文档和Mock模拟数据

一、简介 在当下这个前后端分离的技术趋势下&#xff0c;前端工程师过度依赖后端工程师的接口和数据&#xff0c;给开发带来了两大问题&#xff1a; 问题一、后端接口查看难&#xff1a;要怎么调用&#xff1f;参数怎么传递&#xff1f;有几个参数&#xff1f;参数都代表什么含…
阅读更多...
viewDidLoad等相关函数调用

viewDidLoad等相关函数调用

viewDidLoad 此方法只有当view从nib文件初始化的时候才被调用。viewDidLoad用于初始化&#xff0c;加载时用到的。 loadView 此方法在控制器的view为nil的时候被调用。虽然经常说loadView是使用代码生成视图的时候&#xff0c;当视图第一次载入的时候调用的方法。用于使用&…
阅读更多...
下一站，上岸@24考研er

下一站，上岸@24考研er

时间过的好快&#xff0c; 考研倒计时①天 去年这个时候&#xff0c; 我应该也是充满未知地进入即将来到的考研初试 去年&#xff0c;这个时候&#xff0c;疫情&#x1f637;刚刚放开 许多人都&#x1f411;&#xff0c;发烧&#xff0c;可幸的是我受影响不大 &#x1f3…
阅读更多...
ubuntu20.10创建QT应用程序快捷方式 Terminal中输入命令直接打开QtCreator

ubuntu20.10创建QT应用程序快捷方式 Terminal中输入命令直接打开QtCreator

在Terminal中直接输入命令就能打开QtCreator&#xff0c; i.e. ~$ qtcreator就可以打开Qt Creator了。 想完成这个功能的原因是&#xff0c;一般在Linux下打命令比较方便&#xff0c;而师兄给下来的这个环境(已经打包成虚拟机&#xff0c;配置好了开发环境)&#xff0c;需要自…
阅读更多...
NVIDIA Jetson Nano B01 安装Ubuntu 18.04.3 LTS

NVIDIA Jetson Nano B01 安装Ubuntu 18.04.3 LTS

几乎完美安装&#xff01; NVIDIA Jetson Nano B01 Ubuntu 18.04.3 LTS 的 ROS 安装和菜鸟的踩坑记录 NVIDIA Jetson Nano B01技术规格Ubuntu 定制系统的安装 烧录时的踩坑记录 SD卡格式SD卡安全信息烧录过程中的注意事项开始安装Ubuntu进入Ubuntu系统之后的一通折腾SSH的配置…
阅读更多...
Spring Boot（十）Logback和Log4j2集成与日志发展史

Spring Boot（十）Logback和Log4j2集成与日志发展史

一、简介 Java知名的日志有很多&#xff0c;比如&#xff1a;JUL、Log4j、JCL、SLF4J、Logback、Log4j2&#xff0c;那么这些日志框架之间有着怎样的关系&#xff1f;诞生的原因又是解决什么问题&#xff1f;下面一起来看。 1.1 JUL Java有自己的日志框架JUL&#xff08;Java…
阅读更多...
Zabbix配置模板监控指定服务器主机

Zabbix配置模板监控指定服务器主机

一、Zabbix监控指定服务器 第一里程&#xff1a;在指定服务器上安装zabbix客户端&#xff0c;即zabbix-agent 访问清华镜像站&#xff0c;找到zabbix-agent镜像 第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步&#xff1a;鼠标点击右键选择复…
阅读更多...
Spring Boot（十一）Redis集成从Docker安装到分布式Session共享

Spring Boot（十一）Redis集成从Docker安装到分布式Session共享

一、简介 Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API&#xff0c;Redis也是技术领域使用最为广泛的存储中间件&#xff0c;它是「Remote Dictionary Service」首字母缩写&#xff0c;也就…
阅读更多...
统计在从1到n的正整数中1出现的次数

统计在从1到n的正整数中1出现的次数

问题&#xff1a; 给定一个十进制正整数N&#xff0c;写下从1开始&#xff0c;到N的所有整数&#xff0c;然后数一下其中出现的所有“1”的个数。 例如&#xff1a;N 2&#xff0c;写下1&#xff0c;2。这样只出现了1个“1”。 N 12&#xff0c;我们会写下1, 2, 3, 4, 5, 6, 7,…
阅读更多...
Spark Streaming源码分析 – DStream

Spark Streaming源码分析 – DStream

A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous sequence of RDDs (of the same type) representing a continuous stream of data.Dstream本质就是离散化的stream&#xff0c;将stream离散化成一组RDD的list&#xff0c;所以基本…
阅读更多...
PowerShell遍历文件夹下的子文件夹和文件

PowerShell遍历文件夹下的子文件夹和文件

PowerShell遍历文件夹下的子文件夹和文件是一件很容易的事儿。Get-ChildItem这个cmdlet就有一个recurse参数是用于遍历文件夹的。 PowerShell中&#xff0c;使用Get-ChildItem来获取文件夹下面的子文件夹和文件&#xff08;当然&#xff0c;它的功能不仅于此&#xff09;。然后…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023