Hexo+Github+Next搭建个人博客

Hexo+Github+Next搭建个人博客

博客已搬迁至Meskill.top 和 liuqihao.xyz

前言

虽然已经有了用wordPress搭建了一个博客站点，但是主题和界面说实话，着实有点朴素，最经在看题解的时候，发现Github+Hexo+Next配置出来的网站十分好看，用Hexo+Github搭建了一个新的博客。

教程

本地环境
系统: Ubuntu 18.04.3 LTS
Node.js版本: v12.12.0
npm版本: 6.11.3

前置知识

• git和github的基本使用
• 简单的bash操作

网站预览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCjcdeCT-1571562073834)(https://github.com/Mirasire/icpc-train/blob/master/pic/Blog/Hexo&github1.png?raw=true)]

安装 Node.js

Hexo 使用的 Node.js，这里建议在官网下载 Node.js，下载地址 | Node.js，下载二进制文件(Linux Binaries x64)。

移动到下载的位置执行

#解压你下载的文件

tar -xvf node-v12.12.0-linux-x64.tar.xz #最后一个是你下载的二进制文件

#移动解压缩后的文件夹
#需要root权限
mv node-v12.12.0-linux-x64 /opt/node-v12.12.0-linux-x64 

然后是改变系统的环境变量，这步需要root权限，打开/etc/profile文件在底部添加

#SET PATH FOR NODEJS
export NODE_HOME=/opt/node-v12.12.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

重新加载/etc/profile，或者重启电脑使配置生效

source /etc/profile

这样我们就安装完成Node.js了，在终端以下命令来检测是否安装成功

node -v
#成功会输出版本号
npm -v
#成功会输出版本号

安装 Hexo

我们使用这个命令来安装Hexo，安装时间可能会很长。可以去泡杯茶，看个报纸什么0.0

npm install hexo-cli -g

安装成功后，我们随便找个地方建立一个文件夹，建立完毕后在文件夹下 输入以下命令，这个时间可能也会有点长。可以去补个番，看个剧什么233

注: Hexo框架和以后写的文章都在这个文件夹内,教程里面建立文件夹名字是MyWebsite

hexo init

以上都准备完毕后，我们可以依次输入下面3条命令，然后在浏览器里面打开localhost:4000，来康康我们的网站雏形

#清楚缓存和已生成的静态文件
hexo clean 
#生成静态文件 是 hexo generate 的简写
hexo g 
#启动服务器。是 hexo server 的简写
hexo s 

接下来是一些简单的hexo命令介绍

命令	作用
hexo new “XXX”	新建 “XXX” 文章
hexo clean	清楚缓存和已生成的静态文件
hexo g	生成静态文件。是 hexo generate 的简写
hexo d	部署网站。是 hexo deploy 的简写
hexo s	启动服务器。是 hexo server 的简写

配置Github

1. 新建立一个仓库，并且仓库的名字为 XXX.github.io，这边要强烈注意!!! , XXX必须是你Github的用户名，即图中两个箭头指向的地方要相等。

由于我已经建立，所以Github上会有警告显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nTQUOQDw-1571562073836)(https://github.com/Mirasire/icpc-train/blob/master/pic/Blog/Hexo&&github2.jpg?raw=true)]

2. 移动到刚刚hexo建立的文件夹下，打开_config.yml文件，这个文件是站点的配置文件夹。在文件夹下面找到下述文字并更改。

#寻找的文字
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: 
  repo: 

#更改为
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: git
  repo: https://github.com/XXX/XXX.github.io.git #XXX就是你的名字

3. 然后我们在文件夹下面依次输入以下命令，之后输入github的登陆邮箱和密码，就部署完成了。

hexo clean
hexo g
hexo d
#输入github的登陆邮箱
#输入github的登陆密码

这样我们就能通过你的Github用户名.github.io来访问自己的博客网站了。

设置 next 主题

在文件夹下面输入以下命令

git clone https://github.com/theme-next/hexo-theme-next.git themes/next

打开站点的 _config.yml 搜索并且更换

#寻找的文字
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:

#更改为
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

重新执行 hexo clean，hexo g，hexo d，来生效。

站点的基本配置

打开站点的 _config.yml ,进行更改即可。

# Site
title: #站点的标题
subtitle: #站点的副标题
description: #描述
keywords: #关键字
author: #博客的作者
language: #语言代码详见文档  中文用zh-CN
timezone: #时间 一般用 Asia/Shanghai

参考文章

Hexo中文文档
GitHub+Hexo 搭建个人网站详细教程 - 吴润
linux入门-nodejs的安装及配置-MsgSS